1、Vue实例与数据绑定

1.1 实例与数据

Vue.js应用的创建很简单，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：

var app = new Vue({
    // 选项
});

变量app就代表了这个实例。
首先，必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例。

<div id="app">{{ name }}</div>
var app = new Vue({
    el: document.getElementById('app'), // 或者 ‘#app’
    data :{
        name: 'Hello World'
    }
});

其次，通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。建议所有会用到得数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。
除了显示得声明数据外，也可以指向已有得变量，并且它们之间默认建立了双向绑定，当修改其中任意一项时，另一个也会一起变化，即匹配更新为新的值。

var myData = {
    a:1
};
var app = new Vue({
    el: ‘#app’,
    data: myData
});
console.log(app.a); // 1
// 修改属性，原数据也会随之改变
app.a = 2;
console.log(myData.a); // 2
// 反之，修改原数据，Vue属性也会改变
myData.a = 3;
console.log(app.a); // 3

1.2 Vue生命周期

每个Vue实例创建时，都会经历一系列得初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。例如jQuery的ready()方法。

$(document).ready(function(){
    // DOM加载完成后，会执行这里得代码
});

Vue的生命周期与之类似

vue生命周期图

1.3 插值与表达式

文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

原始 HTML
双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这里需要注意，如果将用户产生得内容使用v-html输出后，有可能导致XSS攻击，所以要在服务端对用户提交得内容进行处理，一般可将尖括号“<>”转义。

v-pre
如果想显示{{}}标签，而不进行替换，使用v-pre即可跳过这个元素和它子元素得编译过程。

<span>{{ 这里的内容是不会被编译的 }}</span>

特性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

使用 JavaScript 表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

Vue.js只支持单个表达式，不支持语句和流控制。另外在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date。以下是一些无效得示例：

<!-- 这是语句，不是表达式-->
{{ let name = "hello world" }}
<!-- 不能使用流控制，要使用三元运算 -->
{{ if (ok) { return msg } }}

2、指令与事件

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

2.1 参数

v-bind 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性，比如id,class等。

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            url: "https://www.github.com",
            imgUrl: "http://xxx.xxx.xx/img.png"
        }
    });
</script>

示例中的链接地址与图片得地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。

v-on另一个例子是 v-on 指令，它用于监听 DOM 事件：

<div id="app">
    <p v-if="isShow">看见还是看不见？</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
    var app = new Vue({
       el:'#app',
       data:{
           isShow:true
       },
       methods:{
           handleClose(){
               this.isShow = false;
           }
       }
    });
</script>

在button 按钮上使用v-on:click给元素绑定一个点击事件，在普通元素上，v-on可以监听原生DOM事件。除click外，还有dblclick、keyup、mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例得methods属性内，并且是函数的形式，函数内this指向的当前Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据。
表达式除了方法外，也可以直接是一个内联语句，上例也可以改为：

<div id="app">
    <p v-if="isShow">看见还是看不见？</p>
    <button v-on:click="show = false">点击隐藏</button>
</div>
<script>
    var app = new Vue({
       el:'#app',
       data:{
           isShow:true
       }
    });
</script>

这种场景只适用于简单得业务逻辑，如果绑定的事件要处理复杂得业务逻辑，建议还是在mothods里声明一个方法，这样可读性更强也利于维护。

2.2 语法糖

语法糖是指在不影响功能得情况下，添加某种方法实现同样得效果，从而方便程序开发。
Vue.js的v-bind和v-on都提供了语法糖，也可以说是缩写，
v-bind，可以直接省略v-bind，直接写一个冒号“:”:

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!-- 缩写为 -->
<a :href="url">
<img :src="imgUrl">

v-on可以直接用“@”来缩写：

<button v-on:click="handleClose">点击隐藏</button>
<!-- 缩写为 -->
<button @click="handleClose">点击隐藏</button>

3、class与style绑定

3.1 绑定class的几种方法

1. 对象语法

给v-bind:class设置一个对象，可以动态的切换class,例如：

<div id="app">
    <div :class="{ 'active': isActive }"></div>
</div>
<script>
    var app = new Vue({
       el: '#app',
       data:{
           isActive: true
       } 
    });

上面示例中，类名active依赖与数据isActive,当其为true时，div会拥有类名active,为false时则没有，所以上面示例的最终渲染结果为：

<div class="active"></div>

当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好很常见的方法，一般当条件多于两个时，都可以使用data或者computed,例如使用计算属性：

<div id="app">
    <div :class="classes"></div> 
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            error: null
        },
        computed:{
            classes(){
                return {
                    active: this.isActive && !this.error,
                    'text-fail': this.error && this.error.type==='fail'
                };
            }
        }
    });
</script>

除了计算属性，你也可以直接绑定一个object类型的数据，或者使用类似计算属性的mothods。

2. 数组语法

当需要多个class时，可以直接使用数组语法，给:class 绑定一个数组，应用一个class列表：

<div id="app">
    <div :class="[activeCls,errorCls]"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeCls: 'active',
            errorCls: 'error'
        }
    });
</script>

渲染的结果为：

<div class="active,error"></div>

也可使用三元运算表达式来根据条件切换class,例如下面的例子：

<div id="app">
    <div :class="[isActive ? activeCls : '',errorCls]"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            activeCls: 'active',
            errorCls: 'error'
        }
    });
</script>

与数组语法一样，也可以使用data,computed和methods三种方法。

3.2 绑定内联样式
使用v-bind:style(即:style)可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，看起来就像直接在元素上写css:

<div id="app">
    <div :style="{'color':color, 'fontSize':fontSize + 'px' }">文本</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            color: red,
            fontSize: 14,
        }
    });
</script>

css属性名称使用驼峰命名（camelCase）或者短横线分割命名（kebab-case）,渲染后的结果为：

<div style="color:red;font-size:14px;">文本</div>

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或computed里，以data为例：

    <div id="app">
    <div :style="styles">文本</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            styles: {
                color: 'red',
                fontSize: 14 + 'px',
            }
        }
    });
</script>

应用多个样式时，可以使用数组语法：

<div :style=[styleA,styleB]>文本</div>

在实际业务中，:style的数组语法不常用，因为往往可以写在一个对象里面；而较为常用的应当是计算属性。
另外，使用:style时，Vue.js会自动给特殊的css属性名称增加前缀，比如transform。

参考资料-Vue.js
参考资料-Vue.js实战