1、什么是指令？

指令通常以"v-"作為前綴, 以方便Vue知道你在使用一種特殊的標(biāo)記。

除了 Vue 核心攜帶著的一些默認(rèn)指令（v-model 和 v-show）之外，

Vue 還允許你注冊自己的自定義指令。某些情況下，還是需要對普通元素進(jìn)行一些底層 DOM 訪問，

這也是自定義指令仍然有其使用場景之處。

2、全局指令：

當(dāng)頁面加載時，元素將獲取焦點，事實上，在訪問頁面時，如果你還沒有點擊任何地方，上面的輸入框現(xiàn)在應(yīng)該處于獲取焦點的狀態(tài)。現(xiàn)在讓我們構(gòu)建指令以完成此效果：

<template><div class="parent"> <input v-focus></div></template>import Vue from 'vue' import cnChildren from './children' // 注冊一個名為 `v-focus` 的全局自定義指令 Vue.directive('focus', {  // 當(dāng)綁定的元素插入到 DOM 時調(diào)用此函數(shù)……  inserted: function (el) {   // 元素調(diào)用 focus 獲取焦點   el.focus()  } });

如果你想要注冊一個局部指令，也可以通過設(shè)置組件的 directives 選項：

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

我們有幾個可用的鉤子：

bind：在指令第一次綁定到元素時調(diào)用，只會調(diào)用一次。可以在此鉤子函數(shù)中，執(zhí)行一次性的初始化設(shè)置。
inserted：在已綁定的元素插入到父節(jié)點時調(diào)用（只能保證父節(jié)點存在，不一定存在于 document 中）。
update：在包含指令的組件的 VNode 更新后調(diào)用，但可能之前其子組件已更新。指令的值可能更新或者還沒更新，然而可以通過比較綁定的當(dāng)前值和舊值，來跳過不必要的更新（參考下面的鉤子函數(shù)）。
componentUpdated：在包含指令的組件的 VNode 更新后調(diào)用，并且其子組件的 VNode 已更新。
unbind：在指令從元素上解除綁定時調(diào)用，只會調(diào)用一次。
每個鉤子可以選擇一些參數(shù)。

el：指令綁定的元素。可以用于直接操作 DOM。

binding：一個對象，包含以下屬性：

1、name：指令的名稱，不包括 v- 前綴。
  2、value：向指令傳入的值。例如，在 v-my-directive="1 + 1" 中，傳入的值是 2。
  3、oldValue：之前的值，只在 update 和 componentUpdated 鉤子函數(shù)中可用。無論值是否發(fā)生變化，都可以使用。
  4、expression：指令綁定的表達(dá)式(expression)，以字符串格式。例如，在 v-my-directive="1 + 1" 中，表達(dá)式是 "1 + 1"。
  5、arg：向指令傳入的參數(shù)，如果有的話。例如，在 v-my-directive:foo 中，參數(shù)是 "foo"。
  6、modifiers：一個對象，包含修飾符，如果有的話。例如，在 v-my-directive.foo.bar 中，修飾符是 { foo: true, bar: true }。
vnode：由 Vue 編譯器(Vue's compiler)生成的虛擬 Node 節(jié)點(virtual node)。更多細(xì)節(jié)請查看