Vue模板和Angular模板相似，拥有指令和组件标签。
在渲染层上，Vue2.0引入虚拟DOM。Vue编译器会把模板编译成一个渲染函数（类似React），函数被调用的时候会返回一个虚拟DOM树，其描述了当前页面所处的状态。当发生数据改变时，模板更新重新编译生成一个新的虚拟DOM树，将新树和旧树对比，找到不同点，再最终修改真实的DOM节点。
1. 模板
下面是一个简单的Vue模板例子：
<div id="app">
<ul>
<li v-for="todo in todos" v-on:click="todo.done=!todo.done">
{{todo.title}}
</li>
</ul>
</div>
模板的文本数据绑定使用“mushtache”语法，{{}}内插入文本变量。
2.指令
Vue指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。
Vue常用指令如下：
//更新绑定元素中的内容，类似于$.text()
<p v-text="textStr"></p>
//更新绑定元素中的html内容，类似于$.html()
<p v-html="htmlStr"></p>
//根据表达式的值(true/false)渲染元素。如果isShow为false则不会渲染p标签
<p v-if="isShow"></p>
<p v-else></p>
//根据表达式的值(true/false)显示或隐藏元素。如果isShow为false则p标签样式为"display:none"
<p v-show="isShow"></p>
//用于遍历数据渲染元素或模板。如果list为[1,2,3]则会渲染3个p标签，内容依次为1，2，3
<p v-for="item in list"></p>
//用于在元素上绑定事件。p标签上绑定了clickAction的点击事件
<p v-on:click="clickAction"></p>
//用于在元素上绑定属性值。类似于$.attr("title", "titleStr");
<p v-bind:title="titleStr"></p>
//在表单元素上创建双向数据绑定。一旦input有新的输入，数据inputVal同步更新；反之亦然
<input v-model="inputVal"/>
//修饰符(.xxx)，用于指明指令以一种特殊方式绑定。.prevent代表调用event.preventDefault()方法
<form v-on:submit.prevent="onSubmit"></form>
//过滤器用作文本格式化。filterId和filterText是两个过滤器定义
<div v-bind:id="idStr | filterId">{{text | filterText}}</div>
指令缩写
- v-bind缩写：
<a v-bind:href="url"></a>==><a :href="url"></a> - v-on缩写：
<a v-on:click="doSomething"></a>==><a @click="doSomething"></a>
自定义指令
通过自定义指令，可以做一些特殊的改变DOM的行为。
自定义指定注册如下：
Vue.directive('demo', {
// 钩子函数
bind(){...}
inserted(){...},
...
})
// 使用自定义指令
<div v-demo></div>
注册自定义指定最重要是钩子函数，针对具体功能，复写不同的钩子函数。
| 自定义指令钩子函数 | 说明 |
|---|---|
| bind | （调用一次）指令第一次绑定到元素时调用 |
| inserted | 被绑定元素插入父节点时调用 |
| update | 被绑定元素所在的模板更新时调用 |
| componentUpdated | 被绑定元素所在模板完成一次更新周期时调用 |
| unbind | （调用一次）指令与元素解绑时调用 |
参考官网例子，注册自定义指令v-focus，用于自动聚焦一个input元素。
Vue.directive('focus', {
inserted: function (el) {
el.focus(); // 聚焦元素
}
})
//使用指令
<input v-focus>
下一节：Vue入门系列（五）组件通信
