第五节——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常用（