自定义指令例子
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 全局自定义指令
app.directive('color-directive', {
mounted(el, binding) {
// 当指令绑定到元素上时触发
// el 是绑定的元素
// binding 包含了指令的信息
el.style.color = binding.value;
},
});
app.mount('#app');
这里我们定义了一个名为 color-directive 的全局自定义指令，它在绑定到元素上时，将元素的文本颜色设置为指令的值。
使用自定义指令
<template>
<div>
<p v-color-directive="'red'">这个段落的文本颜色是红色。</p>
</div>
</template>
在上述代码中，我们给 v-color-directive 指令传递了一个值 ‘red’，这个值会在指令的 binding 对象中被接收，然后用于改变元素的文本颜色。
参数和修饰符
自定义指令也可以接受参数和修饰符。参数可以通过指令表达式传递，修饰符可以用于改变指令行为。例如
<template>
<div>
<p v-color-directive:arg.modifier="'