• 創(chuàng)建Vue實(shí)例

var vm = new Vue({
    <!-- 選項(xiàng) -->
})

• 數(shù)據(jù)與方法

當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它向 Vue 的響應(yīng)式系統(tǒng)中加入了其 data 對(duì)象中能找到的所有的屬性。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。

值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時(shí) data 中存在的屬性才是響應(yīng)式的。也就是說如果你添加一個(gè)新的屬性，比如：

var vm = new Vue({
    data:{
        a: 1
    }
})

vm.b = 2

這時(shí)對(duì) b 的改動(dòng)將不會(huì)觸發(fā)任何視圖的更新。如果你知道你會(huì)在晚些時(shí)候需要一個(gè)屬性，但是一開始它為空或不存在，那么你僅需要設(shè)置一些初始值。**

使用 Object.freeze()凍結(jié)的屬性對(duì)象，會(huì)阻止修改現(xiàn)有的屬性，也意味著響應(yīng)系統(tǒng)無法再追蹤變化。

var obj = {
    foo: 'bar'
}

Object.freeze(obj);

var app = new Vue({
    el: "#app",
    data: obj
})

Vue 實(shí)例還暴露了一些有用的實(shí)例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開來。

var data = {
    foo: 'bar'
}
var app = new Vue({
    el: "#app",
    data: data
})
// app.$data === data
console.log(app.$data);
// app.$el === document.getElementById("app")
console.log(app.$el);
// $watch實(shí)例方法
app.$watch('foo', function(newValue, oldValue){
    // 這個(gè)回調(diào)將在 `vm.a` 改變后調(diào)用
    console.log(newValue + " " + oldValue);
})