自定义指令

[funnycoderstar]

自定义指令

在全局中注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        // 聚焦元素
        el.focus();
    }
});

在组件中注册

export default {
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus();
            }
        }
    }
};

钩子函数

• bind: 只调用一次, 指令第一次绑定到元素时调用
• inserted: 被绑定元素插入父节点时调用(仅保证父节点存在, 但不一定已被插入文档中)
• update: 所有组件的VNode更新时调用, 但是可能发生在其子VNode更新之前
• componentUpdated: 指令所在组件的VNode及其子VNode全部更新后调用
• unbind: 只调用一次,指令与元素解绑时调用

钩子函数参数

• el: 指令所绑定的元素,可以用来直接操作DOM
• bindling: 一个对象, 包含以下属性
  • name: 指令名, 不包括 v- 前缀
  • value: 指令的绑定值, 例如 v-test="1 + 1", 绑定值为2
  • oldValue: 指令绑定的前一个值, 仅在update和componentUpdated钩子中可用.无论值是否改变都可用
  • expression: 字符串形式的指令表达式, 例如 v-test="1 + 1", 表达式为 "1 + 1"
  • arg: 传给指令的参数, 可选 v-test:foo, 参数为"foo"
  • modifiers: 一个包含修饰符的对象, 例如 v-test.foo.bar中, 修饰符对象为 {foo: true, bar: true}
• vnode: vue编译生成的虚拟节点
• oldVnode: 上一个虚拟节点, 仅在update和componentUpdated钩子中可用

<template>
    <div>
        <input type="text" v-focus>
        <div v-test:msg.a.b="message"></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            message: 'some text'
        };
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus();
            }
        },
        test: {
            bind: function (el, binding, vnode) {
                var s = JSON.stringify;
                el.innerHTML =
                    'name: ' + s(binding.name) + '<br>' +
                    'value: ' + s(binding.value) + '<br>' +
                    'expression: ' + s(binding.expression) + '<br>' +
                    'argument: ' + s(binding.arg) + '<br>' +
                    'modifiers: ' + s(binding.modifiers) + '<br>' +
                    'vnode keys: ' + Object.keys(vnode).join(', ');
            }
        }

    }
};
</script>

展示为

在大多数使用场景, 我们会在bind钩子里绑定一些事件, 比如在document上用addEventListener绑定, 在unbind里用removeEventListener解绑