自定义指令

1.指令

对纯DOM元素进行底层操作

//注册一个全局指令
Vue.directive('focus', {
    //当绑定元素插入到DOM中执行focus
    inserted: function (el) {
        el.focus();
    }
});
//注册一个局部指令
var app = new Vue({
    el: "#app",
    directives: {
        focus: {
            inserted: function (el) {
                el.focus();
            }
        }
    }
});

2.钩子函数

• bind:指令第一次绑定到元素时调用，只调用一次
• inserted:被绑定元素插入父节点时调用(父节点存在即调用，不必存在于DOM)
• update:组件VNode更新时调用
• componentUpdated:组件VNode及子VNode全部更新时调用
• unbind:指令与元素解绑时调用，只调用一次

3.钩子函数参数

• el:指定绑定元素，可直接操作DOM
• binding:对象，含：name, value, oldValue, expression, arg, modifiers, vnode, oldVnode
• vnode:Vue编译器生成的虚拟节点
• oldVnode:旧虚拟节点

Vue.directive('demo', {
    bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
            //指令名,输出:demo
            "name:" + s(binding.name) + "
"
            //绑定值,输出:66
            + "value:" + s(binding.value) + "
"
            //绑定字符串表达式,输出:message
            + "expression:" + s(binding.expression) + "
"
            //传给指令的参数,输出:my-args
            + "arg:" + s(binding.arg) + "
"
            //修饰符对象,输出:{a:true, b:true}
            + "modifiers:" + s(binding.modifiers) + "
"
            + Object.keys(vnode).join(',')
    }
});

new Vue({
    el: "#app",
    data: {
        message: "66"
    }
});

除了el外，其他参数只读

自定义指令可以接受一个字面量对象

//bind和update钩子简写形式
Vue.directive('demo', function (el, binding) {
    console.log(binding.value.name);
});