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 能奏效的参数。 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CSS设置网页颜色

目录 前言&#xff1a; 1.颜色名字&#xff1a; 2.十六进制码&#xff1a; 3.RGB&#xff1a; 4.RGBA&#xff1a; 5.HSL&#xff1a; 1.hue&#xff1a; 2.saturation&#xff1a; 3.lightness&#xff1a; 6.HSLA&#xff1a; 前言&#xff1a; 我们在电脑显示器&…

高血压的常见症状,你是否了解并警惕?

高血压是一种慢性心血管疾病&#xff0c;它的形成和发展与很多种因素密切相关。导致高血压的重要因素之一就是不良的生活饮食习惯。 高血压严重危害着人的心脏、肾脏、大脑等这些人体重要的器官&#xff0c;会容易带来心脏病、肾功能衰竭等一系列疾病。今天我在来为大家讲解一…

CorelDRAW2024序列号破解版下载以及CorelDRAW新功能介绍

CorelDRAW Graphics Suite 2024破解版介绍 CorelDRAW Graphics Suite 2024 破解版是领先的专业图形设计软件套件&#xff0c;旨在提供多个精心设计的工具和丰富的功能&#xff0c;轻松提高您的技能睡哦平&#xff0c;您可以更好的完成矢量插图、完美的布局、高级的照片编辑和高…

Jeecg commonController 任意文件上传漏洞复现

0x01 产品简介 Jeecg(J2EE Code Generation)是一款基于代码生成器的低代码开发平台,使用JEECG可以简单快速地开发出企业级的Web应用系统。 0x02 漏洞概述 JEECG(J2EE Code Generation) 是开源的代码生成平台,目前官方已停止维护。由于 /api 接口鉴权时未过滤路径遍历,攻…

中高级前端? 这些一元运算符,你真的搞清楚了吗

前言 一元运算符&#xff0c;不太起眼&#xff0c;作用很大&#xff0c;请别忽视她&#xff01; 走近她&#xff0c;爱上她&#xff01; 定义 只需要一个操作数的运算符称为一元运算符。 还是代码容易懂&#xff1a; 1 // 一个操作数1 2 // 两个操作数一元运算符清单 运…

基于Springboot的学校防疫物资管理平台(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的学校防疫物资管理平台&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

安装typora 免费版(beta版)

前言 typora 2021年11 月 23日后&#xff0c;推出付费的正式版本。不想花钱购买&#xff0c;除了破解脚本&#xff0c;还有其他的办法吗&#xff1f; 程序下载 答案是有的。可以安装免费的Typora Beta 版本&#xff0c;该旧版本基本的功能一应俱全&#xff0c;应付轻度的mar…

若依自带vue-cropper上传图片(可旋转、缩放)

2024.4.4今天我学习了如何使用若依的vue-cropper上传图片组件&#xff0c;在工作中遇到一个需求&#xff0c;需要对上传的图片进行旋转的操作&#xff0c;然后我先找到el-upload组件&#xff0c;使用之后发现它有一个自动上传和非自动上传的功能&#xff0c;是不是就可以通过非…

【React】useState为何返回数组而非对象

useState的正确语法如下 const [count, setCount] useState(0)通过打印可以看到useState返回一个数组&#xff0c;那么为何不返回对象呢 涉及到数组与对象间解构方式的差异 数组的解构&#xff1a;根据索引 const [a,,b] [1,2,3] console.log(a) // 1 console.log(b) // 3…

CentOS7安装MySQL8.0.28(持续)

第一步 &#xff1a;下载mysql MySQL https://www.mysql.com/

【java探索之旅】逻辑控制掌握 顺序结构 分支语句

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Java编程秘籍 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、逻辑控制的概念二、顺序结构三、分支结构3.1 if语句3.2 if习题巩固3.3 细节注意项…

阿里云服务器地域哪个便宜?哪个地域优惠?

目前2024年阿里云服务器地域对比哪个价格更优惠&#xff1f;华北6&#xff08;乌兰察布&#xff09;、华北3&#xff08;张家口&#xff09;、华北1&#xff08;青岛&#xff09;和华南2&#xff08;河源&#xff09;地域更便宜&#xff0c;云服务器吧yunfuwuqiba.com整理阿里云…

快排序解读

排序算法是计算机科学中不可或缺的一部分&#xff0c;它们在各种数据处理场景中发挥着关键作用。在众多排序算法中&#xff0c;快速排序以其高效的性能和简洁的实现成为了许多程序员的首选。今天&#xff0c;我们就来深入剖析快速排序算法&#xff0c;了解其原理、实现方式以及…

ES学习日记(五)-------插件head安装

接上回,必要的git和node已经装完了,现在开始装head 回到es集群项目里找到plugins(插件文件夹下), 存在安装在plugins启动es报错的情况,报错信息如图一,解决方案就是换个目录,不要放在plugin目录下 git clone https://github.com/mobz/elasticsearch-head.git 打开远程登陆,默…

浅谈偏向锁、轻量级锁、重量级锁

为了换取性能&#xff0c;JVM在内置锁上做了非常多的优化&#xff0c;膨胀式的锁分配策略就是其一。理解偏向锁、轻量级锁、重量级锁的要解决的基本问题&#xff0c;几种锁的分配和膨胀过程&#xff0c;有助于编写并优化基于锁的并发程序。 内置锁的分配和膨胀过程较为复杂&…

Python学习: 错误和异常

Python 语法错误 解析错误(Parsing Error)通常指的是程序无法正确地解析(识别、分析)所给定的代码,通常是由于代码中存在语法错误或者其他无法理解的结构导致的。这可能是由于缺少括号、缩进错误、未关闭的引号或其他括号等问题造成的。 语法错误(Syntax Error)是指程序…

创新性的智慧公厕技术研发与应用

智慧公厕&#xff0c;作为城市基础设施的重要组成部分&#xff0c;扮演着提供舒适便捷卫生服务的角色。智慧公厕源头实力厂家广州中期科技有限公司&#xff0c;通过技术创新与应用升级&#xff0c;打造标杆性的智慧公厕整体解决方案。通过创新性的技术应用&#xff0c;智慧公厕…

Redis入门--头歌实验Redis事务与流水线

任务描述 本关任务&#xff1a;编写一个商品交易平台的后端处理逻辑。 相关知识 手机、互联网普遍的当下&#xff0c;系统会同时处理多客户端的请求&#xff0c;而在多客户端同时处理相同的数据时&#xff0c;数据一致性就变得十分重要&#xff0c;稍不谨慎的操作就会导致数据出…

Linux操作系统逻辑、线性、物理地址,带你轻松理解Linux运维-Hook机制

虚拟内存&#xff08;Virtual Memory&#xff09;是指计算机呈现出要比实际拥有的内存大得多的内存量。因此他允许程式员编制并运行比实际系统拥有的内存大得多的程式。这使得许多大型项目也能够在具有有限内存资源的系统上实现。一个非常恰当的比喻是&#xff1a;你不必非常长…

Replication Controller、ReplicaSet和Deployment(Kubernetes调度系列,结合操作命令讲解)

目录 一、概述 二、Replication Controller 2.1 Replication Controller 说明 2.2 Replication Controller 举例 三、ReplicaSet 3.1 ReplicaSet说明 3.2 ReplicaSet 举例 四、无状态应用管理Deployment 4.1 概述 4.2 创建Deployment 4.2.1 Deployment 标签内容解析 …