在Vue中有很多指令，以v-開頭的命令作用在HTML元素上，將指令綁定在元素上，給綁定的元素添加一些特殊行為。
<span v-if="yes">yes的時候顯示出來</span>
但有一些是沒有相對應的指令進行操作。在這里以progress（h5的新標簽進度條）為例，向大家介紹Vue的一個用於指令擴展的方法:directive(自定義指令)。
語法如下：
Vue.directive(id, definition)
傳入的兩個參數，id是指指令ID，definition是指定義對象。其中，定義對象可以提供一些鈎子函數。
鈎子函數
| 鈎子函數 | 描述 |
| bind | 只調用一次，指令第一次綁定到元素時調用，用這個鈎子函數可以定義一個在綁定時執行一次的初始化動作。 |
| inserted | 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中） |
| update | 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新 |
| componentUpdated | 被綁定元素所在模板完成一次更新周期時調用 |
| unbind | 只調用一次，指令與元素解綁時使用 |
接下來我們來看一下鈎子函數的參數 (即 el、binding、vnode 和 oldVnode)。
指令鈎子函數會被傳入以下參數：
- el：指令所綁定的元素，可以用來直接操作 DOM 。
- binding：一個對象，包含以下屬性：
- name：指令名，不包括 v- 前綴。
- value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。
- expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
- arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
- vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
- oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鈎子中可用。
使用例子
<progress value="30" max="40">
progress中存在value和max兩個屬性，當我們要動態獲取數據，並賦值給其對應屬性，發現並不存在這樣的屬性。這樣我們就只能用自定義指令。
然后我們在HTML中調用自己定義的命令，以v-開頭引入。
在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鈎子。比如這樣寫:
Vue.directive("max",function(el,bind){
el.max=bind.value.max;
})
Vue.directive("val",function(el,bind){
el.value=bind.value.max-bind.value.value;
})