[vue] scoped样式

scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>

原理

Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:

<style scoped>

    .example{

        color:red;

    }

</style>

<template>

    <div>scoped测试案例</div>

</template>

转译后:

.example[data-v-5558831a] {

  color: red;

}

<template>

    <div class="example" data-v-5558831a>scoped测试案例</div>

</template>

给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素

在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式

---

参考：
Vue中的scoped的实现原理以及scoped穿透的用法