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