13. vue中的指令

指令

在vue中提供了默认内置指令（v-on、v-model、v-for等），也允许自定义指令

指令的几种方式

  // 会实例化指令，但没有参数
  'v-xxx'
  // 将值value传到指令中
  'v-xxx = "value"'
  // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"`
  `v-xxx="'string'"` 
  // -- 传参数（`arg`），如`v-bind:class="className"`
  `v-xxx:arg="value"`

vue2和vue3的指令有所不同

vue2中的指令

注册一个自定义指令有全局注册与局部注册

全局注册

使用Vue.directive注册，第一个参数是指令名称（不加上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

  Vue.directive('focus', {
    inserted: function(el, binding) {
      // 聚焦元素
      el.focus()
    }
  })

局部注册

在组件选项的directive

 directives: {
   focus: {
    inserted: function(el, binding) {
      el.focus()
    }
   }
 }

钩子函数

• bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated： 指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用

参数

• el: 指令绑定的元素，可以操作DOM
• binding： 一个对象，包含下列属性
  • name： 指令名称
  • value： 指令绑定值,v-focus='123'，绑定值为123
  • oldValue：指令绑定的前一个值，在update和componentUpdated里可用
  • expression：字符串形式的表达式,v-focus="1+5+6",绑定值为1+5+6
  • arg: 传给指令的参数，v-focus:test，参数为test
  • modifiers: 一个包含修饰符（上一篇介绍过）的对象
• vnode: vue编译生成的虚拟节点
• oldVnode：上一个虚拟节点，在update和componentUpdated里可用

除了el，别的都是只读的，不要进行修改

vue3中的指令

全局注册(Composition Api)

  
  const app = createApp({})
  app.directive('focus', {
    ...
  })

钩子函数

• created(vue3新增)：在元素的attribute或事件监听器被应用之前调用
• beforeMount（同vue2的bind）: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作
• mounted（同vue2的inserted）：被绑定元素插入父节点时调用
• beforeUpdate（vue3中新增）：绑定元素的父组件更新前调用
• updated（vue3新增）：绑定元素的父组件及他自己的所有子节点都更新后调用
• beforeUnmount（同vue2的componentUpdate）：绑定元素的父组件卸载前调用
• unmounted（vue2中的unbind）：绑定元素的父组件卸载后调用

参数

同vue2