关于 Vue 样式的七个你(可能)不知道的技巧
创始人
2025-07-05 18:20:17
0

单文件组件由三个不同的实体组成:模板、脚本和样式。所有这些都很重要,但后者往往被忽视,尽管它可能会变得复杂,并经常导致挫折和错误。更好地理解可以改进代码审查并减少调试时间。

这里有 7 个小贴士可以帮助你:

  • 1.样式作用域和插槽内容
  • 2.作用域选择器性能
  • 3.全局样式
  • 4.样式中的 Javascript 变量
  • 5.CSS 模块
  • 6.CSS 与 SCSS 中的变量
  • 7.SCSS include 与 extend

1.样式作用域和插槽内容

将样式的作用域限定为只影响当前组件,是防止组件耦合和意外副作用的有效策略。

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



to



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

其编译为:

.a[data-v-7ba5bd90] .b {
  /* ... */
}

使用插槽选择器对插槽内的内容也是如此。

2.作用域选择器性能

作用域样式不会消除对类的需求。由于 CSS 选择器的工作方式,当使用作用域时,p { color: red } 的速度会慢很多倍。如果使用类来代替,性能方面的影响可以忽略不计。







3.全局样式

影响整个应用程序的样式可能不是一个好主意。如果您还是想这么做,可以将作用域样式与非作用域样式混合使用,或者使用 :global 伪选择器

4.样式中的 Javascript 变量

自 Vue 3.2 版起,可以在样式标签内使用 v-bind。这可以带来一些有趣的用例,比如只需几行代码就能实现颜色选择器。





一个更高级的用例是使可重用应用程序图标组件的图标大小动态化。





5.CSS 模块

只需在样式标签中添加 module 属性,即可立即支持 CSS 模块。这些类会通过 $style 变量自动显示在模板中。



6.CSS 与 SCSS 中的变量

SCSS 变量是我们编写 CSS 方式的一次重大变革。在使用预处理器之前,使用变量是不可能的。此后,CSS 迎头赶上,现在所有主流浏览器都支持 CSS 变量。CSS 变量提供了 SCSS 变量所能做到的一切,此外还提供了更简便的主题功能,因此在这场争论中,CSS 变量明显胜出。

7.SCSS include 与 extend

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

@include 帮助程序用于包含在 mixin 块中编写的代码。



生成的 CSS 将根据需要多次重复代码

.error-text {
  color: red;
  font-size: 24px;
}

.error-notification {
  color: red;
  border: 1px solid red;
  padding: 8px;
}

这里的 error mixin 只有一条规则,但在实际应用中通常会有更复杂的 mixin。

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



生成的代码为:

.error-notification,
.error-text {
  color: red;
}

.error-text {
  font-size: 24px;
}

.error-notification {
  border: 1px solid red;
  padding: 8px;
}

这里的一般规则是选择 extend,除非你想在 mixin 中使用一个参数,在这种情况下,只有 include 才有效。

原文:https://fadamakis.com/7-quick-tips-about-vue-styles-you-might-didnt-know-5ec2fcecb384

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...