Vue自定义指令- v-loading封装

Vue自定义指令- v-loading封装

文章目录

  • Vue自定义指令- v-loading封装
      • 01-自定义指令
          • 自定义指令的两种注册语法:
      • 02自定义指令的值
      • 03-自定义指令- v-loading指令封装

01-自定义指令


什么是自定义指令?

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

1、例如:完成自动聚焦的功能:

自定义指令的两种注册语法:
  • 全局注册-语法:
// 全局注册指令
Vue.directive('focus',{// inserted会在 指令所在的元素,被插入到页面中的时候触发inserted (el) {// el 就是我们指令所绑定的元素el.focus()}
})
  • 局部注册-语法:
  // 2.局部注册指令directives: {// 指令名:指令配置项focus: {// el 是我么指令所绑定的元素inserted (el) {el.focus()}}}

根据使用场景:选择不同的注册方式。


02自定义指令的值

2、例如:实现一个color指令 - 传入不同的颜色,给标签设置文字颜色

语法

我们再绑定指令的时候,可以通过 等号 给我们指令绑定具体的参数。

v-指令名=“指令值”,绑定指令的值

<div v-color="color">我是内容</div>

通过 binding.value可以可以拿到指令值,指令值修改会 触发 update 函数

binding.value可以拿到color的值,当我们指令被修改后,会执行update函数

  <div class="app"><h1 v-color="color1">指令的值1</h1><h1 v-color="color2">指令的值2</h1></div><script>
export default {data () {return {color1: 'red',color2: 'green'}},// 注册自定义指令directives: {color: {// 1、inserted 元素被添加到页面时的逻辑inserted (el,binding) {// binding.value 就是指令的值el.style.color = binding.value},// 2、update 指令的值修改的时候触发,提供dom更新后的逻辑update (el, binding) {el.style.color = binding.value}}}
}
</script>

03-自定义指令- v-loading指令封装


分析 v-loading指令封装

  1. 本质 loading 效果就是一个蒙层,盖在了盒子上
  2. 数据请求中,开启loading状态,添加蒙层
  3. 数据请求完毕后,关闭loading装状态,移除蒙层。

实现:

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

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

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


  <div class="box" v-loading="isLoading"><script>
// 安装axios =>  yarn add axios
import axios from 'axios'// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {data () {return {list: [],isLoading: true}},// 定义局部指令directives: {loading: {inserted (el,binding) {// 指令触发后执行当前钩子  insertedbinding.value ? el.classList.add('loading') : el.classList.remove('loading')},update (el,binding) {// 指令值被修改执行当前钩子 updatebinding.value ? el.classList.add('loading') : el.classList.remove('loading')}}},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)}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}
</style>

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

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

相关文章

webassembly003 GGML Tensor Library part-1

GGML ggml的函数 可以看到官方示例项目仅依赖于#include "ggml/ggml.h"&#xff0c; #include "common.h"&#xff0c;可以阅读ggml.h获取ggml的使用帮助 函数解释注释ggml_tensor多维张量按行主顺序存储。ggml_tensor结构包含每个维度中元素数&#xf…

httpd协议与apache

1.http 相关概念 HTTP是处于应用层的协议&#xff0c;使用TCP传输层协议进行可靠的传送。因此&#xff0c;需要特别提醒的是&#xff0c;万维网是基于因特网的一种广泛因特网应用系统&#xff0c;且万维网采用的是HTTP&#xff08;80/TCP&#xff09;和 HTTPS&#xff08;443/…

OpenCV基础知识(8)— 图形检测

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。图形检测是计算机视觉的一项重要功能。通过图形检测可以分析图像中可能存在的形状&#xff0c;然后对这些形状进行描绘&#xff0c;例如搜索并绘制图像的边缘&#xff0c;定位图像的位置&#xff0c;判断图像中有没有直线、…

前端开发工具: VSCode

VSCode 安装使用教程&#xff08;图文版&#xff09; | arry老师的博客-艾编程 1. 下载 在官方网站&#xff1a;https://code.visualstudio.com/ 下载最新版本的 VSCode 即可 2. VSCode 常见插件安装 所有插件安装后,需要重启一下才生效 2.1 简体中文语言包 2.2 编辑器主…

webscoket在vue中的使用

项目场景&#xff1a; 提示&#xff1a;项目相关背景&#xff1a; 什么是webscoket&#xff1f;: WebSocket是一种计算机通信协议&#xff0c;通过单个TCP连接提供全双工通信信道。实现了web客户端和服务器之间的实时通信&#xff0c;与传统的HTTP连接相比&#xff0c;允许以…

Docker harbor私有仓库部署与管理

一、搭建本地私有仓库二、Harbor私有仓库部署与管理1、Harbor概述2、Harbor的特性3、Harbor的核心组件3.1 Proxy3.2 Registry3.3 Core services3.3.1 UI&#xff08;harbor-ui&#xff09;3.3.2 WebHook3.3.3 Token 服务 3.4 Database&#xff08;harbor-db&#xff09;3.5 Log…

