第二十八章 Vue之自定义指令

目录

一、引言

二、自定义指令的注册和使用方式

2.1. 自定义指令-全局注册使用

2.2. 自定义指令-局部注册使用

三、自定义指令完整代码 

3.1. 自定义指令全局注册/使用

3.1.1. main.js

3.1.2. App.vue 

3.2. 自定义指令局部注册/使用

3.2.1. main.js

3.2.2. App.vue

四、自定义指令的指令值


文章中的动态加载效果图片夸克网盘地址:

链接:https://pan.quark.cn/s/d150042ddc5a

一、引言

需求: 当页面加载时,让元素将获得焦点

方式一:autofocus,在safari浏览器存在兼容性问题。

方式二:操作dom:dom元素.focus()。即在页面dom元素挂载渲染完成后通过ref和$refs获取焦点,这种方式还是不够便捷。

方式三:自定义指令,即本章节的主题,自己定义指令,封装输入框获取焦点的操作。

自己定义的指令作用:可以封装一些 dom 操作, 扩展额外功能。

二、自定义指令的注册和使用方式

2.1. 自定义指令-全局注册使用

全局注册

使用自定义指令 

2.2. 自定义指令-局部注册使用

局部注册

使用自定义指令 

三、自定义指令完整代码 

3.1. 自定义指令全局注册/使用

3.1.1. main.js

import Vue from 'vue'
import App from './App.vue'
// 消息提示的环境配置,设置为开发环境或者生产环境,生产环境一般设置不提示常见错误和陷阱
Vue.config.productionTip = false// 全局注册指令
Vue.directive('focus', {// inserted 会在指令所在的元素,被插入到页面中时触发inserted (el) {// el 就是指令所绑定的元素el.focus()}
})new Vue({render: h => h(App),
}).$mount('#app')

3.1.2. App.vue 

<template><div><h1>自定义指令</h1><input v-focus type="text"></div>
</template><script>
export default {// mounted () {//   this.$refs.inp.focus()// }
}
</script><style></style>

3.2. 自定义指令局部注册/使用

3.2.1. main.js

import Vue from 'vue'
import App from './App.vue'
// 消息提示的环境配置,设置为开发环境或者生产环境,生产环境一般设置不提示常见错误和陷阱
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

3.2.2. App.vue

<template><div><h1>自定义指令</h1><input v-focus type="text"></div>
</template><script>
export default {// 局部注册指令directives: {focus: {// inserted 会在指令所在的元素,被插入到页面中时触发inserted (el) {// el 就是指令所绑定的元素el.focus()}}}
}
</script><style></style>

四、自定义指令的指令值

我们在自定义指定时,可以在绑定指令的同时,为指令绑定(设定)具体的参数值。通过binding.value可以拿到指令值,

inserted:会在指令所在的元素,被插入到页面中时触发。

update:会在指令值修改时触发。

 核心代码

<template><div><h1 v-color="color1">指令的值1测试</h1><h1 v-color="color2">指令的值2测试</h1></div>
</template><script>
export default {data () {return {color1: 'red',color2: 'green'}},// 局部注册指令directives: {color: {// inserted 会在指令所在的元素,被插入到页面中时触发inserted (el, binding) {// el 就是指令所绑定的元素el.style.color = binding.value},// update 指令的值修改变化时触发,更新domupdate (el, binding) {el.style.color = binding.value}}}
}
</script><style></style>

五、自定义v-loading加载中指令

实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态影响用户体验不好,这时候我们可以封装一个v-loading指令,实现加载中的效果。

5.1. loading实现

实现原理:

1. loading效果效果本质就是一个蒙层,盖在了盒子上

2. 数据请求中,开启loading状态,添加蒙层

3. 数据请求完毕,关闭loading状态,移除蒙层

实现步骤:

1. 准备一个 loading 类,通过伪元素定位,设置宽高,实现蒙层

2. 开启关闭 loading 状态(添加移除蒙层),本质只需要添加移除类即可

3. 结合自定义指令的语法进行封装复用

5.2. 完整代码 

5.2.1. main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

5.2.2. App.vue

