Vue3.0：自定义指令

直接上代码：
全局注册 加一个MyDirective.ts 文件

// 自定义指令
// 每个钩子函数都可以接收四个参数：
// el（指令绑定的元素）
// binding（一个对象，包含传递给指令的值、参数等）
// vnode（代表绑定元素的虚拟节点
// oldVnode（上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用）
const myDirective = {
  // 指令绑定到元素时调用
  mounted(el: any, binding: any, vnode: any, oldVnode: any) {
    // el 是指令绑定的元素，可以直接操作 DOM
    el.style.color = binding.value;
  },
  // 当绑定值更新时调用
  updated(el: any, binding: any, vnode: any, oldVnode: any) {
    el.style.color = binding.value;
  },
  // 指令与元素解绑时调用
  unmounted(el: any, binding: any, vnode: any, oldVnode: any) {
    // 清理工作
  }
};
export default myDirective;

mian.ts

import { createApp } from 'vue';
import MyDirective from './components/common/MyDirective';
const app = createApp(App);
// 注册自定义组件
app.directive('custom-color', MyDirective);

使用

<template>
  <div v-custom-color="someValue">Hello, world!</div>
</template>
<script setup>
import {ref} from 'vue';
const someValue = ref('green');
</script>

局部注册自定义指令

<template>
  <div v-my-directive="someValue">Hello, world!</div>
</template>

<script setup>
import {ref} from 'vue';

// 定义自定义指令
const vMyDirective = {
  mounted(el, binding) {
    el.style.color = binding.value;
  },
  // 你可以根据需要添加其他钩子函数，如 updated、beforeUnmount 等
};

// 注册指令（在 <script setup> 中，这一步是自动完成的，你不需要显式调用任何函数）
// 注意：这里并没有实际的注册调用，Vue 会自动处理 VMyDirective 对象 记得 V 很重要

// 定义一个响应式变量
const someValue = ref('red');
</script>

Vue2.0 自定义指令
全局注册 加一个MyDirective.ts 文件

// main.js 或类似的入口文件
const myDirective = {
  bind(el, binding, vnode, oldVnode) {
    // 只调用一次，指令第一次绑定到元素时调用
    // 在这里可以进行一次性的初始化设置
  },
  inserted(el, binding, vnode, oldVnode) {
    // 被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)
    // 在这里可以进行 DOM 操作
  },
  update(el, binding, vnode, oldVnode) {
    // 所在组件的 VNode 更新时调用，但是也可能发生在其子 VNode 更新之前
    // 指令的值可能发生了改变，也可能没有
    // 但是你可以通过比较更新前后的值来忽略不必要的重复操作
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 所在组件的 VNode 及其子 VNode 全部更新后调用
  },
  unbind(el, binding, vnode, oldVnode) {
    // 只调用一次，指令与元素解绑时调用
    // 在这里可以清理操作，比如移除事件监听器或清理定时器等
  }
};
export default myDirective;

main.js

import Vue from "vue";
import myDirective from './myDirective';
Vue.directive('my-directive',  myDirective);

局部注册自定义指令
如果你只想在某个特定的组件中使用自定义指令，你可以在该组件的 directives 选项中注册它：

<template>
  <div v-my-directive="someValue">Hello, world!</div>
</template>
 
<script>
export default {
  directives: {
    'my-directive': {
      bind(el, binding, vnode, oldVnode) {
        // ...
      },
      // 其他钩子函数...
    }
  },
  data() {
    return {
      someValue: 'red'
    };
  }
};
</script>