package.json

问题原因&#xff1a; 查了下原因&#xff0c;主要是 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制&#xff0c;nodeJs v17 之前版本没影响&#xff0c;但 V17 和之后版本会出现这个错误。 在 package.json 的 scripts 中新增&#xff1a; SET N…

Unity3D软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 Unity3D是一款全球知名的游戏开发引擎&#xff0c;由Unity Technologies公司开发。它提供了一个跨平台、多功能的开发环境&#xff0c;支持创建2D和3D游戏、交互式应用、虚拟现实、增强现实等多种类型的应用程序。以下是Unity3D…

svn下载

Download | VisualSVN for Visual Studio svn下载

2023年高教社杯 国赛数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…

nginx调优(二)

一、event模块: 用于配置服务器的事件驱动机制的模块。它定义了 Nginx 如何处理并发连接和网络事件&#xff0c;以及如何与底层操作系统的事件机制交互。 1.最大并发连接数&#xff1a; worker_connections 65536; 2.选择事件驱动&#xff1a; nginx默认使用epoll时间驱动类…

windows系统 Fooocus 图片生成模型 ,4-6GB显存即可玩,27S/p

安装步骤: 1.下载程序代码框架,大小2GB ,下载 ​​​​​​https://github.com/lllyasviel/Fooocus/releases/download/1.0.35/Fooocus_win64_1-1-1035.7z 2.下载模型文件sd_xl_base_1.0_0.9vae.safetensors ,大小6GBhttps://huggingface.co/stabilityai/stable-diffusion-x…

Window基础命令

文章目录 查看哪些端口被禁用TCP协议删除开机启动项方案1方案2 查看哪些端口被禁用TCP协议 netsh interface ipv4 show excludedportrange protocoltcp删除开机启动项 方案1 列出所有启动项 bcdedit /enum仔细看你要删除的是哪一项&#xff08;看description&#xff09;&a…

2 hadoop的目录

1. 目录结构&#xff1a; 其中比较的重要的路径有&#xff1a; hdfs,mapred,yarn &#xff08;1&#xff09;bin目录&#xff1a;存放对Hadoop相关服务&#xff08;hdfs&#xff0c;yarn&#xff0c;mapred&#xff09;进行操作的脚本 &#xff08;2&#xff09;etc目录&#x…

数据结构入门 — 顺序表详解

前言 数据结构入门 — 顺序表详解 博客主页链接&#xff1a;https://blog.csdn.net/m0_74014525 关注博主&#xff0c;后期持续更新系列文章 文章末尾有源码 *****感谢观看&#xff0c;希望对你有所帮助***** 文章目录 前言一、顺序表1. 顺序表是什么2. 优缺点 二、概念及结构…

32、启用 HTTP 响应压缩和编程式配置Web应用

★ 启用HTTP压缩 就是前端页面如果改动的比较多&#xff0c;那么响应就会比较慢&#xff0c;可以通过设置HTTP响应压缩来提高响应&#xff0c;如果前端改动少&#xff0c;那么就不需要启动这个响应压缩。 目的&#xff1a;为了提高HTTP响应数据在网络上的传输效率。▲ 设置如…

强化学习系列--时序差分学习方法(SARSA算法)

强化学习系列--时序差分学习方法&#xff08;SARSA算法&#xff09; 介绍示例代码 介绍 SARSA&#xff08;State-Action-Reward-State-Action&#xff09;是一种强化学习算法&#xff0c;用于解决马尔可夫决策过程&#xff08;MDP&#xff09;中的问题。SARSA算法属于基于值的…

R语言常用数学函数

目录 1. - * / ^ 2.%/%和%% 3.ceiling,floor,round 4.signif,trunc,zapsamll 5.max,min,mean,pmax,pmin 6.range和sum 7.prod 8.cumsum,cumprod,cummax,cummin 9.sort 10. approx 11.approx fun 12.diff 13.sign 14.var和sd 15.median 16.IQR 17.ave 18.five…

算法通关村第十六关——

LeetCode643给定n个整数&#xff0c;找出平均数最大且长度为k的连续子数组&#xff0c;并输出该最大平均数。 其中1<k<nums.length<105。 输入&#xff1a;[1,12&#xff0c;-5&#xff0c;-6,50,3]&#xff0c;k 4 输出&#xff1a;12.75 解释&#xff1a;最大平均…

DevOps系列文章 之 Python 基础

练习题答案 1. 数字配对 考点&#xff1a;字符串&#xff1a;str( )、整型数&#xff1a;int( )、浮点数&#xff1a;float( ) # 方法一 a 5 b int(input("请输入数字5&#xff1a;"))while True:if b a:breakb input("配对失败&#xff0c;请重新输入或点…