從多個方面深入了解Vue樣式

一、Vue樣式簡介

Vue.js是一個前端漸進式框架，採用MVVM架構，是組件化的思想，不僅僅提供了易於上手的模塊化、組件化開發方式，同時也在數據綁定、指令等方面進行了深度優化，使得應用可以更流暢的運行。Vue的樣式語法相較於其他框架也有較大不同，通過豐富的指令擴展，使得樣式定義更加豐富、便捷。

二、Vue樣式指令

Vue樣式指令用於直接在HTML模板上添加樣式而不用寫CSS文件。Vue內置的指令有v-bind:class、v-bind:style與v-if。其中v-bind:class用於添加類名，後面加上一個需要添加類名的計算屬性或Object、Array;v-bind:style用於設置內聯樣式，後面加上一個返回內聯樣式對象的計算屬性或Object；v-if指令用於條件渲染。除了內置指令，Vue還提供了動態組件和過渡效果。

三、計算屬性與內聯樣式

Vue提供了計算屬性來簡化動態樣式的寫法。一個計算屬性是一個返回值的函數，該返回值可以是一個對象或字符串。我們可以在計算屬性中編寫邏輯，判斷屬性的取值條件，根據條件返回不同的值。下面是一個用計算屬性實現背景色漸變的實現：

  
     .gradualBackgroundColor {
        background-color: red;
        background-image: -moz-linear-gradient(top, #ff0000, #00ff00); 
        background-image:-webkit-gradient(linear,0 0, 0 100%, from(#ff0000), to(#00ff00)); 
        background-image:-webkit-linear-gradient(top, #ff0000, #00ff00); 
        background-image:linear-gradient(to bottom, #ff0000, #00ff00);
     }
   

  
     <template>
        <div v-bind:class="gradualBackgroundColor">Hello World</div>
     </template>
     
     <script>
         export default {
             computed: {
                 gradualBackgroundColor () {
                     return {
                         'gradualBackgroundColor': true
                     }
                 }
             }
         }
     </script>
   

上例中gradualBackgroundColor的計算屬性只返回了一個對象，鍵為gradualBackgroundColor，通過v-bind:class將這個對象渲染到組件上，從而設置了組件的樣式。

四、Vue模板與CSS作用域

Vue組件生命周期的存在，使得組件的樣式不會侵入其他組件內，這樣可以有效地避免樣式的污染。<style>標籤中使用的scoped關鍵字就是為了避免組件樣式污染。共享一個樣式，要去掉scoped。下面是一個Vue組件樣式作用域：

  
    <template>
      <div class="scoped-demo">
        <p>Scoped CSS</p>
      </div>
    </template>
    
    <style scoped>
      .scoped-demo p {
        color: blue;
      }
    </style>
  

上例中，<style>標籤中添加了scoped關鍵字，這樣的話，.scoped-demo p的styles只會適用於當前的組件，而不會出現在其他組件中。

五、CSS modules

CSS Modules是一種CSS樣式的管理方案。在Vue的webpack內，CSS modules可以通過vue-loader實現。當<style>標籤有module屬性時，這個樣式將被視為模塊化資源。下面是一個Vue中使用CSS Modules的例子：

  
    <template>
      <div class="scope">
        <p :class="$style.red">scoped demo</p>
      </div>
    </template>
    
    <style module>
      .red {
        color: red;
      }
    </style>
  

在Vue組件內部使用$style在使用CSS Modules後將使用自動生成的類名而不是原來的類名。在使用了CSS Modules之後，既避免了樣式污染，同時也減少了樣式的耦合度。