vue.directive自定义指令

Vue.directive自定义指令

html中使用指令，例如：

<div id="app">
        <div>
            <p v-zxs="color">{{num}}</p>
            <p><button @click="add">自增</button></p>
        </div>
</div>

js中构造器声明color以及自定义指令的创建：

function中一般会使用三个参数,包括el、binding、vnode.

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

binding：一个对象，包括指令的很多信息；

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

<script type="text/javascript">
        Vue.directive("zxs", function(el, binding) {
            console.log(el);
            console.log(binding);
            el.style = "color:" + binding.value;

        })
        var app = new Vue({
            el: '#app',
            data: {
                num: 10,
                color: 'red',
            },
            methods: {
                add: function() {
                    this.num++;
                }

            }
        })
</script>