第五节——Vue 中如何编写样式

一、内联样式

复制代码
<template>
  <div style="color:'red'">
    红色
  </div>
</template>

二、在style标签中编写

1、创建learn-style.css文件

复制代码
.red { color: red; }

3、在文件中引入

复制代码
<template>
  <div class="red">
    红色
  </div>
</template>
<script>
import './learn-style.css';
</script>

三、样式污染问题

1、产生原因

Vue最终编译打包后都在一个html页面中,如果在两个组件中取一样类名分别引用在自身,那么后者会覆盖前者。默认情况下,只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效。也就是说并没有自己的局部作用域

2、解决思路

1、手动处理 (起不同的类名,但是项目一大就会导致类名很乱,不利于团队协作)

2、CSS IN JS : 以js的方式来处理css(推荐)

3、CSS IN JS

CSS IN JS是使用 JavaScript 编写 CSS 的统称,用来解决 CSS 样式冲突、覆盖等问题。

CSS IN JS 的具体实现有 50 多种,比如:React常用(CSS Modules、styled-components)、 Vue常用(<style scoped> 、css modules)等。

推荐使用:<style scoped> (脚手架自动集成,并且非常简单😄)

四、Scoped CSS

1、基本及使用

在style标签上使用scoped,当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

复制代码
<template>
  <div class="ex">hi</div>
</template>
<style scoped>
.ex {
  color: red;
}
</style>

2、原理解析

  • 每个 Vue 文件都将对应一个唯一的 id,该 id 根据文件路径名和内容 hash 生成,通过组合形成scopeId。
  • 编译 template 标签时,会为每个标签添加了当前组件的scopeId

复制代码
<div class="demo">test</div>
// 会被编译成:
<div class="demo" data-v-12e4e11e>test</div>
  • 编译 style 标签时,会根据当前组件的 scopeId 通过属性选择器和组合选择器输出样式,如:

    .demo{color: red;}
    // 会被编译成:
    .demo[data-v-12e4e11e]{color: red;}

  • 这样就相当为我们配置的样式加上了一个唯一表示

3、对原理更加深入了解(有能力的同学选择背诵)

vue-loader 通过生成哈希 ID,根据 type 的不同调用不同的 loader 将,哈希 ID分别注入到 DOM 和属性选择器中。实现 CSS 局部作用域的效果。CSS Scoped 可以算作为 Vue 定制的一个处理原生 CSS 作用域的解决方案

4、混用本地和全局样式

可以直接创建一个全局的css文件,在入口文件处引入,或者在单个组件内使用不加scoped的style

复制代码
<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

5、样式穿透(暂时跳过结合项目讲)

如果你的引入了第三方库,如果你想修改第三方库的样式,直接通过dom查找,修改样式是没有效果的。那么可以使用以下属性>>>,/deep/

复制代码
<style lang="scss" scoped>
.box-card {
  /deep/.el-card__body {
    padding: 10px;
  }
}
</style>
<style lang="scss" scoped>
.box-card {
  >>> .el-card__body {
    padding: 10px;
  }
}
</style>

6、注意

1、通过 v-html 创建的 DOM 内容不受 scoped 样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式

2、Scoped 样式不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式,当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example { color: red },性能影响就会消除

相关推荐
鱼樱前端22 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少1 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix1 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易1 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
汤姆Tom1 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript