在 vue 中使用 vue.directive() 方法創(chuàng)建自定義指令，指令名稱以 v- 前綴開頭，指令選項(xiàng)包含 bind、inserted、update、componentupdated、unbind 等生命周期鉤子，用于在不同階段操作 dom 元素。可以接受參數(shù)，指令名稱后加冒號 (: 參數(shù)名稱) 指定參數(shù)。
在 Vue 中創(chuàng)建自定義指令
Vue 中通過 Vue.directive() 方法創(chuàng)建自定義指令。該方法接受兩個(gè)參數(shù)：指令名稱和一個(gè)包含指令選項(xiàng)的對象。
指令名稱
指令名稱必須以 v- 前綴開頭，后跟一個(gè)駝峰式名稱來標(biāo)識指令。例如，v-myDirective。
指令選項(xiàng)
指令選項(xiàng)對象可以包含以下屬性：
bind (可選) 在元素插入 DOM 時(shí)調(diào)用一次。
inserted (可選) 在元素被插入 DOM 后立即調(diào)用。
update (可選) 在元素更新時(shí)調(diào)用。
componentUpdated (可選) 在父組件更新后調(diào)用。
unbind (可選) 在元素從 DOM 中移除時(shí)調(diào)用。
示例
例如，創(chuàng)建一個(gè)名為 v-highlight 的自定義指令，它會在元素上添加一個(gè)黃色背景：
<code class="javascript">Vue.directive('highlight', {
bind: function (el, binding, vnode) {
el.style.backgroundColor = 'yellow';
}
});</code>
登錄后復(fù)制
然后，可以在模板中使用此指令：
<code class="html"><div v-highlight>突出顯示此文本</div></code>
登錄后復(fù)制
帶參數(shù)的指令
指令也可以接受參數(shù)。要實(shí)現(xiàn)這一點(diǎn)，可以在指令名稱后添加冒號 (: 參數(shù)名稱)。例如，創(chuàng)建一個(gè)名為 v-size 的自定義指令，它將元素的字體大小設(shè)置為一個(gè)參數(shù)：
<code class="javascript">Vue.directive('size', {
bind: function (el, binding, vnode) {
el.style.fontSize = binding.value + 'px';
}
});</code>
登錄后復(fù)制
然后，可以在模板中使用此指令并傳遞參數(shù)：
<code class="html"><div v-size="20">設(shè)置字體大小為 20px</div></code>
登錄后復(fù)制
