自定義指令

自定義指令就是自己定義的指令，是對 DOM 元素進行底層操作封裝 ,程序化地控制 DOM，拓展額外的功能

全局定義

Vue.directive(指令名字, definition)

• 指令名：不包括v-前綴，使用時候包括v-，v-指令名
• definition: 對象,包含指令邏輯

// definition 就代表下面的函數，
Vue.directive('focus', function(el, binding) {// el 是綁定的 DOM 元素
})

局部定義

new Vue({directives: {'focus': {}}
})directives: {
// 直接寫成函數形式，部分細節問題會處理不了focus(el, binding) {}  
}

指令definition對象可以訪問以下參數:

• el: 指令綁定的DOM元素,可以直接操作
• binding: 對象,包含指令信息
  • name: 指令名
  • value: 指令綁定的值
  • expression: 綁定表達式字符串
  • arg: 參數
  • modifiers: 修飾符
• vnode: Vue編譯的虛擬節點
• oldVnode: 之前的虛擬節點

示例1

創建一個自定義指令

 <p v-color>鼠標懸停我，我會變色！</p>

在這里，v-color 就是我們的自定義指令它的名字是由我們來決定的，這個名字后面我們會用到

創建自定義指令的邏輯

<script>directives: {// 寫成對象形式，可以定義更多函數color: {bind(el,binding) {console.log(el)console.log(binding)el.addEventListener('mouseover', () => {el.style.color = 'red'; // 鼠標懸停時變紅色});el.addEventListener('mouseout', () => {el.style.color = ''; // 鼠標移出恢復原色});}}
}
</script>

在 bind 鉤子函數和其他一些鉤子函數中，el 是HTMLElement真實DOM元素一個必傳參數，表示綁定了指令的 DOM 元素我們可以通過操作 el 來修改元素的樣式、屬性等

binding 是一個包含了指令相關信息的對象

我們告訴Vue當使用 v-color 指令時，應該執行的邏輯是：當鼠標懸停在元素上時，把文字變成紅色；當鼠標移出時，恢復原來的顏色

我們已經在模板中使用了自定義指令 v--color，Vue會自動找到這個指令，并且執行我們之前定義的邏輯

el就代表綁定的元素，這里綁定的是h1

value是什么？

當我給v-color制定值的時候，它就出現了，所以binding.value就是我們綁定的value

示例2

<button @click="n++">點我n+1</button>
// 如果指令名有多個字母組成，要求使用烤肉串方式，如：v-focus-bind，相應的key應該加上引號
<input type="text" v-fbind:value="n">directives: {//函數是在 1.指令第一次綁定到元素時觸發2.指令所在的模板被重新解析時觸發// fbind(element,binding){// },// 寫成對象形式，對象中可以定義更多函數，也可以寫更多細節fbind:{//指令與元素成功綁定時，一上來立即會被調用，和函數形式調用時機一樣fbind(){}bind(el,binding){el.value = binding.value},//指令所在元素被插入頁面時inserted(el,binding){el.focus()},//指令所在的模板被重新解析時update(el,binding){el.value = binding.value}}}

全局形式

 Vue.directive('fbind',{bind(element,binding){element.value = binding.value},inserted(element,binding){element.focus()},update(element,binding){element.value = binding.value}

定義成函數形式，相當于對象中的bind和update，沒有inserted的簡寫，如需要更多細節操作可以定義對象形式

拓展鉤子函數

Vue 自定義指令的常見鉤子函數包括：

• bind: 指令第一次綁定到元素時觸發
• inserted: 元素被插入到父元素時觸發
• update: 指令所在的模板被重新解析時觸發
• componentUpdated: 組件更新完成時觸發
• unbind: 指令與元素解綁時觸發

這些鉤子函數名稱是 Vue 所識別的，如果我們在自定義指令中使用這些名稱，Vue 就會在相應的時機調用我們的指令邏輯