1. 指令是什么？

指令(Directives) 是帶有 v- 前綴的特殊 attribute 。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM 。

常見的指令有：v-model, v-if, v-for 等。

2. 指令參數

一個指令能夠接受一個 “參數” ，在指令名稱之后以冒號表示。如：

<p v-if="seen">現在你看到我了</p>

v-if 指令是用來控制 DOM 節點的插入或移除，在示例中 seen 就是 v-if 指令的參數。v-if 根據參數 seen 的值的 true/false 來插入或移除 <p> 節點。

當然指令的參數不是必須的。

3. 內置指令

在Vue中提供了非常多的內置指令：

• 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

這次指令在日常的開發工作中大部分是經常用到的。

4. 自定義指令

在官方文檔中，指令自定義給出的示例是 v-focus , 通過此自定義指令，實現元素的聚焦。

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

指令的注冊方式分為兩種：

• 全局注冊
• 局部注冊

4.1. 全局注冊

全局注冊指令，可以在當前項目的任何組件中直接使用。上面的示例中，就是采用全局注冊的方式。

4.2. 局部注冊

局部注冊指令，指令注冊后，只能在當前組件中使用，在其他組件中無法使用該指令。

在組件中，提供有 directives 選項，該選項用來注冊局部指令：

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

4.3. 使用

注冊完組件后，我們就可以在DOM中進行使用該指令：

<input v-focus>

需要注意的是，我們注冊指令的時候是使用的 focus , 在使用指令時需要增加 v- 前綴。

5. 鉤子函數

在上面的自定義示例中，可以看到 inserted屬性，在這里 inserted 稱為鉤子函數。

在Vue中，指令定義對象提供了如下幾個鉤子函數

• bind ：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
• inserted ：被綁定元素插入父節點時調用（僅保證父節點存在，但不一定已被插入文檔中）。
• update：所在組件的VNode更新時調用，但是可能發生在其VNode更新之前。指令的值可能發生了改變，也可能沒有。
• componentUpdated ：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
• unbind ：只調用一次，指令與元素解綁時調用。

鉤子函數提供了固定的參數，詳細見官網：鉤子函數參數

6. Vue VS Angular

在 Angular 中也有指令，不過 Angular 的指令似乎比 Vue 的指令更強大。

在 Angular 中，指令可以有多個輸入參數，指令的參數可以和組件共用。

7. 總結

在多數的項目開發過程中，Vue 內置的指令就基本上可以滿足需求。在進行一些 UI 組件框架設計時，使用到自定義指令的機會比較多，如 Element UI 中就是用到了自定義指令。

指令是 Vue 的一個重要特性，理解了其作用才能更好的使用。

參考資料

• Vue官網
• Angular官網

公眾號：JAVA碼農