構(gòu)造器
每個 Vue 程序的開始都是由構(gòu)造函數(shù) Vue
創(chuàng)建實例:
var vm = new Vue({
// 選項
})
選項包含數(shù)據(jù)进泼、模板眠砾、掛載元素、方法阅虫、生命周期鉤子等演闭,在 API 文檔查看。
可以使用 extend
拓展構(gòu)造函數(shù) Vue
:
var MyComponent = Vue.extend({
// 擴展選項
})
// 所有的 `MyComponent` 實例都將以預(yù)定義的擴展選項被創(chuàng)建
var myComponentInstance = new MyComponent()
所有的 Vue.js 組件其實都是被擴展的 Vue 實例颓帝。
屬性與方法
每個 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ā)視圖更新。實例后添加的屬性則不會觸發(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)用
})
API 文檔 查看全部屬性與方法吴趴。
實例生命周期
生命周期方法內(nèi)的 this 指向 Vue 實例自身。
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
生命周期圖示侮攀,進一步學(xué)習(xí)時可以深入理解锣枝。
