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进行加载。