vue中內建了很多指令，如v-show v-model等，如果我們也想對dom元素進行底層操作呢，這時就可以使用vue的自定義指令。

自定義指令有全域性和區域性兩種形式。

對於全域性自定義指令，我們需要用到Vue.directive介面，

下面我們註冊一個全域性的自定義指令v-permission

Vue.directive('permission',{
  inserted: function (el,binding,vNode) {
    console.log(el.innerText+': '+ binding.value)
    }
  },
})

這樣我們就可以在模板中任何元素上使用我們剛剛新加的自定義指令v-permission了

   <el-button @click="callTel" size="small" type="primary" v-permission="'3902947C-63D1-4293-A6D0-83BA8D37F2AC'" >撥打電話</el-button>

鉤子函式

一個指令定義物件可以提供如下幾個鉤子函式：

bind只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。

inserted被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。

update所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。

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

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

物件字面量

如果指令需要傳入多個值，可以傳入一個js物件的字面量。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})