自定義指令主要用於，除系統提供外，自己對DOM的底層操作。
例如當頁面加載時需要將一個文本框為自動獲得焦點。只要你在打開這個頁面後還沒點擊過任何內容，這個輸入框就應當還是處於聚焦狀態。

我們通過全局自定義指令和局部自定義指令來講解autofouce案例。

全局自定義指令

在全局API中通過Vue.directive( id, [definition] )來註冊或獲取全局指令。
參數:

• id表示自定義的指令名稱
• definition為自定義指令的定義，一般可以含有幾個生命周期鉤子函數
• bind() 指令第一次綁定到元素上時調用，且只調用一次，可執行初始化操作
• inserted() 被綁定元素插入到DOM時調用
• update() 被綁定元素所在模板更新時調用
• componentUpdated() 被綁定元素所在模板完成一次更新周期時調用
• unbind() 指令與元素解綁時調用，只調用一次

bind與inserted在加載頁面初始化實例並掛載之後調用
update，componentUpdated 當指令所綁定的元素模板更新時調用
unbind解綁時調用

語法:

// 註冊
Vue.directive(‘my-directive‘, {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 註冊 (指令函數)
Vue.directive(‘my-directive‘, function () {
  // 這裏將會被 `bind` 和 `update` 調用
})

// getter，返回已註冊的指令
var myDirective = Vue.directive(‘my-directive‘)
 

示例:

//el參數為綁定的元素，自動載入
Vue.directive(‘focus‘,{
    inserted:function(el){
        console.log(el);
        el.focus();
    }
});

<div id="app">
    <input type="text" v-focus>
</div>

2.當然，你也可以使用簡單的指令函數。

// 註冊 (指令函數)
Vue.directive(‘my-directive‘, function () {
  // 這裏將會被 `bind` 和 `update` 調用
})
 

3.我們可以在bind函數中為其添加兩個參數，第一個是綁定的元素，第二個是當前自定義指令對象。

Vue.directive(‘focus‘,{
    bind(el,binding){
        console.log(binding);
    }
});

局部，實例的自定義指令

局部的自定義指令定義在directives選項中，所配置的數據與全局的完全一樣。

directives:{
    focus:{
        inserted(el){ //當被綁定元素插入到DOM的時候，進行自動獲焦
        el.focus();
    }
}

focus即為指令名稱，使用時直接，v-focus即可。

el參數和binding參數，獲得綁定元素與當前指令對象只有在bind函數綁定之後才能得到值。所以inserted，update也是可以的。

Vue2.0筆記——自定義指令