• 註冊一個全域性指令：實現在document上註冊註冊全域性點選事件
• 關於自定義指令的相關引數解析

一、註冊一個全域性指令

示例程式碼：

 1 //  自定義指令: v-document-click（全域性點選事件）
 2 Vue.directive('document-click', {
 3   bind: function (el, binding, vnode) {
 4     if (document.addEventListener) {
 5       document.addEventListener('click', binding.value, false)
 6     } else if (document.attachEvent) {
 
 7       document.attachEvent('onclick', function () {
 8         binding.value.call(document)
 9       })
10     }
11   }
12 })
13 
14 //使用自定義全域性點選事件指令 註冊該事件
15 <div  v-document-click="documentClick">
16 
17 //
18 methods:{
19         documentClick(){
20            ....
21         }
22     }

除了註冊全域性指令，也可以在區域性的某個元件上建立指令：

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

這兩種建立方式非常類是建立全域性元件和區域性元件的程式碼風格，但這不是重點，上面示例中並沒有全部體現出建立指令的相關鉤子函式和引數特性。

二、關於自定義指令的相關引數解析

2.1 自定義指令的引數

語法：

 1 //InstructionName:指令名稱
 2 //params:自定義指令需要配置的相關引數
 3 Vue.directive(InstructionName,params)
 4 new Vue({
 
 5     data:{},
 6     ...
 7     InstructionName:params
 8 });
 9 //params:引數實際為既定的鉤子函式，函式內部也會被傳入既定的相關引數hookFunParams
10 {
11     hookFunction:function(hookFunParams){....}
12     ....
13 }

2.2 自定義指令的鉤子函式（hookFunction）

　　bind：只調用一次、指令第一次繫結到元素是呼叫。

　 inserted：被繫結元素插入父節點時呼叫（但不確定是否插入到了文件中）。

　　update：所在元件的VNode更新時呼叫，但可能發生在其子VNode更新之前。

　　componentUpdated：指令所在元件的Vnode及其子VNode全部更新後呼叫。

　　unbind：只調用一次，指令與元素解綁時呼叫。

2.2 自定義指令鉤子函式的引數（hookFunParams）

　　el：指令所繫結的元素，可以用來直接操作的DOM。

　　binding：一個物件，包含一下property：

　　　　name：指令名稱，不包括 v- 字首。

　　　　value：指令繫結的值，例如： v-my-directive="1 + 1"，繫結值為2。該值更多是一個函式，比如1.1中示例的v-document-click="documentClick"，該documentClick是元件中methods註冊的方法。

　　　　oldValue：指令繫結的前一個值，該屬性僅在update和componentUpdated鉤子函式中可用，無論值是否改變都可以用。

　　　　expression：字串形式的指令表示式。例如1.1中的示例“documentClick”。

　　　　arg：傳給指令的引數，可選。

 1 v-document-click:foo="documentClick"
 2 
 3 data(){
 4     return {
 5         foo:"text"
 6     }
 7 }
 8 
 9 //在指令的鉤子函式中就可以通過arg拿到foo的值了    
10 console.log(binding.arg) //  text

　　　　modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar 中，修飾符物件為{foo:true, bar:true}。這個解和之前使用內建指令的修飾符來理解就很簡單了，感覺解釋起來還真的很麻煩。

　　vnode：Vue編譯生成的虛擬節點，也就是指令繫結的元素對應的虛擬節點物件。

　　oldVnode：上一個虛擬節點，在更新指令所繫結的節點時，才會可以使用，所以只能在upate和componentUpdated兩個狗子函式中才可以使用，要不然不更新哪裡來的上一個。