Vue 中自定義指令的方法

在 Vue 中，可以通過自定義指令擴展 Vue 的功能，以實現更靈活和可重用的代碼。以下列出幾種創建自定義指令的方法：

1. 全局指令

<code class="js">Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 指令綁定時執行
  },
  inserted(el, binding, vnode) {
    // 指令首次插入 DOM 時執行
  },
  update(el, binding, vnode, oldVnode) {
    // 指令每次更新時執行
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 指令所在組件更新后執行
  },
  unbind(el, binding, vnode) {
    // 指令和對應元素解綁時執行
  },
});</code>

2. 局部指令

<code class="js"><template><div v-my-directive></div>
</template><script>
export default {
  directives: {
    myDirective: {
      bind(el, binding, vnode) {
        // 指令綁定時執行
      },
      // ...其他指令鉤子函數
    }
  }
};
</script></code>

3. 組件內指令

<code class="js"><template><template v-my-directive></template></template><script>
export default {
  directives: {
    myDirective: {
      bind(el, binding, vnode) {
        // 指令綁定時執行
      },
      // ...其他指令鉤子函數
    }
  },
  components: {
    // ...其他組件注冊
    MyComponent: {
      directives: {
        myDirective: {
          bind(el, binding, vnode) {
            // 指令綁定時執行
          },
          // ...其他指令鉤子函數
        }
      }
    }
  }
};
</script></code>