高校档案网站建设的目的是什么意思,杭州网站推广找哪家,竹子建站免费版,代理注册公司收费标准自定义指令
像 v-html#xff0c;v-if#xff0c;v-for都是vue内置指令#xff0c;而我们也可以封装自定义指令#xff0c;提升编码效率。
什么是自定义指令#xff1f; 自己定义的一些指令#xff0c;可以进行一些dom操作#xff0c;扩展格外的功能。比如让图片懒加载…自定义指令
像 v-htmlv-ifv-for都是vue内置指令而我们也可以封装自定义指令提升编码效率。
什么是自定义指令 自己定义的一些指令可以进行一些dom操作扩展格外的功能。比如让图片懒加载让input自动聚焦。 自定义指令又分为全局注册和局部注册。 使用方法则是与内置指令一样直接在标签上写v-指令名即可。 全局注册指令 在main.js中为vue对象添加
//focus是指令名称
Vue.directive(focus,{
//inserted是指令的生命周期函数指再页面中插入此元素时调用inserted(el){
//为元素聚焦el.focus()}
}
)使用直接在标签上面写v-指令名称即可 input typetext v-focus :valuemsg refinp局部注册与使用
templatediv!-- 添加v-指令名称 v-focus --input typetext v-focus :valuemsg refinp/div
/templatescript
export default {data(){return{}},props:{msg:String},mounted(){},//在directives中写指令directives:{//指令名称focus:{//在指令被插入到页面中时调用inserted(el){//el代表内添加v-focus的元素为它聚焦 el.focus()}}}
}
/script实现一个自定义指令
定义一个color指令为标签修改颜色color指令需要一个颜色值传入不同的值标签文字显示不同颜色 通过binding.value可以取到当前指令的值再通过value去修改标签。 代码
templatedivdiv v-colorcolor1你好 vue/div div v-colorcolor2你好 vue/div /div
/templatescript
export default {data(){return{color1:red,color2:blue}},props:{msg:String},mounted(){},//在directives中写指令directives:{//指令名称color:{//在指令被插入到页面中时调用inserted(el,binding){//el代表内添加v-color的元素为它添加字体颜色 el.style.colorbinding.value},//在属性值更新时调用update(el,binding){//为color更新颜色el.style.colorbinding.value},}}
}
/script效果 其中修改data的color1和color2就会修改字体颜色。 总结
v-loading指令封装 分析:
1.本质loading 效果就是一个蒙层盖在了盒子上 2.数据请求中开启loading状态添加蒙层 3.数据请求完毕关闭loading状态移除蒙层
具体步骤实现: 1.准备一个loading 类通过伪元素定位设置宽高实现蒙层
.loading:before {content: ;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background:#fff url(./assets/91jiazai.png) no-repeat center;
}2.开启关闭 loading 状态(添加移除蒙层)本质只需要添加移除类即可
export default {name: App,data() {return {//显示内容msg: 你好!vue,//判断是否加载成功isloading:true};},created(){//模拟发送请求返回数据花费了3秒钟setTimeout(() {console.log(this.msg);//接收数据成功将数据改为false显示页面this.isloading false;}, 3000);},//在directives中写指令directives:{//指令名称loading:{inserted(el,binding){//如果值为true添加伪类 否则不添加binding.value?el.classList.add(loading):el.classList.remove(loading)},update(el,binding){//如果值为true添加伪类 否则不添加binding.value?el.classList.add(loading):el.classList.remove(loading)}}}
};
3.结合自定义指令的语法进行封装复用 为标签添加v-loading “数据”
templatediv idappdiv classbox v-loadingisloading{{ msg }}/div
/div
/template效果进入页面时 模拟请求完成之后
