1. 指令是什么？
指令(Directives) 是帶有 v- 前綴的特殊 attribute 。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM 。
常見的指令有：v-model, v-if, v-for 等。
2. 指令參數(shù)
一個(gè)指令能夠接受一個(gè) “參數(shù)” ，在指令名稱之后以冒號(hào)表示。如：
<p v-if="seen">現(xiàn)在你看到我了</p>
v-if 指令是用來控制 DOM 節(jié)點(diǎn)的插入或移除，在示例中 seen 就是 v-if 指令的參數(shù)。v-if 根據(jù)參數(shù) seen 的值的 true/false 來插入或移除 <p> 節(jié)點(diǎn)。
當(dāng)然指令的參數(shù)不是必須的。
3. 內(nèi)置指令
在Vue中提供了非常多的內(nèi)置指令：
- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-slot
- v-pre
- v-cloak
- v-once
這次指令在日常的開發(fā)工作中大部分是經(jīng)常用到的。
4. 自定義指令
在官方文檔中，指令自定義給出的示例是 v-focus , 通過此自定義指令，實(shí)現(xiàn)元素的聚焦。
// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
指令的注冊(cè)方式分為兩種：
- 全局注冊(cè)
- 局部注冊(cè)
4.1. 全局注冊(cè)
全局注冊(cè)指令，可以在當(dāng)前項(xiàng)目的任何組件中直接使用。上面的示例中，就是采用全局注冊(cè)的方式。
4.2. 局部注冊(cè)
局部注冊(cè)指令，指令注冊(cè)后，只能在當(dāng)前組件中使用，在其他組件中無法使用該指令。
在組件中，提供有 directives 選項(xiàng)，該選項(xiàng)用來注冊(cè)局部指令：
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
4.3. 使用
注冊(cè)完組件后，我們就可以在DOM中進(jìn)行使用該指令：
<input v-focus>
需要注意的是，我們注冊(cè)指令的時(shí)候是使用的 focus , 在使用指令時(shí)需要增加 v- 前綴。
5. 鉤子函數(shù)
在上面的自定義示例中，可以看到 inserted屬性，在這里 inserted 稱為鉤子函數(shù)。
在Vue中，指令定義對(duì)象提供了如下幾個(gè)鉤子函數(shù)
- bind ：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
- inserted ：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中）。
- update：所在組件的VNode更新時(shí)調(diào)用，但是可能發(fā)生在其VNode更新之前。指令的值可能發(fā)生了改變，也可能沒有。
- componentUpdated ：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
- unbind ：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
鉤子函數(shù)提供了固定的參數(shù)，詳細(xì)見官網(wǎng)：鉤子函數(shù)參數(shù)
6. Vue VS Angular
在 Angular 中也有指令，不過 Angular 的指令似乎比 Vue 的指令更強(qiáng)大。
在 Angular 中，指令可以有多個(gè)輸入?yún)?shù)，指令的參數(shù)可以和組件共用。
7. 總結(jié)
在多數(shù)的項(xiàng)目開發(fā)過程中，Vue 內(nèi)置的指令就基本上可以滿足需求。在進(jìn)行一些 UI 組件框架設(shè)計(jì)時(shí)，使用到自定義指令的機(jī)會(huì)比較多，如 Element UI 中就是用到了自定義指令。
指令是 Vue 的一個(gè)重要特性，理解了其作用才能更好的使用。
參考資料
- Vue官網(wǎng)
- Angular官網(wǎng)
公眾號(hào)：JAVA碼農(nóng)
