vue3自定义指令（directives）的使用

在 Vue 3 中，自定义指令的用法相对于 Vue 2 有一些变化。以下是 Vue 3 中自定义指令的基本用法：

全局注册

你可以在整个应用程序中全局注册自定义指令：

// main.js 或你的入口文件
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册全局自定义指令 'v-color'
app.directive('color', {
  mounted(el, binding) {
    // 当指令绑定到元素上时调用
    el.style.color = binding.value;
  },
});

app.mount('#app');

局部注册

你也可以在组件内部局部注册自定义指令：

// YourComponent.vue
export default {
  directives: {
    color: {
      mounted(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
};

在模板中使用

无论是全局注册还是局部注册，你都可以在模板中使用自定义指令：

<template>
  <div v-color="'blue'">This div has a blue text color.</div>
</template>

在上述例子中，我们创建了一个名为 color 的自定义指令，它在 mounted 钩子中将元素的文本颜色设置为传递给指令的值。在模板中使用该指令时，我们通过 v-color 绑定了一个字符串参数 'blue'。

注意：Vue 3 中的自定义指令的生命周期钩子名和 Vue 2 不同，例如 bind 在 Vue 3 中变成了 beforeMount。查阅 Vue 3 的文档以了解更多详细信息。