1像樊、構(gòu)造器
①每個vue.js應(yīng)用都是通過構(gòu)造函數(shù)Vue創(chuàng)建一個Vue的根實例啟動的:
var vm=new Vue({
//選項
});
②在實例化Vue時眷唉,需要傳入一個選項對象予颤,它可以包含數(shù)據(jù)、模板掛載元素冬阳、方法蛤虐、生命周期鉤子等選項。
③可以擴展Vue構(gòu)造器肝陪,從而用預(yù)定義選項創(chuàng)建可復(fù)用的組件構(gòu)造器驳庭。而且所有的Vue.js組件其實都是被擴展的Vue實例。
var myComponent=Vue.extend({
//擴展選項
});
var myComponentInstance = new MyComponent();
2氯窍、屬性和方法
①每個 Vue 實例都會代理其 data對象里所有的屬性:
var data = { a: 1 }
var vm = new Vue({
data: data
});
vm.a === data.a // -> true
// 設(shè)置屬性也會影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
② 被代理的屬性是響應(yīng)的饲常,也就是說值的任何改變都是觸發(fā)視圖的重新渲染。如果在實例創(chuàng)建之后添加新的屬性到實例上狼讨,它不會觸發(fā)視圖更新贝淤。
③ 除了 data 屬性, Vue 實例暴露了一些有用的實例屬性與方法政供。這些屬性與方法都有前綴 $播聪,以便與代理的 data 屬性區(qū)分
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
});
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
// 這個回調(diào)將在 `vm.a` 改變后調(diào)用
});
3朽基、實例生命周期
①每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如犬耻,實例需要配置數(shù)據(jù)觀測(data observer)踩晶、編譯模板(complie template)、掛載實例到DOM(mounted)枕磁、然后在數(shù)據(jù)變化時更DOM(update)渡蜻。在這個過程中,實例也會調(diào)用一些 生命周期鉤子计济,這就給我們提供了執(zhí)行自定義邏輯的機會茸苇。例如,created這個鉤子在實例被創(chuàng)建之后被調(diào)用:
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log(this.a)
}
});
// -> "a is: 1"
②也有一些其它的鉤子沦寂,在實例生命周期的不同階段調(diào)用学密,如mounted/updated/destroyed等