一.Vue.directive自定义指令
main.js
Vue.directive("changeColor",function(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode)
el.style.color="green"
// 钩子函数,被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中)。
inserted:{
el.focus()
console.log( 'inserted' );
}
// 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
bind:{
console.log( 'bind' );
}
// 被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
update:{
console.log( 'update' );
}
// 被绑定元素所在模板完成一次更新周期时调用。
componentUpdated:{
console.log( 'componentUpdated' );
}
// 只调用一次,指令与元素解绑时调用。
unbind:{
console.log( 'unbind' );
}
})
这是一个点击按钮让其上边数字++的例子。自己定义一个全局的指令。我们这里使用Vue.directive( );可以看到字体的颜色变成了绿色。效果如图。
注:
- el: 指令所绑定的元素,可以用来直接操作DOM。
- binding: 一个对象,包含指令的很多信息。
- vnode: Vue编译生成的虚拟节点。
二.局部指令
var app=new Vue({
el:'#app',
data:{
num:10,
color:'green'
},
methods:{
add:function(){
this.num++;
}
},
directives:{
jspang:function(el,binding,vnode){
el.style='color:'+binding.value;
}
}
})