1. 程式人生 > >Vue例項和生命週期

Vue例項和生命週期

建立一個Vue例項

每個Vue應用都是通過Vue函式建立一個新的Vue例項開始:

var vm = new Vue({
    //選項
})

資料與方法

當一個Vue例項被建立時,它向Vue的響應式系統中加入了其data物件中能找到的所有屬性。當這個屬性的值發生變化時,檢視將產生"響應",即匹配更新後的值。

//我們的資料物件
var data = {a: 1}

//該資料物件加入到vue例項中
var vm = new Vue({
    data: data
})

//獲得這個例項上的屬性
//返回源資料中對應的欄位
vm.data == data.a // => true

//設定屬性也會影響
vm.a = 2
data.a //2

值得注意的是只有當例項被建立時data中存在的屬性才是響應式的。

除了資料屬性,Vue例項還暴露一些有用的例項屬性和方法,他們都有$字首,以便與使用者定義的屬性區分開來。

var data = {a: 1}
var vm = new Vue({
    el: '#example',
    data: data
})

vm.$data === data // true
vm.$el === document.getElementById('example') // true

vm.$watch('a', function(newValue, oldValue){
    //這個回撥將在vm.a改變後呼叫
})

例項生命週期鉤子

created()可以用來在一個例項被建立之後執行程式碼。

生命週期鉤子的this上下文指向呼叫它的Vue例項。

關於生命週期的可以接我另外一篇文章:https://segmentfault.com/a/11...

原文地址:https://segmentfault.com/a/1190000016836774