跳到主要内容

文档

作用​

  • 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

  • 作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为

钩子函数​

bind​

  • 作用：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

inserted​

  • 作用：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

update​

  • 作用：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)

componentUpdated​

  • 作用：指令所在组件的 VNode 及其子 VNode 全部更新后调用

unbind​

  • 作用：只调用一次，指令与元素解绑时调用

钩子函数参数​

注意点：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

el​

  • 作用：指令所绑定的元素，可以用来直接操作 DOM

binding​

  • 作用：一个对象，包含以下 property：
    • name:指令名，不包括 v- 前缀
    • value:指令的绑定值
    • oldValue:指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
    • expression:字符串形式的指令表达式
    • arg:传给指令的参数，可选。
    • modifiers:一个包含修饰符的对象

vnode​

  • 作用：Vue 编译生成的虚拟节点

oldVnode​

  • 作用：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

操作​

动态传参​

:::details 点击查看代码

<div v-focus:[name]="{like:&quot;篮球&quot;}" class="loadtest" />

directives: {
    focus(el, binding, vnode, oldVnode) {
      const { arg } = binding
      console.log(arg) // 输出 张文强
    }
  },
  data() {
    return {
      name: '张文强'
    }
  }

:::

修改 data 数据​

:::details 点击查看代码

<div v-focus="(value)=>{name=value}" />

directives: {
    focus(el, binding, vnode, oldVnode) {
      const { value } = binding
      value('修改张文强')
    }
  },
  data() {
    return {
      name: '张文强'
    }
  }

:::