Vue3的三种样式控制及实现原理

你好,我是沐爸,欢迎点赞、收藏和关注。个人知乎

Vue3中一共有三种样式控制,分别是全局样式控制、局部作用域样式控制和深度样式控制,今天我们一起看下这三种样式控制的使用,以及实现的原理是什么。

一、全局样式控制

在组件中定义的样式,默认是全局有效的。也就是说,无论对于根组件App.vue,还是普通的视图组件或公共组件,在style标签中定义的样式都是全局样式。

原因在组件标签中的样式,在打包时没有额外添加其他限制条件,自动成为了全局样式。

App.vue

<template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" class="p-20" /><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><RouterView />
</template><style>
a {color: red !important;
}
</style>

示例中的样式会导致全局的a标签都是红色。

image.png

二、局部作用域样式控制

全局样式的弊端也很明显:样式很可能产生冲突和覆盖。局部作用域样式只在当前组件内部生效,不影响其他组件(可能影响子组件的根标签,如果你在组件上添加class并定义样式的话)。使用起来也很方便,只需要在style标签上添加scoped属性即可。

App.vue

<template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" class="p-20" /><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><RouterView />
</template><style scoped>
a {color: red !important;
}
.p-20 {padding: 20px;
}
</style>

HelloWorld.vue

<template><div class="greetings"><h1 class="green">{{ msg }}</h1><h3>You’ve successfully created a project with<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.</h3></div>
</template><style scoped>
a {color: green;
}
.greetings {padding: 20px;
}
</style>

App.vue中定义的样式,a标签的样式只在App.vue中生效,不会影响HelloWorld.vue中的a标签,而.p-20则会影响HelloWorld.vue的根标签的样式。

局部作用域样式的原理并不复杂,Vue内部主要做了两件事情:

(1)一旦style声明为scoped,当前组件的所有标签和子组件的根标签,都会自动动添加名为 data-v-xxx的唯一标识。

(2)在打包运行的页面中,样式选择器的最右侧添加了名为data-v-xxx 的属性选择器,导致只有该属性的元素才会具有该属性选择器的样式。

image.png

三、深度样式控制

如何让组件的局部样式影响子组件的子标签呢?这就需要使用Vue提供的深度作用域选择器来实现。只需要将要修改的标签用":deep()"包裹即可。

例如我们要在App.vue中修改HelloWorld.vue组件的h1标签的下外边距,App.vue可以这样设置:

<template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><RouterView />
</template><style scoped>
.wrapper :deep(.green) {margin-bottom: 30px;
}
</style>

深度样式控制的实现原理是什么?deep声明将选中标签原本具有的data-v-xxx 的属性选择器给移除了。如果不明白,详细看下方的截图:

image.png

四、总结

你有可能看着本篇博客的内容有些眼熟,如果你读过《剑指Vue3–入门到实践》,内容来自4.3章节。今天的分享更像是一个学习笔记,分享的示例和语言组织都是个人感悟,并非照搬原文。

好了,分享结束,谢谢点赞,下期再见。

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

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

相关文章

NRK3301语音识别芯片在汽车内饰氛围灯上的应用方案解析

随着智能汽车的快速发展&#xff0c;车载语音交互技术逐渐成为提升驾驶体验的关键技术之一。传统的汽车内饰氛围灯语音识别系统往往依赖于手动操作&#xff0c;不仅操作繁琐&#xff0c;而且在驾驶过程中容易分散驾驶员的注意力。因此&#xff0c;开发一种高效、便捷的汽车内饰…

SpringBoot集成Redis

