vue組件中的樣式屬性：scoped，解決在父組件中沒法修改子組件樣式問題

　　Scoped CSS規範是Web組件產生不污染其餘組件，也不被其餘組件污染的CSS規範。

　　vue組件中的style標籤標有scoped屬性時代表style裏的css樣式只適用於當前組件元素，它是經過使用PostCSS來改變如下內容實現的：

<style scoped> .example { color: red; } </style>

<template>
  <div class="example">hi</div>
</template>
//渲染結果
<style> .example[data-v-f3f3eg9] { color: red; } </style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

1、混合使用全局屬性和局部屬性

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

2、關於子組件的根元素

　　使用了scoped屬性以後，父組件的style樣式將不會滲透到子組件中，然而子組件的根節點元素會同時被設置了scoped的父css樣式和設置了scoped的子css樣式影響，這麼設計的目的是父組件能夠對子組件根元素進行佈局。
　　.vue模板中的樣式是根據須要按需加載，訪問一個頁面該組件中的樣式就會追加到head標籤中，若是父子組件中都對某個子組件根節點元素進行了控制，則父組件裏的樣式會被後來的覆蓋。

3、深選擇器

　　若是想對設置了scoped的子組件裏的元素進行控制可使用  ’>>>’  或者  ’deep’

<template>
  <div id="app">
    <gHeader></gHeader>
  </div>
</template>

<style lang="css" scoped> .gHeader /deep/ .name{ //第一種寫法
 color:red; } .gHeader >>> .name{   //二種寫法
 color:red; } </style>

<div class="gHeader">
  <div class="name"></div>
</div>

　　一些預處理程序，例如sass不能解析>>>屬性，這種狀況下能夠用deep，它是>>>的別名，工做原理相同。

4、動態生成的內容

　　使用v-html動態建立的DOM內容，不受設置scoped的樣式影響，但你依然可使用深選擇器進行控制

5、vue開發中，父組件添加scoped以後。解決在父組件中沒法修改子組件樣式問題

　　在vue的開發中，咱們須要引用子組件，包括ui組件（element、iview）。可是在父組件中添加scoped以後，在父組件中書寫子組件的樣式是無效果的。去掉scoped以後，樣式能夠覆蓋。但這樣會污染全局樣式，爲了解決這個問題，vue-loader新增書寫方式。

　　父組件

　　子組件

　　效果

　　這樣的寫法及修改了子組件的樣式，又不會污染全局樣式！