网页的美化主要靠CSS。Vue.js也可以借助CSS实现更好的效果。

一、什么是CSS

这里就不介绍了。对开发者而言，所有的样式如果都需要手写是非常繁琐的，而且难度也非常的高，这时就该用到现有的开源UI框架库了。

二、动态绑定class，让页面变得美观

操作元素的class列表和内联样式是数据绑定常见需求。因为它们都是属性，所以可以用v-bind处理它们；只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦而且易错，因此在将v-bind用于class和style时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或者数组。

2.1、绑定对象语法

开发者可以通过传给v-bind:class一个对象，动态地切换class。

<div v-bind:class="{active:isActive}"></div>

区分真值(truthy)和true的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>turthy&falsy</title>
</head>
<body>
    <script>
//       字符串0为真值
        let x = "0";
        if(x){
//            该输出会执行
            console.log("string 0 is Truthy.")
        } else {
            console.log("string 0 is Falsy.")
        }
//        数字0为falsy
        let x1 = 0;
        if(x1){
            console.log("0 is Truthy.")
        } else {
//            该输出会执行
            console.log("0 is Falsy.")
        }
//      空数组也为真值（存在）
        let y = [];
        if(y){
//            该输出执行
            console.log("empty array is Truthy.")
        } else {
            console.log("empty array is Falsy.")
        }
    </script>
</body>
</html>

2.2、绑定数组语法

可以把一个数组传给v-bind:class，这样就可以应用一个class列表。

v-bind:class="[activeClass, errorClass]"
data:{
  activeClass:'active',
  errorClass:'text-danger'
}

内联样式同样可以绑定数组语法和对象语法：
CSS属性名可以用驼峰式或者短横线分隔(用单引号括起来)

2.3、自动添加前缀 #3

当v-bind：style使用需要添加浏览器引擎前缀的css属性时，Vue.js会自动侦测并添加相应的前缀。为了适应老版浏览器，现在新版的几乎都已经被统一而不需要前缀。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自动添加前缀</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div，其长宽均为100px，背景为绿色-->
    <div style="padding: 100px">
        <!--对于这个div绑定一个transform属性-->
        <div style="width: 100px;height: 100px;background: green;color:#fff" v-bind:style="{transform:transformVal}">旋转div</div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
//            赋值样式属性
            transformVal: 'rotate(7deg)'
        }
    })
</script>
</body>
</html>

2.4、绑定多重值

从Vue.js2.3.0起，开发者可以为style绑定的属性提供一个包含多个值得数组，这常用于多个带前缀的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绑定多重值</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div-->
    <div>
        <!--对于这个div绑定一个display属性-->
        <div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">绑定多重值</div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
</body>
</html>

这样浏览器只会渲染数组中最后一个被浏览器支持的值。

三、丰富多彩的模板和UI框架

3.1、常用的UI框架

1、Element组件库
Element是饿了么平台之前推出的基于Vue.js2.0的后台组件库。
2、iView组件库
iView是一套基于Vue.js的高质量UI组件库。
3、Vuetify组件库
Material Design是近年非常流行的设计风格，由Google领头并提出设计风格规范，在设计界的影响非常大。

四、使用Vue-iView建立精美的应用

4.1、安装iview

两种方式：CDN方式和npm方式：
1、CDN方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/iview@2.9.2/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <i-button @click="show">点击弹出!</i-button>
    <Modal v-model="visible" title="Welcome">欢迎使用iView</Modal>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            visible: false
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    })
</script>
</body>
</html>

2、npm方式

npm install iview --save

4.2、iView的用法

官方推荐使用webpack作为打包工具。为了方便开发者工作，官方提供了一个脚手架iView Cli，可以快速搭建使用iView的应用。
官方提供了一个示例程序，先git clone，
cd 目录后 npm install 后 npm run init 后 npm run dev

4.3、应用iView主题

iView最大的一个亮点就是提供了大量不同的UI主题。
iView的样式是基于Less的，其主题文件是以前缀.ivu-作为命名空间，并且定义了一套样式变量。所以对变量列表进行的更新，相当于对主题的更新。
修改主题可以使用两种方法:

4.3.1、变量覆盖

用变量覆盖方法来修改主题则要求用户使用了Webpack打包工程
方法：
选择src文件夹，在其下再新建一个文件夹theme，然后在其中新建index.less文件，输入：

@import '~iview/src/styles/index.less';
@primary-color :#60f016;

这样一个样式文件就完成了，但此时项目本身依旧没有使用到该主题，此时需要在main.js文件中引入这个主题。
打开main.js文件，在其中添加如下代码内容，引入样式。

import './theme/index.less'

4.3.2、通过安装工具来修改

通过此方法主要是针对没有使用Webpack的开发者，此时需要使用有官方提供的iview-theme来进行编译，安装主题生成工具，也可以从npm全局安装或在项目中局部安装。

npm install iview-theme -g
//拉取最新的样式文件
iview-theme init my-theme
//最后编辑my-theme/custom.less文件，用以下命令进行编译：
iview-theme build -o dist/

之后会在目录下生成一个.css样式文件，
然后在入口文件中引入该文件

import Vue from ‘vue’;
import iView from ‘iview’;
import ‘…/my-theme/dist/iview.css’;
Vue.use(iView);

五、常用组件

常用组件库请查看官方