从多个方面深入了解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之后，既避免了样式污染，同时也减少了样式的耦合度。