[TOC] # 自定義指令 除了一些內置的制定（v-model和v-show...）,Vue也允許注冊自定義指令。 ***** >自定義指令寫在Vue的directives里面,語法格式： directives:{ '定義的指令名':{ bind(el,binding){ 指令在一次綁定的時候要表現的效果代碼 }， update（el,binding）{ 指令在更新的時候要表現的效果代碼 } } } 在模板中使用自定義函數； <div v-自定義指令名> </div> ***** ### 鉤子函數 * 1.`bind` : 在自定義指令首次綁定的時候調用，只會調用一次 * 2.`inserted` ： 被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 * 3.`update`： 所在組件的 VNode 更新時調用，**但是可能發生在其子 VNode 更新之前**。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。 * 4.` componentUpdated`：指令所在組件的 VNode **及其子 VNode** 全部更新后調用。 * 5.`unbind`：只調用一次，指令與元素解綁時調用。 #### 鉤子函數的參數 >[info]* el：指令所綁定的元素，可以用來直接操作 DOM 。 * `binding`：一個對象，包含以下屬性： * `name`：指令名，不包括 `v-` 前綴。 * `value`：指令的綁定值，例如：`v-my-directive="1 + 1"` 中，綁定值為 `2`。 * `oldValue`：指令綁定的前一個值，僅在 `update` 和 `componentUpdated` 鉤子中可用。無論值是否改變都可用。 * `expression`：字符串形式的指令表達式。例如 `v-my-directive="1 + 1"` 中，表達式為 `"1 + 1"`。 * `modifiers`：一個包含修飾符的對象。例如：`v-my-directive.foo.bar` 中，修飾符對象為 `{ foo: true, bar: true }`。 * * `vnode`：Vue 編譯生成的虛擬節點。 * `oldVnode`：上一個虛擬節點，僅在 `update` 和 `componentUpdated` 鉤子中可用。 <br> #### 案例（類似于v-show指令效果） <br> ``` <div id="app"> <p v-demo = 'bool'>{{str}}</p> <button @click = 'clickA'>按鈕</button> </div> <script> new Vue({ el:'#app', data:{ str:'我會顯示的', bool:true, }, methods:{ // 按鈕的點擊事件 clickA(){ this.bool = !this.bool; } }, directives:{ 'demo':{ // 指令在第一次綁定的時候會觸發 el是DOM節點，binding是在頁面綁定的表達式的屬性值 bind(el,binding){ console.log(el); console.log(binding); console.log(binding.value); console.log('這是binding的方法') if(binding.value){ el.style.display = 'block'; }else{ el.style.display = 'none'; } }, update(el,binding){ // 指令上綁定的變量發生改變出發的方法 console.log('這是update的方法'); console.log(binding.value); console.log(binding); // 判斷節點之前的值是否跟現在的值不相等 if (binding.oldValue !== binding.value) { if (binding.value) { el.style.display = 'block'; } else { el.style.display = 'none'; } } } } }, }) </script> ``` ***** <br> **頁面渲染結果** **bind**  ***** **update**