多语言展示
当前在线:1965今日阅读:167今日分享:16

Vue.js的组件和模板

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

    javascript

    方法/步骤
    1

    Vue的内置指令1. v-bindv-bind主要用于绑定DOM元素属性(attribute),即元素属性实际的值是有vm实例中的data属性提供的。例如:

    2

    v-bind可以简写为“:”,上述例子可以简写为实现效果如下:

    3

    2. v-on绑定事件监听器,简写为@。

    4

    3.v-htmlv-html,参数类型为string,作用为更新innerHTML,接受的字符串不会进行编译等操作,按普通HTML处理代码如下

    5

    模板html模板        基于DOM的模板,模板都是可解析有效的html插值文本:使用“Mustache”语法(双大括号){{value}}    作用:替换实例上的属性值,    当值改变时,插值内容就会自动更新原生的html:双大括号输出的是文本,不会解析html属性:使用v-bind进行绑定,可以响应变化使用JavaScript表达式:可以写简单的表达式字符串模板template字符串        template选项对象的属性        模板将会替换挂在元素。挂在元素的内容都将被忽略。代码如下

    6

    根节点只能有一个将html结构写在一对script标签中,设置type='X-template'

    7

    写在script标签中,还是比较局限,如果别的文件也是这个结构的时候,这个就不能重复使用。模板render函数render函数  render 选项对象的属性  createElement(标签名,{数据对象},[子元素]);  子元素为文本或者数组还是来一段代码演示

    推荐信息