之前寫vue頁面的時候，使用的是 快捷方式，打出vue之後使用tab鍵，就可以快捷的建立出vue頁面的template，script和style，之前一直有注意到style中有乙個scoped的屬性，但是一直不知道是幹啥的。今天乙個前輩給我講了，所以記錄下來，以供日後複習。
實現組建的私有化，不對全域性的樣式造成汙染，在style中使用scoped表示當前的style屬性只屬於當前模組。使用起來非常方便，但是本身也有一定的缺點。
通過觀察 dom 結構可以發現：vue 通過 dom 結構以及 css 樣式上加上唯一的標記，保證唯一，達到樣式私有化，不汙染全域性的作用。如下圖，樣式屬性上會多乙個字元：
可以看出來，加上scoped後的元件裡面的標籤會多乙個data-v-300bf50c的屬性，並且在css的樣式部分可以看出
由此可知，新增scoped屬性的元件，為了達到不汙染全域性，做了一下處理：
tips：
比如使用 element-ui 時，想要修改 element-ui的樣式，可以使用/deep/ .el-table{}這種方式來進行自定義。/deep/ css --> 注意，中間有空格。
如：
vue中scoped的原理
實現元件的私有化，不對全域性造成樣式汙染，表示當前style屬性只屬於當前模 塊 實現原理 通過觀察dom結構可以發現 vue通過在dom結構以及css樣式上加上唯一的標記，保證唯一，達到樣式私有化，不汙染全域性的作用，如圖，樣式屬性上也會多乙個該字元，以保證唯一 可以看出加上scoped後的元件裡...
Vue中的scoped實現原理
何為scoped？在vue檔案中的style標籤上，有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時，它的css樣式就只能作用於當前的元件，也就是說，該樣式只能適用於當前元件元素。通過該屬性，可以使得元件之間的樣式不互相汙染。如果乙個專案中的所有style標籤全部加上了sc...
Vue中的scoped和scoped穿透
文章摘自 一 什麼是scoped 在vue檔案中的style標籤上有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的vue元件，可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性，相當於實現了樣式的模組化。二 ...