第五节Vue 中如何编写样式

一、内联样式

<template>  <div stylecolor:red>    红色  </div></template>

二、在style标签中编写 1、创建learn-style.css文件

.red { color: red; }

3、在文件中引入

<template>  <div classred>    红色  </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 classex>hi</div></template><style scoped>.ex {  color: red;}</style>

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

<div classdemo>test</div>// 会被编译成:<div classdemo 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 langscss scoped>.box-card {  /deep/.el-card__body {    padding: 10px;  }}</style><style langscss 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 }性能影响就会消除