除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:(咳咳,借官网的用一用)
1、定义全局的自定义变量
main.js
Vue.directive('color',{
inserted(el){//各单位注意,这里的el获取的是标签元素,说白了就是可以直接操作DOM
console.log(el)
el.style.color= "red"}
})
app.vue,这里直接写v-color就可以;
2、自定义指令中,添加属性;
Vue.directive('color',{
bind(el,binding){switch(binding.value){case 'red':
el.style.color= 'red'
break;case 'blue':
el.style.color= 'blue'
break;
}
}
})
App.vue
可以通过给自定义的属性,添加属性的方式来修改颜色;当然不仅仅只能修改颜色这么简单,因为el直接获得了DOM,所以你懂得!
3、组件内指令-只有自己组件可以使用
注意:directives是一个对象,里面定义的自定义指令也是对象!
//template
//script//这里是对象
directives:{//每个指令都是一个对象
color:{
inserted(el){
el.style.color= 'cyan'}
}
}
4、组件内的自定义指令,增加属性
//template
//script//这里是对象
directives:{//每个指令都是一个对象
color:{
bind(el,binding){if(binding.value == 'red'){
el.style.color= 'red'}else if (binding.value = 'blue'){
el.style.color= 'blue'}
}
}
}
给大家奉上地址:https://cn.vuejs.org/v2/guide/custom-directive.html
如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识!