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