vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架周偎，與其他框架不同的是熬粗，vue采用的是自底向上增量開發(fā)的設(shè)計
this
在使用vue開發(fā)的過程中布持，this的指向讓我吃了不少虧莉炉。所有的生命周期鉤子自動綁定this上下文到實(shí)例中，因此可以通過this訪問數(shù)據(jù)碴犬，對屬性和方法進(jìn)行運(yùn)算操作絮宁。
不能使用箭頭函數(shù)來定義一個生命周期方法，因?yàn)榧^函數(shù)綁定了上下文服协，因此this的指向和你期待的vue實(shí)例不一樣绍昂。
遇到過的坑，使用setTimeout的時候偿荷，function里面使用this指向的是window窘游，而不是vue實(shí)例。解決的話跳纳，可以直接使用vue實(shí)例忍饰，也可以在一開始用一變量指向this
var _self = this;
實(shí)例生命周期
- created這個鉤子在實(shí)例創(chuàng)建之后被調(diào)用
- mounted el被新創(chuàng)建的vm.$el替換，并被掛載到實(shí)例上去之后調(diào)用該鉤子寺庄。該鉤子在服務(wù)器端渲染期間不被調(diào)用
- updated
-destroyed
模板語法
相關(guān)概念：在底層的實(shí)現(xiàn)上艾蓝，vue將模板編譯成虛擬DOM渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)斗塘，在應(yīng)用狀態(tài)發(fā)生改變的時候赢织，vue能夠以最小的代價將改變渲染進(jìn)DOM操作中
列表渲染
注意：由于js的限制，vue不能檢測以下變動的數(shù)組
- 當(dāng)你直接使用索引設(shè)置一項(xiàng)內(nèi)容的時候
vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(shù)組的長度的時候
vm.items.length = newLength
解決第一點(diǎn)：
兩種方法：
1.Vue.set
//Vue.set
Vue.set(example.items,indexOfItem,newvalue)
2.數(shù)組的splice方法
example.items.splice(indexOfItems,1,newValue)
解決第二個：
使用數(shù)組的splice方法
example.items.splice(newLength)
事件處理器
有時候我們需要在內(nèi)聯(lián)語句中訪問原生DOM事件馍盟∮谥茫可以使用特殊變量$event把它傳進(jìn)方法
<button v-on:click="warn('message',$event)">
Submit
</button>
methods:{
warn:function(message,event){
//現(xiàn)在我們可以訪問原生事件對象
if(event)event.preventDefault()
alert(message)
}
}
深入響應(yīng)式原理
- vue不允許在已經(jīng)創(chuàng)建的實(shí)例上動態(tài)的添加新的根級響應(yīng)式屬性，然而它可以使用Vue.set(object,key,value)方法將響應(yīng)屬性添加到嵌套的對象上：
Vue.set(vm.someobject,'b',2)
也可以使用vm.$set實(shí)例方法 贞岭，這也是Vue.set方法的別名：
this.$set(this.someobject,'b',2)
Vue.nextTick(callback)
原因：vue異步執(zhí)行DOM更新
為了在數(shù)據(jù)變化之后等待Vue完成更新dom,可以在數(shù)據(jù)變化之后立即使用Vue八毯。nextTick(callback).這樣回調(diào)函數(shù)在dom更新完成之后就會調(diào)用。
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
