Vue学习之--------Scoped样式（2022/8/1）

1、场景

一个页面开发团队进行页面的开发设计、无可避免的会发生样式选择器命名的重复（id的重复、class的重复等）。这样间接导致的后果就是、自己的页面样式好好的、在整合一起的时候、可能就会发生样式的错乱、怎样解决这个问题呢？ 很简单、在vue中单页面文件样式中加上​​scoped​​

2、错误的使用

假设现在编写的组件使用了相同的class命名。在进行页面设计时、想要达到的效果是、组件有自己的样式

3、错误效果展示

4、改进 在style标签中加上scoped属性

1. 作用：让样式在局部生效，防止冲突。
2. 写法：​​<style scoped>​​

5、改进后的效果

6、开发提示

在进行单页面开发时、为了保证页面样式。最好在样式中加上​​scoped​​属性。只在当前页面有效果