1、Vue實(shí)例與數(shù)據(jù)綁定

1.1 實(shí)例與數(shù)據(jù)

Vue.js應(yīng)用的創(chuàng)建很簡單，通過構(gòu)造函數(shù)Vue就可以創(chuàng)建一個Vue的根實(shí)例，并啟動Vue應(yīng)用：

var app = new Vue({
    // 選項(xiàng)
});

變量app就代表了這個實(shí)例。
首先，必不可少的一個選項(xiàng)就是el。el用于指定一個頁面中已存在的DOM元素來掛載Vue實(shí)例。

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

其次，通過Vue實(shí)例的data選項(xiàng)，可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)。建議所有會用到得數(shù)據(jù)都預(yù)先在data內(nèi)聲明，這樣不至于將數(shù)據(jù)散落在業(yè)務(wù)邏輯中，難以維護(hù)。
除了顯示得聲明數(shù)據(jù)外，也可以指向已有得變量，并且它們之間默認(rèn)建立了雙向綁定，當(dāng)修改其中任意一項(xiàng)時(shí)，另一個也會一起變化，即匹配更新為新的值。

var myData = {
    a:1
};
var app = new Vue({
    el: ‘#app’,
    data: myData
});
console.log(app.a); // 1
// 修改屬性，原數(shù)據(jù)也會隨之改變
app.a = 2;
console.log(myData.a); // 2
// 反之，修改原數(shù)據(jù)，Vue屬性也會改變
myData.a = 3;
console.log(app.a); // 3

1.2 Vue生命周期

每個Vue實(shí)例創(chuàng)建時(shí)，都會經(jīng)歷一系列得初始化過程，同時(shí)也會調(diào)用相應(yīng)的生命周期鉤子，我們可以利用這些鉤子，在合適的時(shí)機(jī)執(zhí)行我們的業(yè)務(wù)邏輯。例如jQuery的ready()方法。

$(document).ready(function(){
    // DOM加載完成后，會執(zhí)行這里得代碼
});

Vue的生命周期與之類似

vue生命周期圖

1.3 插值與表達(dá)式

文本
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：

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

Mustache 標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上msg屬性的值。無論何時(shí)，綁定的數(shù)據(jù)對象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會更新。

原始 HTML
雙大括號會將數(shù)據(jù)解釋為普通文本，而非HTML代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：

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

這里需要注意，如果將用戶產(chǎn)生得內(nèi)容使用v-html輸出后，有可能導(dǎo)致XSS攻擊，所以要在服務(wù)端對用戶提交得內(nèi)容進(jìn)行處理，一般可將尖括號“<>”轉(zhuǎn)義。

v-pre
如果想顯示{{}}標(biāo)簽，而不進(jìn)行替換，使用v-pre即可跳過這個元素和它子元素得編譯過程。

<span>{{ 這里的內(nèi)容是不會被編譯的 }}</span>

特性
Mustache 語法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind 指令：

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

使用 JavaScript 表達(dá)式
對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持

{{ number + 1 }}

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

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

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

Vue.js只支持單個表達(dá)式，不支持語句和流控制。另外在表達(dá)式中，不能使用用戶自定義的全局變量，只能使用Vue白名單內(nèi)的全局變量，例如Math和Date。以下是一些無效得示例：

<!-- 這是語句，不是表達(dá)式-->
{{ let name = "hello world" }}
<!-- 不能使用流控制，要使用三元運(yùn)算 -->
{{ if (ok) { return msg } }}

2、指令與事件

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預(yù)期是單個 JavaScript 表達(dá)式 (v-for是例外情況)。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM。

2.1 參數(shù)

v-bind 一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應(yīng)式地更新 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>

示例中的鏈接地址與圖片得地址都與數(shù)據(jù)進(jìn)行了綁定，當(dāng)通過各種方式改變數(shù)據(jù)時(shí)，鏈接和圖片都會自動更新。

v-on另一個例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：

