Vue模板和Angular模板相似，擁有指令和組件標(biāo)簽脐往。
在渲染層上休吠，Vue2.0引入虛擬DOM。Vue編譯器會把模板編譯成一個渲染函數(shù)（類似React）业簿，函數(shù)被調(diào)用的時候會返回一個虛擬DOM樹瘤礁，其描述了當(dāng)前頁面所處的狀態(tài)。當(dāng)發(fā)生數(shù)據(jù)改變時梅尤，模板更新重新編譯生成一個新的虛擬DOM樹柜思，將新樹和舊樹對比，找到不同點巷燥，再最終修改真實的DOM節(jié)點赡盘。
1. 模板
下面是一個簡單的Vue模板例子：
<div id="app">
<ul>
<li v-for="todo in todos" v-on:click="todo.done=!todo.done">
{{todo.title}}
</li>
</ul>
</div>
模板的文本數(shù)據(jù)綁定使用“mushtache”語法，{{}}內(nèi)插入文本變量缰揪。
2.指令
Vue指令以v-開頭陨享，作用在HTML元素上，將指令綁定在元素上，給綁定的元素添加一些特殊行為抛姑。
Vue常用指令如下：
//更新綁定元素中的內(nèi)容赞厕，類似于$.text()
<p v-text="textStr"></p>
//更新綁定元素中的html內(nèi)容，類似于$.html()
<p v-html="htmlStr"></p>
//根據(jù)表達(dá)式的值(true/false)渲染元素定硝。如果isShow為false則不會渲染p標(biāo)簽
<p v-if="isShow"></p>
<p v-else></p>
//根據(jù)表達(dá)式的值(true/false)顯示或隱藏元素坑傅。如果isShow為false則p標(biāo)簽樣式為"display:none"
<p v-show="isShow"></p>
//用于遍歷數(shù)據(jù)渲染元素或模板。如果list為[1,2,3]則會渲染3個p標(biāo)簽喷斋，內(nèi)容依次為1唁毒，2，3
<p v-for="item in list"></p>
//用于在元素上綁定事件星爪。p標(biāo)簽上綁定了clickAction的點擊事件
<p v-on:click="clickAction"></p>
//用于在元素上綁定屬性值浆西。類似于$.attr("title", "titleStr");
<p v-bind:title="titleStr"></p>
//在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定。一旦input有新的輸入顽腾，數(shù)據(jù)inputVal同步更新近零；反之亦然
<input v-model="inputVal"/>
//修飾符(.xxx)，用于指明指令以一種特殊方式綁定抄肖。.prevent代表調(diào)用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', {
// 鉤子函數(shù)
bind(){...}
inserted(){...},
...
})
// 使用自定義指令
<div v-demo></div>
注冊自定義指定最重要是鉤子函數(shù)裙士，針對具體功能，復(fù)寫不同的鉤子函數(shù)管毙。
| 自定義指令鉤子函數(shù) | 說明 |
|---|---|
| bind | （調(diào)用一次）指令第一次綁定到元素時調(diào)用 |
| inserted | 被綁定元素插入父節(jié)點時調(diào)用 |
| update | 被綁定元素所在的模板更新時調(diào)用 |
| componentUpdated | 被綁定元素所在模板完成一次更新周期時調(diào)用 |
| unbind | （調(diào)用一次）指令與元素解綁時調(diào)用 |
參考官網(wǎng)例子腿椎，注冊自定義指令v-focus，用于自動聚焦一個input元素夭咬。
Vue.directive('focus', {
inserted: function (el) {
el.focus(); // 聚焦元素
}
})
//使用指令
<input v-focus>
下一節(jié)：Vue入門系列（五）組件通信
