vue css中scoped

1、什么是scoped

vue组件中，在style标签中有一个属性，叫做scoped。当此标签拥有scoped属性的时候，该组件下的css样式只适用于本组件，而不会影响全局组件。这其实也相当于样式的模块化了。

2、scoped实现的原理

其实scoped中最重要的就是PostCSS,PostCSS是一种css的编译的工具。来看一下转译之前的代码：

编译前的代码：

 

 

 

 

<template>    
    <span class="textScoped">scoped测试</span>
</template>
<script>

</script>
<style scoped>    
    .textScoped{
        color: red;    
    }
</style>复制代码

编译之后的代码:

<template>    
    <span data-v-3e5b2a80 class="textScoped">scoped测试</span>
</template>
<script>

</script>
<style scoped>    
    .textScoped[data-v-3e5b2a80]{        
        color: red;    
    }
</style>复制代码

编译后，我们发现css中，PostCSS给所有的dom都添加了一个独一无二的动态属性，给css选择器也添加了一个对应的属性选择器，这样就可以让样式只作用于该属性的dom元素（组件内部的dom）。