📝个人主页：五敷有你
🔥系列专栏：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()
}
}
}指令的值
- 语法：在绑定指令的时候，可以通过“等号”的形式为 指令 绑定具体的参数值
<div :v-color="red">指令的值</div>
- 通过binding.value 可以拿到指令值。指令值修改会触发 update函数
- 通过update钩子，可以监听指令值的变化
//局部注册指令
directives:{
//指令名：指令配置项
color:{
inserted(el,binding){
el.style.color=binding.value
},
update(el,binding){
el.style.color=binding.value
}
}
}封装v-loading指令
分析：
- 本质loading效果就是一个蒙层，盖在了盒子上。
- 数据请求中，开启loading状态，添加蒙层
- 数据请求完毕，关闭loading状态，移除蒙层
实现：文章来源：https://www.toymoban.com/news/detail-831556.html
- 准备一个loading类，通过伪元素定位，设置宽高，实现蒙层
- 开启关闭loading状态(添加移除蒙层)，本质只需要添加移除类即可
- 结合自定义指令的语法进行封装复用
文章来源地址https://www.toymoban.com/news/detail-831556.html
到了这里，关于【Vue】自定义指令的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
