1. 简介
除了Vue内置的一系列指令(比如v-model或v-show)之外，Vue还允许你注册自定义的指令。除了两种在Vu中重用代码的方式：组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。
2.命名规范
在语法塘中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令
3. 局部注册自定义指令
<script setup>
// vFocus就是一个自定义指令
const vFocus = {
// 书自定义指令的逻辑功能----例如：获取焦点
mounted: (el) => el.focus()
}
</script>
<template>
// 使用自定义指令，需要用-连接
<input v-focus />
</template>
3.1 注意
局部自定义指令如上例，只能在当前组件中使用。
4. 全局自定义指令
在没有使用 <script setup>语法塘的情况下，自定义指令需要通过 directives 选项注册：
// 在main.js文件里注册使用
// 使 v-focus 在所有组件中都可用
// focus---自定义指令名称
app.directive('focus', {
/* 书写逻辑代码*/
})
// 全局注册完成之后，可在组件中直接引入使用
5. 自定义指令的钩子函数
一个指令的定义对象可以提供几种钩子函数 (都是可选的)：钩子函数的执行时机
指令的钩子会传递以下几种参数：
-
el：指令绑定到的元素。这可以用于直接操作 DOM。 -
binding：一个对象，包含以下属性。value：传递给指令的值。例如在v-my-directive="1 + 1"中，值是2。oldValue：之前的值，仅在beforeUpdate和updated中可用。无论值是否更改，它都可用。arg：传递给指令的参数 (如果有的话)。例如在v-my-directive:foo中，参数是"foo"。modifiers：一个包含修饰符的对象 (如果有的话)。例如在v-my-directive.foo.bar中，修饰符对象是{ foo: true, bar: true }。instance：使用该指令的组件实例。dir：指令的定义对象。
-
vnode：代表绑定元素的底层 VNode。 -
prevNode：代表之前的渲染中指令所绑定元素的 VNode。仅在beforeUpdate和updated钩子中可用。
6.在组件上使用自定义指令
<MyComponent v-demo="test" />
<!-- MyComponent 的模板 -->
<div> <!-- v-demo 指令会被应用在此处 -->
<span>My component content</span>
</div>
