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

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

Vue.js應用的創(chuàng)建很簡單，通過構(gòu)造函數(shù)Vue就可以創(chuàng)建一個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選項塌西，可以聲明應用內(nèi)需要雙向綁定的數(shù)據(jù)他挎。建議所有會用到得數(shù)據(jù)都預先在data內(nèi)聲明，這樣不至于將數(shù)據(jù)散落在業(yè)務邏輯中捡需，難以維護办桨。
除了顯示得聲明數(shù)據(jù)外，也可以指向已有得變量站辉，并且它們之間默認建立了雙向綁定呢撞，當修改其中任意一項時，另一個也會一起變化饰剥，即匹配更新為新的值殊霞。

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實例創(chuàng)建時，都會經(jīng)歷一系列得初始化過程古沥，同時也會調(diào)用相應的生命周期鉤子，我們可以利用這些鉤子娇跟，在合適的時機執(zhí)行我們的業(yè)務邏輯岩齿。例如jQuery的ready()方法。

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

Vue的生命周期與之類似

vue生命周期圖

1.3 插值與表達式

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

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

Mustache 標簽將會被替代為對應數(shù)據(jù)對象上msg屬性的值拧廊。無論何時，綁定的數(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輸出后落剪，有可能導致XSS攻擊睁本，所以要在服務端對用戶提交得內(nèi)容進行處理，一般可將尖括號“<>”轉(zhuǎn)義著榴。

v-pre
如果想顯示{{}}標簽添履，而不進行替換，使用v-pre即可跳過這個元素和它子元素得編譯過程脑又。

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

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

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

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

{{ number + 1 }}

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

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

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

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

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

2、指令與事件

指令 (Directives) 是帶有 v- 前綴的特殊特性稠肘。指令特性的值預期是單個 JavaScript 表達式 (v-for是例外情況)福铅。指令的職責是，當表達式的值改變時项阴，將其產(chǎn)生的連帶影響滑黔，響應式地作用于DOM。

2.1 參數(shù)

v-bind 一些指令能夠接收一個“參數(shù)”环揽，在指令名稱之后以冒號表示略荡。例如，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>

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

v-on另一個例子是 v-on 指令验毡，它用于監(jiān)聽 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可以監(jiān)聽原生DOM事件。除click外哟玷，還有dblclick狮辽、keyup、mousemove等巢寡。表達式可以是一個方法名喉脖，這些方法都寫在Vue實例得methods屬性內(nèi)，并且是函數(shù)的形式抑月，函數(shù)內(nèi)this指向的當前Vue實例本身树叽，因此可以直接使用this.xxx的形式來訪問或修改數(shù)據(jù)。
表達式除了方法外谦絮，也可以直接是一個內(nèi)聯(lián)語句题诵，上例也可以改為：

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

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

2.2 語法糖

語法糖是指在不影響功能得情況下草冈，添加某種方法實現(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">點擊隱藏</button>
<!-- 縮寫為 -->
<button @click="handleClose">點擊隱藏</button>

3、class與style綁定

3.1 綁定class的幾種方法

1. 對象語法

給v-bind:class設置一個對象你踩，可以動態(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,當其為true時讳苦，div會擁有類名active,為false時則沒有带膜，所以上面示例的最終渲染結(jié)果為：

<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類型的數(shù)據(jù)芭挽，或者使用類似計算屬性的mothods滑废。

2. 數(shù)組語法

當需要多個class時，可以直接使用數(shù)組語法袜爪，給:class 綁定一個數(shù)組蠕趁，應用一個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>

也可使用三元運算表達式來根據(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ù)情況下腊状，直接寫一長串的樣式不便于閱讀和維護，所以一般寫在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>

應用多個樣式時缴挖，可以使用數(shù)組語法：

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

在實際業(yè)務中，:style的數(shù)組語法不常用焚辅，因為往往可以寫在一個對象里面映屋；而較為常用的應當是計算屬性。
另外法焰，使用:style時秧荆，Vue.js會自動給特殊的css屬性名稱增加前綴，比如transform埃仪。

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