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)] 
}