在 Vue 中，自定义指令允许你为 DOM 元素添加特定的行为或功能。下面是一个实现 Vue 自定义指令的简单示例，展示了如何创建一个指令，使得元素在鼠标悬停时改变背景色。
1. 创建自定义指令
在 Vue 2.x 中，你可以在 Vue.directive 函数中注册自定义指令，而在 Vue 3.x 中，你可以在组件的 setup 函数中使用 app.directive。
下面的代码示例展示了如何在 Vue 3 中创建一个名为 v-hover-color 的自定义指令。
// main.js
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);// 自定义指令
app.directive('hover-color', {// 当元素被插入到 DOM 中时调用mounted(el, binding) {el.style.transition = 'background-color 0.3s';// 鼠标悬停事件el.addEventListener('mouseenter', () => {el.style.backgroundColor = binding.value || 'yellow'; // 默认颜色为黄色});// 鼠标移出事件el.addEventListener('mouseleave', () => {el.style.backgroundColor = ''; // 恢复原样});},// 指令解绑时清理事件监听器unmounted(el) {el.removeEventListener('mouseenter');el.removeEventListener('mouseleave');},
});app.mount('#app');
2. 使用自定义指令
在你的 Vue 组件中，你可以使用这个自定义指令。例如，我们可以在 App.vue 中使用它：
<template><div id="app" style="padding: 20px;"><h1 v-hover-color="'lightblue'">将鼠标悬停在我上面!</h1><p v-hover-color="'lightgreen'">我也是可以变色的!</p></div>
</template><script>
export default {name: 'App',
};
</script><style>
/* 样式可以根据需要添加 */
</style>
3. 效果展示
在浏览器中访问你的应用，鼠标悬停在指定的文本上，背景将会改变为你在指令中指定的颜色。离开文本后，背景颜色将恢复到原来的样子。
说明
- binding.value：指令传入的值，这里我们用它来设置背景颜色。如果没有传入颜色，指令会使用默认的黄色。
- mounted：指令绑定到元素上时调用的钩子，可以在这里进行 DOM 操作。
- unmounted：指令解绑时的钩子，可以在这里清理事件监听器，避免内存泄漏。
总结
自定义指令为 Vue 提供了一种灵活的方式来扩展其功能。通过以上示例，你可以理解如何创建、使用和管理自定义指令。根据需要，你可以实现更复杂的逻辑和行为。
