vue：自定义指令

<div id="app">
    <div v-lang="color">{{num}}</div>
    <button @click="add">add</button>
</div>

Vue.directive('lang', function(el, binding){
    console.log(el);
    console.log(binding);
    el.style='color:' + binding.value;
});

let vm = new Vue({
    el: '#app',
    data: {
        num: 1,
        color: 'red'
    },
    methods: {
        add(){
            this.num++;
        }
    }
});

el: 指令所绑定的元素，可以用来直接操作DOM。

binding: 一个对象，包含指令的很多信息。

vnode: Vue编译生成的虚拟节点。

<div id="app">
    <div v-lang="color">{{num}}</div>
    <button @click="add">add</button>
</div>

<div><button onclick="unbind()">解绑</button></div>

function unbind() {
    vm.$destroy();//另外起一个方法解绑
}

Vue.directive('lang', {//五个注册指令的钩子函数
    bind: function(){//被绑定
        console.log('1 - bind');
    },
    inserted: function(){//绑定到节点
        console.log('2 - inserted');
    },
    update: function(){//组件更新
        console.log('3 - update');
    },
    componentUpdated: function(){//组件更新完成
        console.log('4 - componentUpdated');
    },
    unbind: function(){//解绑
        console.log('5 - bind');
    }
});

let vm = new Vue({
    el: '#app',
    data: {
        num: 1,
        color: 'red'
    },
    methods: {
        add(){
            this.num++;
        }
    }
});

说明：

1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

5、unbind:只调用一次，指令与元素解绑时调用。

猜你喜欢