Vue.directive(自定义指令)

_{Vue.directive指令(自定义指令)}　　

　　除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个改变dom元素颜色的例子，如下：

html页面定义

Vue.directive("hello",function(el,binding,vnode){
　　　　//el是绑定指令的页面元素实例，binding是一个对象，上面有很多方法可以获取元素属性；
       el.style["color"]= binding.value;
})

然后你可以在模板中任何元素上使用新的 v-focus property，如下:

<input     v-focus>    //用v-指令名    来使用自定义指令

 

全局定义

Vue.directive('hello', {
    inserted(el) {
        console.log(el);
    }
})

局部定义

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 第一个自定义指令，指令名称可以自定义，最好有意义
        first: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        },
        //第二个自定义指令
        second: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})
    

参数（每个指令都含有这三个参数）

• el : 指令所绑定的元素，可以用来直接操作DOM
• binding: 一个对象，包含指令的很多信息
• vnode: VUE编译生成的虚拟节点

生命周期

• bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
  • 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 }。
• inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
• update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
• componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
• unbind: 只调用一次，指令元素解绑的时候调用

Vue.directive("hello",{
        //bind 只调用一次，指令第一次绑定到元素时候调用
        bind:function(el,bingind,vnode){
            el.style["color"] = bingind.value;
            console.log("1-bind");
            console.log(el.parentNode);
        },
        //inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
        inserted:function(){
            console.log("2-insert");
            console.log(el.parentNode);
        },
        //被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
        update:function(){
            console.log("3-update");
        },
        //被绑定的元素所在模板完成一次更新更新周期的时候调用
        componentUpdated:function(){
            console.log('4 - componentUpdated');
        },
        //只调用一次，指令元素解绑的时候调用
        unbind:function(){
            console.log('5 - unbind');
        }
 })