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