Vue: 自定义指令

Vue: 自定义指令_第1张图片

有人可能感觉自定义指令好像是个新东西,还要学自定义,一听就高大上不想学。其实指令可以简单地理解为组件的一个小弟,专门帮助组件做一些事情的人。一句话来概括指令可以说成了:“现在组件在干 XXX 的时候,指令我就要做 OOO 的事了”

注册指令

注册指令和注册组件是差不多的,有全局注册也有局部注册,只不过将 components 变成了directives。

全局注册

Vue.directive('focus', {
  inserted: function (el) {
    console.log('Hello, I am ' + el)
  }
})

局部注册

directives: {
  focus: {
    inserted: function (el) {
      console.log('Hello, I am ' + el)
    }
  }
}

生命钩子函数

  1. bind: 只调用一次,指令第一次绑定到元素时调用。
  2. inserted: 被绑定元素插入父节点时调用。
  3. update: 被绑定元素所在的模板更新时调用。
  4. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  5. unbind: 只调用一次,指令与元素解绑时调用。

钩子函数参数

一般每个钩子都会传入 4 个参数:el, binding, vnode, oldNode。通常我们只用前面两个参数就够了。

  1. el: 指令所绑定的元素,可以用来直接操作DOM
  2. binding: 一个对象:
    1. name: 指令名,不包括 v-前缀
    2. value: 指令绑定的新值, v-my-dir="1 + 1", value -> 2
    3. oldValue: 指令绑定的前一个值
    4. expression: 绑定值的字符串形式,如 v-my-dir="1 + 1", expression -> 1" + 1"
    5. arg: 传给指令的参数, v-my-dir:foo, arg -> foo
  3. vnode: Vue 编译生成的虚拟节点

实例

如果上面看得有点晕可以看下面的例子的输出就容易理解了。先对指令定义。

Vue.directive('test', {
    bind(ebl, binding) {
        el.innerHTML = `
            name -> ${binding.name}
            value -> ${binding.value}
            expression -> ${binding.expression}
            argument -> ${binding.arg}
            modifiers -> ${JSON.stringify(binding.modifiers)}
        `
    }
})

let app = new Vue({
    el: '#root',
    data() {
        return {
            msg: 'Hello World'
        }
    },
})

接下下使用这个指令。

Hello World

结果如下。

Vue: 自定义指令_第2张图片
结果

图解

Vue: 自定义指令_第3张图片
图解

你可能感兴趣的:(Vue: 自定义指令)