vue.directive自定义指令

vue.directive自定义指令

在构造器外部，用vue提供给我们的api函数来定义新的功能

<div class='box'>
    <div v-anan="color" v-text="num"></div>
    <div><button @click="add()">增加</button></div>
</div>
<div><button onclick="unbind()">解除按钮绑定</button></div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    // 自定义指令解绑
    function unbind(){
        app.$destroy();//销毁|解绑
    }

    // 自定义指令中传递的三个参数
    // el: 指令所绑定的元素，可以用来直接操作DOM
    // binding: 一个对象，包含指令的很多信息
    // vnode: Vue编译生成的虚拟节点
    Vue.directive('anan', {
        // bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
        bind: function (el, binding, vnode) {
            console.log(binding.value);//获取绑定元素的赋值
            el.style = 'color:' + binding.value;//用原生语法改变样式
            console.log('1 - bind');
        },
        // inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
        inserted: function () {
            console.log('2 - inserted');
        },
        // update: 被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
        update: function () {
            console.log('3 - update');
        },
        // componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
        componentUpdated: function () {
            console.log('4 - componentUpdated');
        },
        // unbind: 只调用一次，指令与元素解绑时调用。
        unbind: function () {
            console.log('5 - bind');
        }
    });
    var app = new Vue({
        el: '.box',
        data: {
            num: 10,
            color: 'red'
        },
        methods: {
            add: function () {
                this.num++;
            }
        }
    })
</script>

上一篇：vue事件绑定和属性

下一篇：vue过滤器