在 Vue 3 中，我们可以通过使用 app.directive 方法来定义自定义指令。下面是一个简单的例子：
<template> <div v-highlight>Hello Vue 3!</div> </template> <script> import { createApp } from 'vue'; const app = createApp({}); app.directive('highlight', { mounted(el) { el.style.backgroundColor = 'yellow'; }, unmounted(el) { el.style.backgroundColor = ''; }, }); app.mount('#app'); </script>
在上面的例子中，我们定义了一个名为 highlight 的自定义指令，它在元素被挂载时将其背景颜色设置为黄色，并在元素被卸载时将背景颜色重置为空。
在 mounted 和 unmounted 方法中，我们可以通过参数 el 来访问指令所绑定的元素。通过修改元素的样式来实现指令的功能。
注意：指令只能在组件的模板中使用，而不能在组件的选项中使用。
