Vue 样式技巧总结与整理[中级局]

SFC(单文件组件)由 3 个不同的实体组成:模板、脚本和样式。三者都很重要,但后者往往被忽视,即使它可能变得复杂,且经常导致挫折和 bug。

更好的理解可以改善代码审查并减少调试时间。

这里有 7 个奇技淫巧来辅助你:

  1. 设置作用域和插槽样式
  2. scoped 选择器的性能
  3. 全局样式
  4. 样式中的 JS 变量
  5. CSS 模块
  6. CSS 与 SCSS 的变量
  7. SCSS include vs extend SCSS

1. 设置作用域和插槽样式

将样式的范围限制为能且仅能影响当前组件是一个优秀策略,这可以防止组件耦合和意外的副作用。

它通过添加 scoped 属性转换以下内容来实现:

 编译后将会被转换为:

如果您想让样式影响子组件,您可以使用 deep 选择器:

 编译后将被转变为:

 对于使用了 slotted 选择器的插槽内容也同理可得:

2. scoped 选择器的性能

scope(作用域)样式并不消除对 class 的需要。由于 CSS选择器的工作方式,scoped 中的 p { color: red } 会慢很多倍。如果您 诉诸 class 来代替,那么性能影响可忽略不计。

3. 全局样式

影响整个 app 的样式可能不是一个好主意。如果您想这样做,您可以混用 scoped 和 unscoped 的样式,或者使用 :global 伪选择器:

4. 样式中的 JS 变量

从 Vue 3.2 开始,可以在 <style> 标签内使用 v-bind。这可能孵化某些有趣的用例,比如用几行代码实现颜色选择器。

更高级的用例是使 可复用 app 图标组件 的图标大小动态化:

5. CSS 模块

只需在 <style> 标签中添加 module 属性即可开箱即用地支持 CSS 模块。这些 class 会通过 $style 变量自动在模板中公开。

6. CSS 与 SCSS 的变量

SCSS 变量是我们编写 CSS 方式的一次重大革命。在预处理器以前使用变量是不可能事件。从那时起,CSS 择善而从并且 CSS 变量现在被所有主流浏览器支持。祂们提供了 SCSS 变量的等价行为,还提供了更简单的主题功能,这使祂们在这场博弈中成为有目共睹的赢家。

7. SCSS include Vs extend

这两个 SCSS 辅助经常会混淆,因为它们都可以用来减少 SCSS 代码重复。您应该注意 CSS 输出中的若干细微差别。

@include 辅助用于包裹 mixin 块中编写的代码。

生成的 CSS 将按需多次重复代码:

这里的 error mixin 有且仅有保留一条规则,但通常在现实世界的 app 中会存在更复杂的 mixin。

另一方面,当元素几乎相同时,@extend 更有用。

 这生成的代码是:

这里的一般规则是选择 extend,除非您想在 mixin 中使用有且仅有 include 能奏效的参数。 

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

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

相关文章

[StartingPoint][Tier2]Archetype

Task 1 Which TCP port is hosting a database server? (哪个端口开放了数据库服务) $ nmap 10.129.95.187 -sC --min-rate 1000 1433 Task 2 What is the name of the non-Administrative share available over SMB? (哪个非管理共享提供了SMB?) $ smbclient -N -L 1…

Rsync——远程同步命令

目录 一、关于Rsync 1.定义 2.Rsync同步方式 3.备份的方式 4.Rsync命令 5.配置源的两种表达方法 二、配置服务端与客户端的实验——下载 1.准备工作 2.服务端配置 3.客户端配置同步 4.免交互数据同步 5.源服务器删除数据是否会同步 6.可以定期执行数据同步 三、关…

JVM的简单介绍

目录 一、JVM的简单介绍 JVM的执行流程 二、JVM中的内存区域划分 1、堆&#xff08;只有一份&#xff09; 2、栈&#xff08;可能有N份&#xff09; 3、程序计数器&#xff08;可能有N份&#xff09; 4、元数据区&#xff08;只有一份&#xff09; 经典笔试题 三、JVM…

2024.3.28力扣每日一题——访问完所有房间的第一天

2024.3.28 题目来源我的题解方法一 模拟方法二 动态规划 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1997 我的题解 方法一 模拟 使用一个Set存储已经访问过的房间号&#xff0c;直到Set中的元素个数等于房间数时停止模拟。 时间复杂度&#xff1a;O(day)。能够访问…

信息管理管理工程习题【1~4章】

1、将十进制68转换成二进制为&#xff08; &#xff09;&#xff0c;转换成八进制为&#xff08; &#xff09;&#xff0c;转换成十六进制为&#xff08; &#xff09;。 A. 1000100 102 40 B. 1000100 104 44 C. 1000101 102 40 D. 1000110 104 44 【答案】&#xff1a;B 2、…

如何恢复被.locked勒索病毒加密的服务器和数据库?

.locked勒索病毒有什么特点&#xff1f; .locked勒索病毒的特点主要包括以下几个方面&#xff1a; 文件加密&#xff1a;.locked勒索病毒会对受感染设备上的所有文件进行加密&#xff0c;包括图片、文档、视频和其他各种类型的重要文件。一旦文件被加密&#xff0c;文件的扩展…

淘宝商品描述API接口:轻松获取商品信息的新途径

