除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)白胀，Vue 也允許注冊自定義指令。注意抚岗，在 Vue2.0 中或杠，代碼復(fù)用和抽象的主要形式是組件。然而宣蔚，有的情況下向抢，你仍然需要對普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令胚委。舉個(gè)聚焦輸入框的例子挟鸠，如input輸入框
當(dāng)頁面加載時(shí)，該元素將獲得焦點(diǎn) (注意：autofocus 在移動(dòng)版 Safari 上不工作)亩冬。事實(shí)上兄猩，只要你在打開這個(gè)頁面后還沒點(diǎn)擊過任何內(nèi)容，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)〖矗現(xiàn)在讓我們用指令來實(shí)現(xiàn)這個(gè)功能：
// 注冊一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想注冊局部指令，組件中也接受一個(gè) directives 的選項(xiàng)：
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus property鸠姨，如下：
<input v-focus>
鉤子函數(shù)
一個(gè)指令定義對象可以提供如下幾個(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ā)生了改變，也可能沒有祟峦。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)罚斗。
我們會(huì)在稍后討論渲染函數(shù)時(shí)介紹更多 VNodes 的細(xì)節(jié)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用宅楞。unbind：只調(diào)用一次针姿，指令與元素解綁時(shí)調(diào)用。
接下來我們來看一下鉤子函數(shù)的參數(shù) (即 el厌衙、binding距淫、vnode 和 oldVnode)。
鉤子函數(shù)參數(shù)
指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：
-
el：指令所綁定的元素婶希，可以用來直接操作 DOM榕暇。 -
binding：一個(gè)對象，包含以下 property：-
name：指令名，不包括v-前綴彤枢。 -
value：指令的綁定值狰晚，例如：v-my-directive="1 + 1"中，綁定值為2堂污。 -
oldValue：指令綁定的前一個(gè)值家肯，僅在update和componentUpdated鉤子中可用。無論值是否改變都可用盟猖。 -
expression：字符串形式的指令表達(dá)式讨衣。例如v-my-directive="1 + 1"中，表達(dá)式為"1 + 1"式镐。 -
arg：傳給指令的參數(shù)反镇，可選。例如v-my-directive:foo中娘汞，參數(shù)為"foo"歹茶。 -
modifiers：一個(gè)包含修飾符的對象。例如：v-my-directive.foo.bar中你弦，修飾符對象為{ foo: true, bar: true }惊豺。
-
-
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來了解更多詳情禽作。 -
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)尸昧，僅在update和componentUpdated鉤子中可用。
