Directive

就我們所知道的 v-if、v-model、v-show 等等......都是 Vue 幫我們制定好的功能，可是仍然有一些操作指令是 Vue 沒有提供的，不過Vue提供了自定義directive的屬性方法來滿足這一需求。其實，Vue Directive就是一種特殊的HTML元素屬性。

Directive 的兩種註冊方式

全域註冊

一種是全局註冊，在 Vue.directive 中定義組件的名字和相關指令操作。

Vue.directive('指令名', {
    // 一些 option，提供許多 hook function 定義 directive 的具體操作
    inserted: function(el) {
        //指令插入元素後的操作
        el.focus()
    }
})

區域註冊

在對應組件的directives屬性裡註冊組件名，傳入指令的option對象。

var vm = new Vue({
    el: "#app",
    directives: {
      name: {  //指令的名字
        // 指令的定義
      }
    }
})

Directive Hook Function

自定義指提供了數個 Hook Function，讓我們能使用 callback 在綁定元素的生命週期（directive 本身的生命週期）提供了不同階段做的事情。

Directive Hook Arguments

Binding 屬性：

如果需要傳入多個參數，可用物件的方式傳入。如下例的「{"name":"Peter","prompt":"Hello World"}」。

範例：

<div id="app">
  <span v-say:hello.a.b.c="{ name: 'Peter', prompt: message }"></span>
</div>

Vue.directive('say', {
  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(', ');
  }
});

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
});

簡寫方式

全域性方式的簡寫：Vue.directive( 指令名 , 函式 )。第二個引數（函式）會在指令 bind 和 update 的時候呼叫；
區域性指令的簡寫：directives:{ 指令名 : 函式 }。也是在指令 bind 和 update 的時候呼叫函式。具體見程式碼部分：

// fun 只會在 指令 的bind  和 update 呼叫
// 自定義全域性指令簡寫
Vue.directive("hello", function() {
    console.log("呼叫全域性指令");
});
new Vue({
    el: "#app",
    data: {
        msg: "訊息"
    },
    //自定義區域性指令簡寫
    directives: {
        world: function() {
            console.log("區域性指令");
        }
    }
});

<div id="app">
    <div v-hello>{{msg}}</div>
    <div v-world>{{msg}}</div>
    <input type="text" v-model="msg">
</div>

參考資料：

Vue.js—自定義指令
Vue.js: 自定義指令 Custom Directive
使用Vue Directive 封裝DOM 操作
Vue 官方文件
Vue.js - 重複使用 & 組裝的特性