淘宝商品描述API接口是淘宝开放平台提供的一种高效、便捷的新途径&#xff0c;旨在帮助开发者轻松获取淘宝商品的详细描述信息。通过这一接口&#xff0c;商家、开发者和用户都能获得商品标题、描述、属性、价格、图片等关键信息&#xff0c;从而满足各种业务需求。 在使用淘宝…

【Trick】AIGC翻译润色

1&#xff1a;可尝试在chat bar中提前输入以下内容&#xff1a; I want you to act as an English translator, spelling corrector and improver. I will speak to you in any language and you will detect the language, translate it and answer in the corrected and imp…

指针的深入理解(六)

指针的深入理解&#xff08;六&#xff09; 个人主页&#xff1a;大白的编程日记 感谢遇见&#xff0c;我们一起学习进步&#xff01; 文章目录 指针的深入理解&#xff08;六&#xff09;前言一. sizeof和strlen1.1sizeof1.2strlen1.3sizeof和strlen对比 二.数组名和指针加减…

前端html+css+js常用总结快速入门

&#x1f525;博客主页&#xff1a; A_SHOWY&#x1f3a5;系列专栏&#xff1a;力扣刷题总结录 数据结构 云计算 数字图像处理 力扣每日一题_ 学习前端全套所有技术性价比低下且容易忘记&#xff0c;先入门学会所有基础的语法&#xff08;cssjsheml&#xff09;&#xff…

深度挖掘商品信息,jd.item_get API助您呈现商品全面规格参数

深度挖掘商品信息&#xff0c;特别是在电商平台上&#xff0c;对于商家、开发者和用户来说都至关重要。jd.item_get API作为京东开放平台提供的一个强大工具&#xff0c;能够帮助用户轻松获取商品的全面规格参数&#xff0c;进而为商品分析、推荐、比较等提供有力的数据支撑。 …

using和typename在C++中的用法

using关键字有两个主要用途&#xff1a; 1.类型别名&#xff1a;使用using可以为类型创建新的名称&#xff0c;这在模板编程中尤其有用。 using integer int; integer a 5; // 这里的integer就是int类型2.命名空间&#xff1a;using可以用来引入命名空间中的名字&#xff0c…

Liquid的Covenants:处理比特币脚本中的金额

1. 引言 Covenants契约是一种允许introspection自省的结构&#xff1a; 交易output可以对花费其的交易施加条件&#xff08;超出特定的“必须提供自身的有效签名和特定的公钥”&#xff09;。 Rusty Russell 之前研究过Covenants: Examining ScriptPubkeys in Bitcoin Scrip…

两相欠压继电器 WY-35A3 额定输入电压100V 导轨安装 JOSEF约瑟

系列型号&#xff1a; WY-35A4电压继电器&#xff1b;WY-35B4电压继电器&#xff1b; WY-35C4电压继电器&#xff1b;WY-35D4电压继电器&#xff1b; WY-35A4D电压继电器&#xff1b;WY-35A4T电压继电器&#xff1b; WY-35B4D电压继电器&#xff1b;WY-35B4T电压继电器&#xf…

人工智能时代过失犯理论的挑战与应对—以自动驾驶汽车交通肇事为例

内容提要以自动驾驶汽车为代表的人工智能产品致害所涉犯罪主体复杂多样、前置性规范缺失, 以及人工智能产品固有的自主与黑箱特性等问题给过失犯理论带来了变革的压力与挑战。传统过失犯理论、新过失犯理论以及客观归责理论都无法解决人工智能产品致害所涉过失犯罪认定问题。人…

【VMware】虚拟机及镜像Ubuntu安装

Vmware 一.VM是什么&#xff1f;有什么用&#xff1f;二.下载VMware Wworkstation Pro三.安装虚拟机四.安装镜像 一.VM是什么&#xff1f;有什么用&#xff1f; vmware是一款运行在windows系统上的虚拟机软件&#xff0c;可以虚拟出一台计算机硬件&#xff0c;方便安装各类操作…

K8s学习七(服务发现_2)

Ingress Service 主要用于集群内部的通信和负载均衡&#xff0c;而 Ingress 则是用于将服务暴露到集群外部&#xff0c;并提供灵活的 HTTP 路由规则。在实际应用中&#xff0c;它们通常结合使用&#xff0c;Service 提供内部通信和负载均衡&#xff0c;Ingress 提供外部访问和…

网络工程师笔记18(关于网络的一些基本知识)

网络的分类 介绍计算机网络的基本概念&#xff0c;这一章最主要的内容是计算机网络的体系结构-ISO 开放系统互连参考模型&#xff0c;其中的基本概念&#xff0c;例如协议实体、协议数据单元&#xff0c;服务数据单元、面向连接的服务和无连接的服务、服务原语、服务访问点、相…

蓝桥杯练习题 —— 高精度加法(python)

python优势 # encoding utf-8 # 开发者&#xff1a;xxx # 开发时间&#xff1a; 16:48 # "Stay hungry&#xff0c;stay foolish."a int(input()) b int(input())print(a b) 正常 # encoding utf-8 # 开发者&#xff1a;xxx # 开发时间&#xff1a; 16:48 #…

大数据分层存储架构:ODS、DWD、DWM与DWS详解

在大数据领域中&#xff0c;ODS、DWD、DWM和DWS代表了数据仓库的不同层次&#xff0c;它们共同构成了大数据的分层存储结构。这种结构的设计有助于提高数据查询效率&#xff0c;降低成本&#xff0c;并满足不同的业务需求。 ODS&#xff08;Operational Data Store&#xff09…