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>