在 Vue 中創建自定義指令

Vue 中通過 方法創建自定義指令。該方法接受兩個參數：指令名稱和一個包含指令選項的對象。

指令名稱

指令名稱必須以 v- 前綴開頭，后跟一個駝峰式名稱來標識指令。例如，。

指令選項

指令選項對象可以包含以下屬性：

bind (可選) 在元素插入 DOM 時調用一次。

inserted (可選) 在元素被插入 DOM 后立即調用。

update (可選) 在元素更新時調用。

componentUpdated (可選) 在父組件更新后調用。

unbind (可選) 在元素從 DOM 中移除時調用。

示例

例如，創建一個名為 的自定義指令，它會在元素上添加一個**背景：

<code class="javascript">Vue.directive('highlight', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = 'yellow';
  }
});</code>

然后，可以在模板中使用此指令：

<code class="html"><div v-highlight>突出顯示此文本</div></code>

帶參數的指令

指令也可以接受參數。要實現這一點，可以在指令名稱后添加冒號 (: 參數名稱)。例如，創建一個名為 的自定義指令，它將元素的字體大小設置為一個參數：

<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>