什么是指令？

• 指令是控制视图(DOM)的集成方式
• 在 Vue.js 中，指令是对Vue的直接操作 (底层, 一般Vue是不希望开发者直接操作DOM的)

Vue 中的指令形式

• 在 Vue.js 中，指令都是以 v-xx 进行书写的
• 一般在注册时使用小驼峰（camelCase） , 使用时使用横杠式（kebab-case）

指令的注册方式

1. 局部注册 directive-option
2. 全局注册 app.directive

指令钩子函数内部的参数说明

• el: 当前绑定的元素

• bindings：绑定相关的信息, 其中包括:

  • arg: 指令:后的信息 (eg: v-model:modelValue, arg -> modelValue)
  • dir: 指令对象里绑定的所有属性
  • instance: 使用指令的组件实例
  • modifers: 指令的修饰符 (eg: .lazy, .trim, .number)
  • oldValue: 更新前的指令绑定的值 （beforeUpdate, updated）
  • value: 当前指令绑定的值

• vnode: 绑定指令的元素的虚拟节点

• prevNode: 绑定指令的元素的上一个虚拟节点 （beforeUpdate, updated）

使用自定义指令时，需要注意什么？

1. 指令使用时, 指令不会随着 props 或 attrs 向下传递
2. 当指令绑定后, 指令作用在绑定的根元素上
3. 当 vnode 发生变化时, 指令相关的钩子函数也会被触发