VueStyle詳解

一、VueStyle綁定

在Vue中使用VueStyle可以很方便地實現樣式的綁定，可以綁定到class和style上，只需要在需要應用樣式的元素上加上v-bind指令，綁定一個對象即可：

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

其中，isActive、activeColor、fontSize都是data里的屬性，樣式會隨著屬性的變換而動態改變。

除了對象綁定，還可以使用數組綁定多個class：

<div v-bind:class="[activeClass, errorClass]"></div>

其中，activeClass和errorClass都是data里的屬性，可以為class添加多個樣式。

二、VueStyle綁定方法

除了對象和數組綁定，還可以使用方法綁定，將複雜邏輯抽離出來，在方法中返回需要綁定的對象或數組：

<div v-bind:class="classObject"></div>

<div v-bind:class="getClass"></div>

其中，classObject和getClass都是methods里的方法：

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  },
  methods: {
    getClass: function () {
      return [this.activeClass, this.errorClass]
    }
  }
}

在classObject方法中，根據數據返回需要綁定的樣式，示例中active和text-danger都可以動態變換。getClass方法返回一個綁定多個樣式的數組。

三、VueStyle設置

在Vue中可以定義全局樣式：

Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

使用時只需在組件中添加myOption屬性即可：

Vue.component('my-component', {
  myOption: 'hello!'
})

四、VueStyle動態寫法

Vue中除了靜態綁定，還可以動態綁定樣式：

<div :style="{ 'background-color': isActive ? activeColor : '' }"></div>

當isActive為true時，綁定activeColor屬性，否則綁定一個空值，樣式動態改變。

五、VueStyle判斷

在Vue中還可以使用v-if、v-show等指令判斷是否顯示某個樣式，v-if自帶動態創建和銷毀組件的能力，而v-show僅僅是用CSS設置display屬性。

<div v-if="classObject"></div>

六、VueStyle背景圖片路徑怎麼寫

在Vue中，如果要綁定背景圖片地址，需要使用require方法將圖片路徑引入：

<div :style="{ backgroundImage: 'url(' + require('./assets/img/bg.jpg') + ')' }">  
</div>

七、VueStyle寫變數

可以通過定義變數將樣式抽象出來，便於靈活應對：

<div :class="[className]"></div>

在data里定義className變數，再通過computed將其轉化為需要綁定的樣式：

data: {
  className: 'test'
},
computed: {
  getClass: function() {
    return this.className;
  }
}

八、VueStyle如何導入CSS文件

在Vue中使用方式多樣，可以將CSS文件通過標籤直接引入，也可以通過import引入：

<link rel="stylesheet" type="text/css" href="main.css">

import './assets/css/main.css';

九、VueStyle動態綁定

VueStyle動態綁定需要使用v-bind指令：

<div v-bind:style="{'background-color': bgColor }"></div>

bgColor是data中的屬性，隨著屬性值的變化，綁定的樣式也會發生變化。

十、VueStyle loader 順序選取

在Vue打包時，需要選取和載入一些loader，可以按以下順序配置：

module: {
  rules: [
    // 1. vue-loader
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    // 2. babel-loader
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /(node_modules|bower_components)/
    },
    // 3. css-loader
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}

分別選取vue-loader、babel-loader和css-loader進行載入。