<div id="app">
    <p v-if="isShow">看見還是看不見？</p>
    <button v-on:click="handleClose">點(diǎn)擊隱藏</button>
</div>
<script>
    var app = new Vue({
       el:'#app',
       data:{
           isShow:true
       },
       methods:{
           handleClose(){
               this.isShow = false;
           }
       }
    });
</script>

在button 按鈕上使用v-on:click給元素綁定一個點(diǎn)擊事件，在普通元素上，v-on可以監(jiān)聽原生DOM事件。除click外，還有dblclick、keyup、mousemove等。表達(dá)式可以是一個方法名，這些方法都寫在Vue實(shí)例得methods屬性內(nèi)，并且是函數(shù)的形式，函數(shù)內(nèi)this指向的當(dāng)前Vue實(shí)例本身，因此可以直接使用this.xxx的形式來訪問或修改數(shù)據(jù)。
表達(dá)式除了方法外，也可以直接是一個內(nèi)聯(lián)語句，上例也可以改為：

<div id="app">
    <p v-if="isShow">看見還是看不見？</p>
    <button v-on:click="show = false">點(diǎn)擊隱藏</button>
</div>
<script>
    var app = new Vue({
       el:'#app',
       data:{
           isShow:true
       }
    });
</script>

這種場景只適用于簡單得業(yè)務(wù)邏輯，如果綁定的事件要處理復(fù)雜得業(yè)務(wù)邏輯，建議還是在mothods里聲明一個方法，這樣可讀性更強(qiáng)也利于維護(hù)。

2.2 語法糖

語法糖是指在不影響功能得情況下，添加某種方法實(shí)現(xiàn)同樣得效果，從而方便程序開發(fā)。
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">點(diǎn)擊隱藏</button>
<!-- 縮寫為 -->
<button @click="handleClose">點(diǎn)擊隱藏</button>

3、class與style綁定

3.1 綁定class的幾種方法

1. 對象語法

給v-bind:class設(shè)置一個對象，可以動態(tài)的切換class,例如：

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

上面示例中，類名active依賴與數(shù)據(jù)isActive,當(dāng)其為true時(shí)，div會擁有類名active,為false時(shí)則沒有，所以上面示例的最終渲染結(jié)果為：

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

當(dāng):class的表達(dá)式過長或邏輯復(fù)雜時(shí)，還可以綁定一個計(jì)算屬性，這是一種很友好很常見的方法，一般當(dāng)條件多于兩個時(shí)，都可以使用data或者computed,例如使用計(jì)算屬性：

<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>

除了計(jì)算屬性，你也可以直接綁定一個object類型的數(shù)據(jù)，或者使用類似計(jì)算屬性的mothods。

2. 數(shù)組語法

當(dāng)需要多個class時(shí)，可以直接使用數(shù)組語法，給:class 綁定一個數(shù)組，應(yīng)用一個class列表：

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

渲染的結(jié)果為：

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

也可使用三元運(yùn)算表達(dá)式來根據(jù)條件切換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>

與數(shù)組語法一樣，也可以使用data,computed和methods三種方法。

3.2 綁定內(nèi)聯(lián)樣式
使用v-bind:style(即:style)可以給元素綁定內(nèi)聯(lián)樣式，方法與:class類似，也有對象語法和數(shù)組語法，看起來就像直接在元素上寫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）,渲染后的結(jié)果為：

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

大多數(shù)情況下，直接寫一長串的樣式不便于閱讀和維護(hù)，所以一般寫在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>

應(yīng)用多個樣式時(shí)，可以使用數(shù)組語法：

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

在實(shí)際業(yè)務(wù)中，:style的數(shù)組語法不常用，因?yàn)橥梢詫懺谝粋€對象里面；而較為常用的應(yīng)當(dāng)是計(jì)算屬性。
另外，使用:style時(shí)，Vue.js會自動給特殊的css屬性名稱增加前綴，比如transform。

參考資料-Vue.js
參考資料-Vue.js實(shí)戰(zhàn)