Vue 样式技巧总结与整理[中级局]
SFC(单文件组件)由 3 个不同的实体组成:模板、脚本和样式。三者都很重要,但后者往往被忽视,即使它可能变得复杂,且经常导致挫折和 bug。
更好的理解可以改善代码审查并减少调试时间。
这里有 7 个奇技淫巧来辅助你:
- 设置作用域和插槽样式
- scoped 选择器的性能
- 全局样式
- 样式中的 JS 变量
- CSS 模块
- CSS 与 SCSS 的变量
- 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 能奏效的参数。
相关文章:
Vue 样式技巧总结与整理[中级局]
SFC(单文件组件)由 3 个不同的实体组成:模板、脚本和样式。三者都很重要,但后者往往被忽视,即使它可能变得复杂,且经常导致挫折和 bug。 更好的理解可以改善代码审查并减少调试时间。 这里有 7 个奇技淫巧…...
cesium加载.tif格式文件
最近项目中有需要直接加载三方给的后缀名tif格式的文件 <script src"https://cdn.jsdelivr.net/npm/geotiff"></script> 或者 yarn add geotiff npm install geotiff 新建tifs.js import GeoTIFF, { fromBlob, fromUrl, fromArrayBuffer } from geotif…...
分布式全闪占比剧增 152%,2023 年企业存储市场报告发布
近日,IDC 发布了 2023 年度的中国存储市场报告。根据该报告,在 2023 年软件定义存储的市场占比进一步扩大,分布式全闪的增长尤其亮眼,其市场份额从 2022 年的 7% 剧增到 2023 年的 17.7%,增长了 152%。 01 中国企业存…...
LeetCode 707. 设计链表(单链表、(非循环)双链表 模板)
你可以选择使用单链表或者双链表,设计并实现自己的链表。 单链表中的节点应该具备两个属性:val 和 next 。val 是当前节点的值,next 是指向下一个节点的指针/引用。 如果是双向链表,则还需要属性 prev 以指示链表中的上一个节点…...
深入了解Flutter中Overlay的介绍以及使用
Flutter Overlay 介绍 在 Flutter 中,Overlay 是一种特殊的 Widget,它可以用来在应用程序的其他部分之上显示内容。Overlay 非常适合用于显示模态对话框、弹出菜单、工具提示等。 Overlay 的工作原理 Overlay 位于 Flutter 的渲染树之外,这…...
文本直接生成2分钟视频,即将开源模型StreamingT2V
Picsart人工智能研究所、德克萨斯大学和SHI实验室的研究人员联合推出了StreamingT2V视频模型。通过文本就能直接生成2分钟、1分钟等不同时间,动作一致、连贯、没有卡顿的高质量视频。 虽然StreamingT2V在视频质量、多元化等还无法与Sora媲美,但在高速运…...
时序预测 | Matlab实现SOM-BP自组织映射结合BP神经网络时间序列预测
时序预测 | Matlab实现SOM-BP自组织映射结合BP神经网络时间序列预测 目录 时序预测 | Matlab实现SOM-BP自组织映射结合BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现SOM-BP自组织映射结合BP神经网络时间序列预测(完整源码…...
FPGA高端图像处理开发板-->鲲叔4EV:12G-SDI、4K HDMI2.0、MIPI等接口谁敢与我争锋?
目录 前言鲲叔4EV----高端FPGA图像处理开发板核心板描述底板描述配套例程源码描述配套服务描述开发板测试视频演示开发板获取 前言 在CSDN写博客传播FPGA开发经验已经一年多了,帮助了不少人,也得罪了不少人,有的人用我的代码赢得了某些比赛、…...
linux练习-交互式传参
在shell脚本中,read 向用户显示一行文本并接受用户输入 #!/bin/bash read -p 依次输入你的姓名、年龄、家乡 name age home echo 我是$name,年龄$age,我来自$home...
【数据结构(一)】初识数据结构
❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ 🚚我的代码仓库: 33的代码仓库🚚 🫵🫵🫵关注我带你学更多数据结构知识 目录 1.前言2.集合架构3.时间和空间复杂度3.1算法效率3.2时间复杂度3.2.1大O的渐进…...
前端三剑客 —— CSS (第六节)
目录 内容回顾: 弹性布局属性介绍 案例演示 商品案例 布局分析 登录案例 网格布局 内容回顾: 变量:定义变量使用 --名称:值; 使用变量: 属性名:var(--名称)&a…...
MyBatis 解决上篇的参数绑定问题以及XML方式交互
前言 上文:MyBatis 初识简单操作-CSDN博客 上篇文章我们谈到的Spring中如何使用注解对Mysql进行交互 但是我们发现我们返回出来的数据明显有问题 我们发现后面三个字段的信息明显没有展示出来 下面我们来谈谈解决方案 解决方案 这里的原因本质上是因为mysql中和对象中的字段属性…...
Rust语言之属性宏(Attribute Macro)derive
文章目录 Rust语言之属性宏(Attribute Macro)derive Rust语言之属性宏(Attribute Macro)derive 属性宏是一种基于属性的宏,用于修改、扩展或注解 Rust 代码。它们通常用于为函数、结构体、枚举、模块等添加元数据或自…...
[技术闲聊]我对电路设计的理解(六)-原理图封装
电路设计的直观体现就是完整的原理图,绘制电路图阶段的第一步,绘制原理图封装库。 封装库一共有两种,一种是原理图封装库,一种是PCB封装库,如下图所示。 原理图封装和PCB封装之间的唯一关联就是 引脚位号,…...
算法(滑动窗口四)
1.串联所有单词的子串 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如,如果 words ["ab","cd","ef"]ÿ…...
学习记录:bazel和cmake运行终端指令
Bazel和CMake都是用于构建软件项目的工具,但它们之间有一些重要的区别和特点: Bazel: Bazel是由Google开发的构建和测试工具,用于构建大规模的软件项目。它采用一种称为“基于规则”的构建系统,它利用构建规则和依赖关…...
蓝桥杯刷题--python-37-分解质因数
3491. 完全平方数 - AcWing题库 nint(input()) res1 i2 while i*i<n: if n%i0: t0 while n%i0: n//i t1 if t%2: res*i i1 if n>1: res*n print(res) 4658. 质因数个数 - AcWing题库…...
Delphi编写的图片查看器
UNIT Unit17;INTERFACEUSESWinapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs,Vcl.StdCtrls, Vcl.ExtDlgs, Vcl.ExtCtrls, Vcl.Imaging.jpeg; //注意:要加入jpej 否侧浏览图…...
Swing中的FlowLayout/WrapLayout在打横排列时候如何做到置顶对齐
前言 最近在开发swing客户端时候碰到一个棘手的问题: Swing中的FlowLayout/WrapLayout在打横排列时候如何做到置顶对齐如果是vue或者react,一搜百度什么都出来了,swing的话,嗯。。。资料有点少而且大部分是stack overflow上面的…...
C# MES通信从入门到精通(8)——C#调用Webservice服务进行数据交互
前言 在上位机开发领域,使用webservice来访问客户的终端Mes系统是一项必备的技能,本文详细介绍了如何在c#中调用webservice服务,不仅介绍了使用添加服务引用直接调用webservice中的方法外还介绍了使用http的post方法调用webservice方法,过程详细且均为实战经验总结,对于初…...
从零开始手搓一个xv6内核页表:跟着MIT 6.S081源码一步步理解虚拟内存初始化
从零构建xv6内核页表:深入解析RISC-V虚拟内存初始化实战 在MIT 6.S081操作系统的学习过程中,xv6作为教学用精简内核,其虚拟内存实现是理解现代计算机内存管理的关键。本文将带您从第一行代码开始,完整复现xv6内核页表的构建过程&…...
nli-distilroberta-base惊艳案例:自动识别合同补充协议与主协议的潜在矛盾条款
nli-distilroberta-base惊艳案例:自动识别合同补充协议与主协议的潜在矛盾条款 1. 项目概述 在合同审查工作中,补充协议与主协议之间的条款一致性检查是法律从业者最头疼的问题之一。传统的人工比对方式不仅耗时费力,还容易遗漏关键矛盾点。…...
Stable Diffusion像素艺术工作站:Pixel Fashion Atelier支持LoRA在线热切换
Stable Diffusion像素艺术工作站:Pixel Fashion Atelier支持LoRA在线热切换 1. 像素时装锻造坊简介 Pixel Fashion Atelier是一款基于Stable Diffusion与Anything-v5的图像生成工作站,专为像素艺术创作而设计。与传统AI工具不同,它采用了复…...
从遥控器到智能家居:拆解一个25年前的NEC协议,如何至今仍在‘发光发热’
NEC红外协议:穿越25年的技术生命力与智能家居新应用 当你在智能音箱上说出"打开客厅空调"时,可能正触发着一套诞生于上世纪90年代的技术标准。NEC红外协议这个最初为电视遥控器设计的通信规范,如今仍在全球数以亿计的设备中默默工…...
告别蓝牙!用STM32F103和NRF24L01搭建低成本2.4G无线通信,实测传输距离与稳定性
STM32F103与NRF24L01构建高性能2.4G私有通信系统实战指南 在物联网设备爆发式增长的今天,无线通信模块的选择成为硬件开发者面临的首要难题。面对市面上琳琅满目的蓝牙、Wi-Fi和私有协议模块,如何根据项目需求选择最具性价比的解决方案?本文将…...
便携激光云高仪:精确测量云底高度、云层厚度等关键参数
便携激光云高仪是一种用于测量云层高度、厚度及分布情况的气象观测设备,广泛应用于气象监测、航空安全、环境研究等领域。其便携式设计特别适合野外作业和临时观测需求。设备通过激光脉冲探测云底高度,并实时分析云层垂直结构,为气象预报、灾…...
ai全程护航:让快马智能助手帮你搞定proteus安装与初学难题
最近在折腾Proteus仿真软件时,发现从安装到入门会遇到不少"坑"。好在发现了InsCode(快马)平台的AI辅助功能,整个过程变得轻松多了。这里分享下如何用AI搞定Proteus全流程难题的实践心得。 智能安装诊断 第一次安装Proteus时,遇到许…...
告别B站评论区识人难题!这个免费工具让你一键掌握用户背景
告别B站评论区识人难题!这个免费工具让你一键掌握用户背景 【免费下载链接】bilibili-comment-checker B站评论区自动标注成分,支持动态和关注识别以及手动输入 UID 识别 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-comment-checker …...
为什么你的Tinymce总是显示秘钥提示?深入解析富文本编辑器的授权机制
解密Tinymce授权机制:从技术原理到合规实践 每次启动项目时,那个突兀的"未授权"提示框是否让你感到困扰?作为前端开发领域的标配工具,Tinymce的授权机制远比表面看到的复杂。让我们拨开迷雾,从技术实现到商业…...
二相四线步进电机驱动全解析:从原理到Proteus仿真避坑指南
二相四线步进电机驱动全解析:从原理到Proteus仿真避坑指南 在工业自动化与嵌入式开发领域,步进电机因其精准的位置控制能力成为不可或缺的执行元件。而二相四线制步进电机凭借结构简单、成本低廉的优势,尤其受到电子工程师和创客群体的青睐。…...
