vue指令总结

1. 指令周期

指令有5个生命周期

bind                      指令绑定后，只执行一次，适合初始化
inserted                 元素插入父节点后
update                   组件VNode更新时
componentUpdated 组件VNode及其子VNode更新后调用
unbind                   只执行一次，指令与元素解绑时

2. 生命周期参数说明

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
　　name：指令名，不包括 v- 前缀。
　　value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
　　oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
　　expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
　　arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。　　
　　modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
　　vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
　　oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3. 周期简写

指令通常写法

Vue.directive('color-swatch', {
    bind(){...}
    update(){...}
    unbind(){...}
})

如果bind和update总是相同，可以简写为一个函数

Vue.directive('color-swatch', function (el, binding) {
  ...
})

4. 经典场景

4.1 实现元素的visibility的隐藏功能

//以插件的形式暴露指令，可以方便的以use的方式来引入指令
const oVisible = {
    install(Vue) {
        //全局注册在指令
        Vue.directive('visible', (el, binding) => {
            var value = binding.value;
            if (!!value) {
                el.style.visibility = 'visible';
            } else {
                el.style.visibility = 'hidden';
            }
        });
    }
};

if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(oVisible);
}

export default oVisible;

使用

import VueVisible from 'vue-visible';

Vue.use(VueVisible);

<div v-visible="shouldVisible">测试例子</div>

4.2 实现点击元素外部执行方法，clickOutSide功能

Vue.directive('clickoutside',{
    bind(el, binding, vnode) {
        function onDocumentClick(e) {
            if (el.contains(e.target)) {
                return false
            }
            if (binding.expression) {
                binding.value(e)
            }
        }
        el.__vueClickOutside__ = onDocumentClick
        document.addEventListener('click', onDocumentClick)
    },
    unbind(el, binding) {
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
    }
})