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

news/2024/4/17 7:23:14

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


https://www.xjx100.cn/news/3366023.html

相关文章

mysql闲谈

如何定位慢查询 1、测试环境压测时&#xff0c;有的接口非常慢&#xff0c;响应时间超过2秒以上。当时系统部署了运维的监控系统Skywalking&#xff0c;在展示报表中可以看到是哪儿个接口慢&#xff0c;可以看到SQL具体执行时间。 2、如果没有类似的监控系统&#xff0c;在Mysq…

网络原理 - HTTP / HTTPS(2)——http请求

目录 一、认识 “方法”&#xff08;method&#xff09; 1、GET方法 2、POST方法 &#xff08;1&#xff09;登录 &#xff08;2&#xff09;上传 &#xff08;3&#xff09;GET和POST使用习惯 3、GET方法和POST方法的区别 正确滴 关于一些网上的说法&#xff0c;错误滴…

*** ERROR L105: PUBLIC REFERS TO IGNORED SEGMENT

今天在使用KEIL编程的时候&#xff0c;出现了以下错误&#xff1a; *** ERROR L105: PUBLIC REFERS TO IGNORED SEGMENT 在不断检查代码逻辑和语法的情况下&#xff0c;并未发现任何错误。后来才发现是data空间已经不够用。在此记录一下解决方案。 出现以上错误的原因主要是…

全流程基于GIS、python机器学习技术的地质灾害风险评价与信息化建库实践应用

入门篇&#xff0c;ArcGIS软件的快速入门与GIS数据源的获取与理解&#xff1b;方法篇&#xff0c;致灾因子提取方法、灾害危险性因子分析指标体系的建立方法和灾害危险性评价模型构建方法&#xff1b;拓展篇&#xff0c;GIS在灾害重建中的应用方法&#xff1b;高阶篇&#xff1…

STM32学习笔记(11_2)- W25Q64简介和工作原理

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 本期学…

算法——逆波兰式

http://t.csdnimg.cn/Wg8vu 逆波兰式思路&#xff1a; 对于每个元素&#xff0c;它检查是否是一个操作符&#xff08;“”、“-”、“*” 或 “/”&#xff09;。如果是&#xff0c;它就从栈中弹出两个元素&#xff0c;执行相应的操作&#xff0c;然后将结果推回到栈中。如果…

day 1 将go基础知识复习一下

本文章主要是写自己在做这个项目时候遇到的一些困难&#xff0c;如果都是做这个项目的&#xff08;后端&#xff09;&#xff0c;可以看看 这个是项目网址 gin-vue-admin : https://github.com/flipped-aurora/gin-vue-admin 在此表示对大神奇淼的敬佩 首先&#xff0c;我们…

hibernate OID映射对象标识符

OID映射对象标识符 OID存在的意义 关系型数据库通过主键来区分同一张表的不同数据&#xff0c;java语言使用内存地址来区分同一类的不同对象&#xff0c;hibernate则使用OID来同一两者之间的矛盾&#xff0c;在运行时&#xff0c;hibernate通过OID来维持java对象和数据库表中记…