目录 12.1 配置文件12.2 防火墙12.3 Jedis(一般不用了&#xff0c;了解即可)1.介绍2.步骤3.写YML4.主启动5.业务类 12.4 Lettuce1.介绍以及和Jedis的区别2.步骤1.改pom2.业务类 12.5 Redis Template(推荐)1.连接单机1.改pom2.写YML3.业务类3.1配置类3.2 service3.3 controller测…

Stable Diffusion的微调方法原理总结

在深度学习领域&#xff0c;Stable Diffusion作为一种强大的生成模型&#xff0c;正逐渐成为图像和视频生成领域的热门话题。它不仅能够模拟复杂的自然和人工系统中的随机演化行为&#xff0c;还通过一系列微调方法&#xff0c;显著提升了模型在特定任务上的性能。本文旨在深入…

开放式耳机别人能听到吗?开放式的防漏音效果到底好不好?

开放式耳机的设计是允许一部分声音泄露出来&#xff0c;所以当您使用开放式耳机听音乐或通话时&#xff0c;周围的人可能会有所察觉。具体别人能听到多少&#xff0c;取决于几个因素&#xff1a; 音量大小&#xff1a;如果音量设置得比较高&#xff0c;那么周围的人更容易听到…

多线程面试常问

一、创建线程的几种方式 1、继承Thread类并重写run()方法。 public class MyThread extends Thread {Overridepublic void run() {System.out.println("通过集成 Thread 类实现线程"); } } // 如何使用 new MyThread().start() 2、实现Runnable接口并重写run()方法…

Linux文件系统及常见快捷键

Linux文件系统及常用快捷键 (只是对linux简单的介绍,新手常用的快捷键) 1、Linux文件系统结构 windows文件系统 Windows操作系统将硬盘进行分区&#xff0c;然后用 A 、 B 、 C 、 D 、等符号标识。存取文件时一定要清楚存放在哪个磁盘的哪个目录下。 Linux 文件系统结构 …

基于FPGA的SD NAND Flash数据读写实现

1、存储芯片分类 目前市面上的存储芯片&#xff0c;大致可以将其分为3大类&#xff1a; ① EEPROM EEPROM (Electrically Erasable Programmable read only memory)是指带电可擦可编程只读存储器&#xff0c;是一种掉电后数据不丢失的存储芯片。EEPROM 可以在电脑上或专用设备…

腾讯云授权子用户账号域名备案

官网文档没说清楚 2.在购买了服务器的账号生成授权码 2.填写子账号id 3.子账号即可弹出备案按钮了

Wemos D1 Mini pro/ nodeMcu / ESP8266 驱动 240*320 ILI9341 SPI液晶屏

Wemos D1 Mini / nodeMcu / ESP8266 驱动 240*320 ILI9341 SPI液晶屏 效果展示器件硬件连接引脚连接原理图引脚对照表 安装TFT_eSPI库TFT_eSPI库中User_Setup.h文件的参数修改User_Setup.h文件的位置User_Setup.h文件中需要修改的参数User_Setup.h完成源码 例程 缘起&#xff1…

【3天速成Python基础语法(3)】

文章目录 1 :peach:库的基本认识:peach:2 :peach:标准库:peach:3 :peach:第三方库:peach: 1 &#x1f351;库的基本认识&#x1f351; 库 就是是别人已经写好了的代码, 可以让我们直接拿来用。一个编程语言能不能流行起来, 一方面取决于语法是否简单方便容易学习, 一方面取决于…

安捷伦色谱仪器LabVIEW软件替换与禁运配件开发

可行性分析及实现路径 可行性&#xff1a; 软件替换&#xff1a; 驱动程序支持&#xff1a; 要实现LabVIEW对安捷伦色谱仪器的控制&#xff0c;需要检查安捷伦是否提供LabVIEW驱动程序。如果没有现成的驱动&#xff0c;则可能需要开发自定义的驱动程序&#xff0c;通过LabVIEW…

JavaWeb基础 -- Servlet

JavaWeb基础 – Servlet 1.Servlet简介 1.1 Servlet是什么 Servlet本身是用Java编写的&#xff0c;运行在Web服务器上的应用程序&#xff0c;并作为Web浏览器和其他HTTP客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。Servlet可以收集来自网页表单输入的数据…

InstantID: Zero-shot Identity-Preserving Generation in Seconds

https://arxiv.org/pdf/2401.07519#page9.73https://github.com/instantX-research/InstantID?tabreadme-ov-filehttps://github.com/instantX-research/InstantID/pull/89/files 问题引入 目标是生成和reference图片相符合的图片&#xff0c;特别是人脸&#xff1b;现在基于…

汽车耐老化太阳跟踪聚光户外加速老化试验

汽车耐老化太阳跟踪聚光户外加速老化试验方法是一种模拟太阳光照、热和潮湿环境条件下&#xff0c;测试汽车外饰材料耐老化性能的试验方法。此方法主要用于评估材料在遭受日光、热和潮湿影响下的相对耐老化性&#xff0c;以确定其在实际使用过程中的耐久性。 1. 范围 本标准适…

计算机类-本科毕业设计快速通关攻略-(选题-创新点-论文框架-论文绘图)

一、推荐选题 大多数人都没有什么基础&#xff0c;不推荐做系统类的&#xff0c;建议走深度学习方向&#xff0c;简单易上手&#xff0c;下面将给出几个我认为不错的方向。 1、目标检测类 目标检测是每年深度学习毕业设计的主流&#xff0c;如Faster R-CNN、YOLO、SSD等算法…

Linux网络配置和系统管理

Linux网络配置和系统管理 1.查看网络IP和网关windows系统主机 IP虚拟机 IP虚拟机网关网络检测命令 ping网络连接模式 2.配置静态IP地址(NAT网络连接模式)前提说明配置主机的VMware Network Adapter VMnet8 网卡静态IP地址注意点虚拟机配置静态ip修改后ping命令测试修改虚拟机静…

使用Rclone从Google Drive 下载大文件

前言 使用浏览器、或FDM、wget、curl等下载工具&#xff0c;从 Google Drive 下载大文件时经常会遇到中断或下载失败的情况&#xff0c;这一般是由于网络不稳定、Google Drive 的限制、或文件太大导致。 虽然使用 gdown 能一定程度避免上述问题&#xff0c;但对于非常大的文件…

在国产芯片上实现YOLOv5/v8图像AI识别-【2.5】yolov8使用C++部署在RK3588更多内容见视频

本专栏主要是提供一种国产化图像识别的解决方案&#xff0c;专栏中实现了YOLOv5/v8在国产化芯片上的使用部署&#xff0c;并可以实现网页端实时查看。根据自己的具体需求可以直接产品化部署使用。 B站配套视频&#xff1a;https://www.bilibili.com/video/BV1or421T74f 背景…

编写 prometheus exporter监控 mysql group replication

用 prometheus 监控 mysql&#xff0c;之前用 mysqld_exporter 收集mysql 的监控指标&#xff0c;发现并没有 mysql 组复制状态的指标。只能自己收集了&#xff0c;编写脚本收集指标推送到 pushgateway&#xff0c;这个办法更简单但是扩缩容不是很方便。下面用 python 编写的一…

kotlin

kotlin 多个耗时操作需拿上一个结果livedata按顺序执行 在Kotlin中&#xff0c;如果你想要按顺序执行多个耗时操作并获取上一个操作的结果&#xff0c;你可以使用LiveData和Transformations.switchMap来实现。以下是一个简化的例子&#xff1a; class MyRepository(private va…