vue scoped 用法

写Vue文件时，每个页面都是一个Vue文件，当我们想要设置本页面的样式，同时不影响其他页面的样式。一般有下面的方法可以实现：
1.设置唯一的class
2.在vue文件根目录设置唯一的class,使用scss语法嵌套书写本vue的样式

.rootClass{
  .class1{
  }
  .class2{
  }
}

3.使用vue的scoped属性

<style scoped>
.example {
  color: red;
}
</style>
<template>
  <div class="example">hi</div>
</template>

转换结果为：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

从上面的转换结果可以看出，scoped的作用就是把当前页面的代码，加上一个data-v-f3f3eg9的全局唯一属性，可以看作是当前页的唯一标识符，然后设置style的时候，加上这个唯一标识符.example[data-v-f3f3eg9]就可以直接设置指定元素的样式，而不影响其他页面

• 注意点
  1.使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式-意思是组件根元素上也会添加data-v-f3f3eg9属性
  2.深度选择器
  如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析>>>。这种情况下你可以使用 /deep/或::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
详见文档vue-loader