vue单组件css样式中的scoped

先上代码：

<style lang="less" scoped>
    .hello{
        color: red;
    }
</style>

scoped：标记当前样式是局部作用域样式：说明这里面写的样式只有当前组件可以使用

• 当样式渲染到页面中会生成带有data-v 后加一串随机字符的属性
  

• 该串随机的字符就是当前DOM元素的属性类名
  vue单组件style 中的scoped就是以此方式将样式赋予达到唯一性，很好的避免了样式的冲突