记一次 vue中style学习

为了避免全局组件之间的样式污染

1，<style>标签加上一个scoped属性

Vue 对 scoped的渲染规则

• 对于所有的 Vue 组件，只要设置了<style scoped></style>，Vue就会给该组件生成一个唯一data值。
• Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点
• 如果组件内部包含子组件，这有两种情况
  • 情况一：子组件没有设置<style scoped></style>，则只会给子组件的最外层标签加上当前组件的data属性
  • 情况二：子组件设置了<style scoped></style>，则子组件会自动生成一个自己的唯一data值，然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
• 对于组件内写在<style scoped></style>里的样式，Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css

引入了新的问题—样式不易（可ÿ