自定义指令
根据自定义的指令,可以封装一些dom操作,扩展额外的功能
- 全局注册-语法
全局注册是在min.js
文件中去定义的
Vue.directive('指令名',{
// inserted: 钩子是一个自定义指令的生命周期钩子函数之一。它会在被绑定的元素插入到父节点时调用。
"inserted"(el){
// 可以对el标签,扩展额外的功能
el.focus();//聚焦
}
})
实现效果:自动聚焦
- 局部注册-语法
局部注册在组件中去定义
directives{
'指令名':{
// inserted: 钩子是一个自定义指令的生命周期钩子函数之一。它会在被绑定的元素插入到父节点时调用。
inserted(el){
// 可以对el标签,扩展额外的功能
el.focus();//聚焦
}
}
}
- 使用
<input v-指令名 type ='text'/>
只要使用的标签被绑上了自定义的指令,那么由于inserted
的特殊性,就会去触发相应的操作
场景需求
需求:实现一个color指令,传入不同的颜色,给标签设置文字颜色
- 语法:在绑定指令时,可以通过“等号”的形式为指令绑定 具体的参数值
<h1 v-color="color">自定义指令</h1>
其中 v-color 是我们自定义的指令, color 是参数 - 通过
binding.value
可以拿到指令值,指令值修改会触发update函数
directives: {
color: {
// el是markup中指令所在的元素,binding是 包含指令信息的对象
inserted(el, binding) {
console.log(binding.value);
el.style.color = binding.color;
},
// 会在包含指令的元素的绑定值更新时触发。具体来说,当指令所绑定的值发生改变时,update 钩子会被调用。
update(el, binding) {
console.log(binding.value);
el.style.color = binding.color;
},
},
}
完整演示: