Vue自定义指令详解

import Vue from 'vue'
Vue.directive('focus',{
    // inserted:被绑定元素插入父节点时调用（父节点存在即可调用）
    // el:指令所绑定的元素，可以直接操作DOM 
    inserted: function (el){
        //聚焦元素
        el.focus();
    }
});
Vue.directive('test',{
    // bind:只调用一次，指令第一次绑定到元素时调用，绑定时执行一次的初始化动作
    // el:指令所绑定的元素，可以直接操作DOM 
    bind: function (el, binding, vnode){
        var keys = [];
        for (var i in vnode) {
            keys.push(i);
        }
        el.innerHTML = 
        //binding对象下的属性
        //   name: 指令名，不包括v-前缀
        //   oldValue: 指令绑定的前一个值，仅在update和componentUpdated钩子中可用【无论值是否改变】。
        //   value: 绑定的值，例如v-test='1 + 1',expression的值是2【值】
        //   expression: 绑定值的字符串格式，例如v-test='1 + 1',expression的值是"1 + 1"【键】
        //   arg: 传给指数的参数。例如v-test:msg,arg的值是msg
        //   modifies: 一个包含修饰符的对象。例如v-test:msg.a.b，对应的值{"a":true,"b":true}
        //   vnode: Vue编译生成的虚拟节点
        //   oldVnode: 上一个虚拟节点，仅在update和componentUpdated钩子中可用
        'name: ' + binding.name + '<br>' +
        'value: ' + binding.value + '<br>' +
        'expression: ' + binding.expression + '<br>' +
        'argument: ' + binding.arg + '<br>' +
        'modifiers: ' + JSON.stringify(binding.modifiers) + '<br>' +
        'vnode keys: ' + keys.join(', ')
    }
});