style标签中的几个属性

1、vue中使用css通常采用如下形式

<style lang="scss" scoped></style>

2、lang=“scss”

项目引入了sass，sass支持.scss和.sass两种后缀，.sass类似于Python这种，没有大括号，格式要求较高，使用缩进的方式来代替大括号，.scss跟css极其相似，对开发人员更加友好，支持嵌套的写法。

3、scoped

表示该style标签中的样式只作用于父组件。
若没有该属性，则style标签中的样式将会作用到全局。
若想在scoped标签中改变子组件的样式，可使用/deep/、>>>、::v-deep

3.1 原理

在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。
详见文章: https://blog.youkuaiyun.com/weixin_39357177/article/details/114371187