<template><div class="main"><!-- 通过自定义v-loading加载指令 动态添加/移除 加载效果的样式 来实现加载效果 --><div class="box" v-loading="isLoading"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><!-- 封装了v-loading加载指令后,我们可以任意的添加多个加载效果层 --><!-- <div class="box2" v-loading="isLoading2"></div> --></div>
</template><script>
// 安装axios =>  yarn add axios
import axios from 'axios'// 我本地部署的后端接口,大家可以在本地自己简单搞个SpringBoot服务
// 接口地址:http://localhost/api/news
// 请求方式:get
export default {data () {return {list: [],// 加载是否开启的开关isLoading: true,isLoading2: true}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.data// 后端接口请求数据返回后则关闭加载效果this.isLoading = false}, 2000)},// 局部注册自定义的加载插件directives: {loading: {// inserted 会在指令所在的元素,被插入到页面中时触发(isLoading初始值我们设置成true开启加载效果)inserted (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')},// update 指令的值修改变化时触发,更新dom。即后端接口请求成功返回数据后,关闭加载效果(更改isLoading为false时触发)update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

5.2.3. 图片

在文章开头我分享的网盘中下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/463643.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

银行信贷知识竞赛活动策划方案

为了落实20xx年省分行工作会议精神&#xff0c;进一步加强信贷队伍建设&#xff0c;普及和强化员工对信贷业务知识的掌握和运用&#xff0c;提高信贷从业人员素质&#xff0c;推动全省农行20xx年员工成长计划实施&#xff0c;实现我行全面提升信贷管理水平&#xff0c;促使信贷…

【学术论文投稿】探索嵌入式硬件设计:揭秘智能设备的心脏

【IEEE出版】第六届国际科技创新学术交流大会暨通信、信息系统与软件工程学术会议&#xff08;CISSE 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议论文投稿请看&#xff1a;https://ais.cn/u/nuyAF3 目录 引言 嵌入式系统简介 嵌入式硬件设计的组成部分 设…

谷歌浏览器报“喔唷,崩溃啦!”怎么办?

表现 Chrome浏览器所有页面崩溃&#xff0c;“喔唷&#xff0c;崩溃啦&#xff01;( STATUS_INVALID_IMAGE_HASH )” 原因 Google 在79版本&#xff08;2019年12月20号左右&#xff09;的更新中又重新启用了Renderer Code Integrity Protection&#xff08;渲染器代码完整性保…

双因子认证(Two-factor authentication)简介

一、核心概念 双因子认证&#xff08;Two-Factor Authentication&#xff0c;简称2FA&#xff09;是一种身份验证机制&#xff0c;它要求用户提供两种不同类型的证据来证明自己的身份&#xff0c;通常包括用户所知道的&#xff08;如密码&#xff09;、用户所拥有的&#xff0…

vue3项目中实现el-table分批渲染表格

开篇 因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题&#xff0c;在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后&#xff0c;最后决定使用分批渲染来解决该问题。 代码实现 表格代码 <el-table :data"currTableData"borderstyle"wi…

11.Three.js使用indexeddb前端缓存模型优化前端加载效率

11.Three.js使用indexeddb前端缓存模型优化前端加载效率 1.简述 在使用Three.js做数字孪生应用场景时&#xff0c;我们常常需要用到大量模型或数据。在访问我们的数字孪生应用时&#xff0c;每次刷新都需要从web端进行请求大量的模型数据或其他渲染数据等等&#xff0c;会极大…

【HarmonyOS】引导用户跳转APP设置详情页开启权限

【HarmonyOS】引导用户跳转设置APP详情页开启权限 前言 众所周知在鸿蒙应用中&#xff0c;向用户申请权限时&#xff0c;会弹出系统请求授权的弹框。当用户拒绝了你申请的权限&#xff0c;弹框会直接关闭。当下次触发同样的权限申请&#xff0c;会直接返回失败&#xff0c;不…

深入理解Transformer中的位置编码

1 位置编码的作用 由于注意力的作用机制&#xff0c;不论输入序列的顺序如何&#xff0c;输出结果都是一样的。 也就是丢失了位置信息。 但是对于语言模型&#xff0c; 我们都知道顺序是很重要的&#xff0c; 所以需要对输入序列额外注入位置信息。 2 位置编码方式 Transfor…

MySQL分区表(二)

说明&#xff1a;之前有写过一篇博客&#xff0c;介绍MySQL如何建立分区表&#xff0c;本文介绍如何建立子分区表。子分区&#xff0c;就是在原来分区的基础上&#xff0c;再嵌套一个分区。 例如&#xff0c;按照记录的创建时间分区&#xff0c;在此基础上&#xff0c;再按照租…

一文弄懂Bert模型

01 引言 计算机一直难以理解语言&#xff0c;其中一个重要原因就是该任务需要更基本的语言语境。每个 NLP 任务都可以通过使用为每个任务创建的单独模型来解决。 2018 年&#xff0c;谷歌发布了论文BERT&#xff0c;旨在对模型进行预训练&#xff0c;这样就可以通过增加不同…

HTML5实现小鸟过管道小游戏源码

文章目录 1.设计来源1.1 主界面1.2 游戏中主界面1.3 游戏结束界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/…

Linux·进程控制(system V)

1. 共享内存 system V共享内存是最快的IPC形式&#xff0c;之前的管道是基于Linux内核开发的通讯方案&#xff0c;其读写接口都是现成的&#xff0c;因此内核设计者为了完成进程间通讯任务并不需要新增太多代码。而共享内存属于system V标准&#xff0c;是操作系统单独…

【Python+Pycharm】2024-Python安装配置教程

【PythonPycharm】2024-Python安装配置教程 一、下载装 Python 1、进入Python官网首页&#xff0c;下载最新的Python版本 Download Python | Python.org 选择对应版本下载 安装 测试安装情况 python如果安装失败 在系统环境变量添加安装路径 where pythonwin7安装路径添加…

文献阅读 11.3

文献阅读 Physics-informed neural networks for hydraulic transient analysis in pipeline systems (基于物理信息的管道系统水力瞬态分析神经网络) 一、文献摘要 该文献提出了一种新的基于物理和数据驱动的定向瞬态压力重建方法&#xff0c;无需建立完整的管道系统模型。…

MFC工控项目实例二十八模拟量信号每秒采集100次

用两个多媒体定时器&#xff0c;一个定时0.1秒计时&#xff0c;另一个定时0.01秒用来对模拟量信号采集每秒100次。 1、在SEAL_PRESSUREDlg.h中添加代码 class CSEAL_PRESSUREDlg : public CDialo { public:CSEAL_PRESSUREDlg(CWnd* pParent NULL); // standard constructor&a…

气膜冰雪项目:推动冰雪运动发展的新纪元—轻空间

随着2024年北京冬奥会的余温仍在延续&#xff0c;气膜冰雪项目在我国的冰雪运动发展中扮演着愈发重要的角色。气膜结构以其独特的优势&#xff0c;正吸引着越来越多的参与者&#xff0c;推动着冰雪运动的普及与发展。 突出的优势 气膜冰雪馆的设计理念充分体现了现代建筑的灵活…

市场分化!汽车零部件「变天」

全球汽车市场的动荡不安&#xff0c;还在持续。 本周&#xff0c;全球TOP20汽车零部件公司—安波福&#xff08;Aptiv&#xff09;发布2024年第三季度财报显示&#xff0c;三季度公司经调整后确认收入同比下降6%&#xff1b;按照区域市场来看&#xff0c;也几乎是清一色的下滑景…

ES6中数组新增了哪些扩展?

ES6中数组新增了哪些扩展&#xff1f; 1、扩展运算符的应⽤ ES6通过扩展元素符 … &#xff0c;好⽐ rest 参数的逆运算&#xff0c;将⼀个数组转为⽤逗号分隔的参数序列 console.log(...[1, 2, 3]) // 1 2 3 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...documen…

基于物联网的户外环境检测装置教学文章

引言 随着物联网&#xff08;IoT&#xff09;技术的发展&#xff0c;越来越多的应用被广泛研究和应用于我们的日常生活中。户外环境检测装置是一种利用传感器、网络连接和数据分析技术&#xff0c;监测和分析环境数据&#xff08;如温度、湿度、空气质量等&#xff09;的设备。…

ubuntu20安装opencv3.2记录

系统环境 ubuntu20安装了ros-noetic&#xff0c;所以系统默认装了opencv4.2.0&#xff0c;但是跑fastlivo推荐的是opencv3.2.0&#xff0c;而且海康相机别人写的ros驱动&#xff08;海康相机ros驱动&#xff09;也是需要opencv3.2.0&#xff0c;最终还是选择安装多版本的openc…