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）。