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