版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
自定义指令
自定义指令的语法规则
使用vue的directive这个api进行添加
获取元素焦点
Vue.directive('focus', {
inserted: function(el) {
//el表示指令所绑定的元素
//获取元素焦点
el.focus();
}
})
函数被称为指令钩子函数
自定义指令的用法
<input type="text" v-focus>
带参数的自定义指令
改变元素背景色
Vue.directive('color', {
inserted: function(el,binding) {
//el表示指令所绑定的元素
//获取元素焦点
//binding是一个对象里的value值就是vm示例对象中的data的值
el.style.backgroundColor = binding.value.color;
}
})
var vm = new Vue({
el:'#app',
data:{
msg:{
color:'blue'
}
},
methods:{
hamdle:function(){
}
}
})
指令的用法
<input type="text" v-color='{color:"orange"}'>
局部指令
directives:{
focus:{
//指令的定义
inserted:function(el){
el.focus()
}
}
}
代码示例
改变元素背景色
var vm = new Vue({
el:'#app',
data:{
msg:{
color:'blue'
}
},
methods:{
hamdle:function(){
}
},
directives:{
'color', {
bind: function(el,binding) {
//el表示指令所绑定的元素
//获取元素焦点
//binding是一个对象
el.style.backgroundColor = binding.value.color;
}
}
}
})
是在Vue({})中传入的对象中添加的这个属性