Vue: 自定义指令

有人可能感觉自定义指令好像是个新东西，还要学自定义，一听就高大上不想学。其实指令可以简单地理解为组件的一个小弟，专门帮助组件做一些事情的人。一句话来概括指令可以说成了：“现在组件在干 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

结果如下。

结果

图解

图解