在 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)建自定義指令。該方法接受兩個參數(shù)：指令名稱和一個包含指令選項(xiàng)的對象。
指令名稱
指令名稱必須以 v- 前綴開頭，后跟一個駝峰式名稱來標(biāo)識指令。例如，v-myDirective。
指令選項(xiàng)
指令選項(xiàng)對象可以包含以下屬性：
bind (可選) 在元素插入 DOM 時調(diào)用一次。
inserted (可選) 在元素被插入 DOM 后立即調(diào)用。
update (可選) 在元素更新時調(diào)用。
componentUpdated (可選) 在父組件更新后調(diào)用。
unbind (可選) 在元素從 DOM 中移除時調(diào)用。
示例
例如，創(chuàng)建一個名為 v-highlight 的自定義指令，它會在元素上添加一個黃色背景：
<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)建一個名為 v-size 的自定義指令，它將元素的字體大小設(shè)置為一個參數(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ù)制
