vue中scoped的理解

在css中添加scoped属性可以实现样式的模块化

实现原理
转译前
<style scoped lang="less">
.example{
color: red
}
</style>
<template>
<div class="example">scoped测试案例</div>
</template>
转译后
.example[data-v-ttt888]{
color: red
}
<template>
<div class="example" data-v-ttt888></div>
</template>

元素上已经加上自定义属性所以在添加样式时会找指定类下包含指定属性的元素

如果是模板内自己添加的元素可以找到，但是如果引入iview这样的框架想去修改框架的样式是无法实现的，应该使用全局方式

参考文献：https://segmentfault.com/a/1190000015932467