在 Vue 中我們除了可以使用核心功能默認內置的指令 (v-model 和 v-show)之外，Vue 同樣也允許我們註冊自定義指令。注意，在 Vue2.0 中，代碼複用和抽象的主要形式是組件。然而，有的情況下，我們仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。先來舉個簡單的聚焦輸入框的例子，如下：
當頁面加載時，該 input 元素將獲得焦點。事實上，只要你在打開這個頁面後還沒點擊過任何內容，這個輸入框就應當還是處於聚焦狀態。現在讓我們用指令來實現這個功能：
使用全局註冊自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
使用局部註冊自定義指令 `v-focus`
如果想註冊局部指令，組件中也接受一個 directives 的選項：
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
然後我們就可以在模板中任何元素上使用新的 v-focus 屬性，如下：
<input v-focus>
自定義指令的鉤子函數
一個指令定義對象可以提供如下幾個鉤子函數 (均爲可選)：
-
bind：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。 -
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 -
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。 -
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。 -
unbind：只調用一次，指令與元素解綁時調用。
接下來我們來看一下鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。
鉤子函數參數
當我們自定義指令時，上述的每一個鉤子函數中都會被傳入以下參數：
el：指令所綁定的元素，可以用來直接操作 DOM 。binding：一個對象，包含以下屬性：name：指令名，不包括v-前綴。value：指令的綁定值，例如：v-my-directive="1 + 1"中，綁定值爲2。oldValue：指令綁定的前一個值，僅在update和componentUpdated鉤子中可用。無論值是否改變都可用。expression：字符串形式的指令表達式。例如v-my-directive="1 + 1"中，表達式爲"1 + 1"。arg：傳給指令的參數，可選。例如v-my-directive:foo中，參數爲"foo"。modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar中，修飾符對象爲{ foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。oldVnode：上一個虛擬節點，僅在update和componentUpdated鉤子中可用。
注意：除了 el 之外，其它參數都應該是隻讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行。
說這麼多不如直接上代碼來的簡潔明瞭，下面我們結合一個自定義鉤子樣例來好好的理解鉤子函數及其參數：
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
這個例子很好的說明了我們該如何使用鉤子函數，及其鉤子函數的參數。以上就是對自定義指令的基礎講解，進階內容還請關注後續文章。