## 一、概述 除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。 自定義指令的用法跟內置指令一樣，用在模板元素中； ``` <!-- 在模板元素中 --> <input v-focus> ``` >[danger] 自定義指令分全局指令和局部指令（僅注冊的組件內可用）；全局指令用Vue.directive來定義，局部的是注冊在組件的directives中； ## 二、簡單示例 聚焦輸入框的例子；  當頁面加載時，該元素將獲得焦點 (注意：`autofocus`在移動版 Safari 上不工作)。事實上，只要你在打開這個頁面后還沒點擊過任何內容，這個輸入框就應當還是處于聚焦狀態。現在讓我們用指令來實現這個功能： 1、用全局指令 ``` // 注冊一個全局自定義指令 `v-focus` Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() } }) ``` 然后你可以**在任何模板中任何元素上**使用新的`v-focus`屬性，如下： ``` <input v-focus> ``` 2、如果想注冊局部指令，組件中也接受一個`directives`的選項： ``` directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } } } ``` 然后你可以在**當前組件任何元素**上上使用新的`v-focus`屬性，如下： ## 三、鉤子函數 一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)： * `bind`：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。 * `inserted`：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 * `update`：所在組件的 VNode 更新時調用，**但是可能發生在其子 VNode 更新之前**。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。 * `componentUpdated`：指令所在組件的 VNode**及其子 VNode**全部更新后調用。 * `unbind`：只調用一次，指令與元素解綁時調用。 ## 四、鉤子函數參數  ## 五、復雜的例子 ``` <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!' } }) ``` 運行結果如下：