探讨Vue.js的组件和模板

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了探讨Vue.js的组件和模板，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@

摘要:


@H_502_0@指令是Vue.js中一个重要的特性， 主要提供了一种机制将数据的变化映射为DOM行为。 那什么交数据的变化映射为DOM行为， Vue.js是通过数据驱动的， 所以我们不会直接去修改DOM结构， 不会出现类似$('ul').append('
  • one
    • ')这样的操作， 当数据变化时，指令会一句设定好的操作对DOM进行修改， 这样就可以只关注数据的变化， 而不用去管理DOM的变化和状态，


    @H_5020@

    Vue的内置指令


    @H    5020@

    1. v-bind


    @H    502_0@v-bind主要用于绑定DOM元素属性（attribute），


    @H_502_0@即元素属性实际的值是有vm实例中的data属性提供的。


    @H_502_0@例如：


    <div class="jb51code">
    <pre class="brush:js;">
    <!doctype html>
    <html lang="en">

    <Meta charset="UTF-8"> Vue的指令
    @H_502_0@v-bind可以简写为“：”，

    @H_502_0@上述例子可以简写为

    @H_502_0@实现效果如下：

    @H_502_0@

    2. v-on

    @H_502_0@绑定事件监听器，简写为@。

    @H_502_0@昨天我们也用过，我们简写一下看一下效果

    <Meta charset="UTF-8"> Vue的指令
    @H_502_0@效果如下：

    @H_502_0@

    3.v-html

    @H_502_0@v-html，参数类型为string，

    @H_502_0@作用为更新innerHTML，

    @H_502_0@接受的字符串不会进行编译等操作，

    @H_502_0@按普通HTML处理

    @H_502_0@代码如下

    <Meta charset="UTF-8"> Vue的指令
    @H_502_0@

    实现效果如下

    @H_502_0@更多内置指令请查询官网：Vue.js指令

    @H_502_0@

    模板

    @H_502_0@html模板

    @H_502_0@基于DOM的模板，模板都是可解析有效的html

    @H_502_0@插值

    @H_502_0@文本：使用“Mustache”语法（双大括号）{{value}}

    @H_502_0@作用：替换实例上的属性值，

    @H_502_0@当值改变时，插值内容就会自动更新

    @H_502_0@原生的html：双大括号输出的是文本，不会解析html

    @H_502_0@属性：使用v-bind进行绑定，可以响应变化

    @H_502_0@使用JavaScript表达式：可以写简单的表达式

    @H_502_0@

    字符串模板

    @H_502_0@template字符串

    @H_502_0@template选项对象的属性

    @H_502_0@模板将会替换挂在元素。挂在元素的内容都将被忽略。

    @H_502_0@

    代码如下

    <Meta charset="UTF-8"> template模板
    @H_502_0@

    有木有发现什么惊奇的变化

    @H_502_0@根节点只能有一个

    @H_502_0@将html结构写在一对script标签中，设置type="X-template"

    <Meta charset="UTF-8"> template模板
    @H_502_0@实现效果如下：

    @H_502_0@写在script标签中，还是比较局限，

    @H_502_0@如果别的文件也是这个结构的时候，

    @H_502_0@这个就不能重复使用。

    @H_502_0@模板render函数

    @H_502_0@render函数

    @H_502_0@ render选项对象的属性

    @H_502_0@ createElement(标签名,{数据对象},[子元素]);

    @H_502_0@ 子元素为文本或者数组

    @H_502_0@

    我们还是来一段代码演示

    <Meta charset="UTF-8"> render<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
    @H_502_0@实现效果如下

    @H_502_0@关于数据对象属性，讲情请参考官网的例子。

    @H_502_0@Vue.js官网

    @H_502_0@

    总结

    @H_502_0@以上所述是小编给大家介绍的Vue.js的组件和模板。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

    vue.js模板模板模板组件组件组件

    猜你在找的Vue相关文章

    elementui的el-tree第一次加载无法展开和选中的问题
    问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有...
    VSCODE打开一个文件，另一个文件就关闭的问题的解决方法
    因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。 可以通过双击...
    一文带你学会国产加密算法SM4的vue实现方案
    前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下...
    解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null
    在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_esl...
    vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
    问题产生 在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i...
    element-UI中手动调用table排序
    &amp;lt;el-table :data=&amp;quot;tableData&amp;quot; &amp;quot;width...
    Vue双向绑定原理及其实现
    在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理...
    Vue事件修饰符详解
    整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是...
    Vue-router插件使用
    单页面原理 Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更...
    Vue 分支循环
    v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。 如果数据是对象类型...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作