个人主页:五敷有你
系列专栏:Vue
⛺️稳重求进,晒太阳
之前的v-html v-model v-for 等都是内置指令
自定义指令:自己定义的指令,可以封装一些dom操作,扩展额外功能
操作dom:dom元素.focus()
mounted(){
this.$refs.inp2.focus()
}
Vue 自动将我们的 自定义指令添加上了 v- 前缀。
//全局注册指令
Vue.directive("指令名",{
//insert会在指令所在元素被插入到页面中触发
"inserted" (el){
//可以对el标签扩展额外的功能
el.focus()
}
})
//局部注册指令
directives:{
//指令名:指令配置项
focus:{
inserted(el){
el.focus()
}
}
}
//局部注册指令
directives:{
//指令名:指令配置项
color:{
inserted(el,binding){
el.style.color=binding.value
},
update(el,binding){
el.style.color=binding.value
}
}
}
分析:
实现: