在使用vue框架的時候，給style標籤添加scoped屬性，表示該style標籤所包含的樣式僅僅作用於當前的vue組件，不會產生樣式全局污染的情況，一個應用中所有vue組件都加上該屬性，則實現了樣式的模塊化。
<style scoped>
/** 組件樣式 */
</style>
實現原理：
1、vue會給每個組件中HTML的DOM節點添加一個組件間不重複的data屬性：
2、給編譯後的css選擇器中添加了對應data屬性，從而達到樣式只在當前組件生效：
lang屬性表示style標籤可以使用哪種css預處理語言：
<style lang="scss">
/** scss樣式 */
<style>
使用了scoped屬性之後，假如當前組件中包含其他或者第三方組件時，只會爲別的組件第一個DOM節點加上data屬性，其餘的不添加：
所以想要修改該組件的樣式時，是不會生效的，此時可以使用樣式穿透操作符：
有些css預處理語言可能無法識別 >>> 操作，可以使用 /deep/ 操作符：
實際上，使用了樣式穿透違反了scoped屬性的意義，可以在vue組件中添加不含scoped屬性的style標籤，給組件最外層DOM節點添加唯一的class類名，使用該類名來修改其他組件的樣式，達到既不產生樣式全局污染也能修改其他組件樣式的效果。