vue 从入门到精通(二)

上一篇总结了一些vue的理论知识，如果你没看懂的话……那返回去继续去看啊！反正我要开始第二篇了。

vue提供了大量的指令，比如：v-if,v-bind,v-on……太多，多写项目，多看API，这里就不多说。

1、vue 的三种模块

html模板：就是基于DOM的一些有效的html标签，如：

<div id="app">

  <input type="text" v-model="content">

  <span>{{content}}</span>

</div>

字符串模板：

如下，先定义字符串模板，然后在vue 的选项对象里面利用template绑定。字符串模板的优先级会比html模板高，如果html和字符串模板中都有内容，会用字符串模板里的内容替换html模板。

需要注意的是定义的字符串模板中根节点只能有一个。还有字符串用 ` 引起来是可以换行的（功能键1旁边的那个键）。

let data = {

    content: 'world',

    dataId: '145'

  }

var str = `<div> 你好！{{content}}</div>`

var vm = new Vue({

    el: '#app',

    data: data,

    template: str

  })

除了用变量定义模板字符串，还可以用script标签，给script 标签定义Id，如下：

<script type="x-template" id="temp">

  <div>你好！{{content}}</div>

</script>

<script>

  let data = {

    content: 'world'

  }

  var vm = new Vue({

    el: '#app',

    data: data,

    template: "#temp"

  })

reder函数模板：更加接近编译器。

 render(createElement){

　　"元素名称"，

    {

    属性：{

        属性值：true

    },

    class:{

        fontClass:true

    },

    style:{

    　　color:red

    },

    domProps:{

　　　　innerHTML:"<li>我是html<li>" //当domProps和createElement都要子元素时，以domProps为主。

　　　}

    }，

    [

     createElement("li",1),

     createElement("li",2),

     createElement("li",3)

    ]

}

巴特西

vue 从入门到精通(二)

最新文章

热门文章