創(chuàng)建Vue實(shí)例
//js代碼
var datas = {
name: "嘿嘿",
sex: "不祥"
}
var demo = new Vue({
//內(nèi)容
el: "app1",
data: datas
})
//等價(jià)方式
demo.$data === datas //=>true
demo.$el === document.getElementById('app1') //=>true
//HTML代碼
<div id ="app1">
<p>{{name}}</p>
<button v-on:click="name = '彭于晏'">Change it</button>
</div>
實(shí)例的生命周期鉤子
每個(gè)vue實(shí)例被創(chuàng)建之前都要經(jīng)過(guò)一系列初始化偎蘸，因此就會(huì)產(chǎn)生不同時(shí)間段的不同執(zhí)行函數(shù)私爷，下面聊聊不同時(shí)間段的函數(shù)執(zhí)行方式
new Vue({
data: {
a: 1
},
//創(chuàng)建實(shí)例之前
beforeCreate: function(){
console.log("這是第一個(gè)");
},
//創(chuàng)建后執(zhí)行
created: function () {
console.log("這是第二個(gè)");
},
//將編譯完成的HTML模板掛載到虛擬dom
beforemounted: function () {
console.log("這是第三個(gè)");
},
//將編譯好的HTML掛載到頁(yè)面完成后執(zhí)行的鉤子事件砌滞，在這里一般會(huì)做一些ajax請(qǐng)求數(shù)據(jù)的初始化
mounted: function () {
console.log("這是第四個(gè)");
},
//更新數(shù)據(jù)之前的鉤子函數(shù)
beforeupdate: function () {
console.log("這是第五個(gè)");
},
//更新之后的鉤子函數(shù)
update: function () {
console.log("這是第六個(gè)");
},
//實(shí)例銷(xiāo)毀之前執(zhí)行的鉤子函數(shù)
beforeDestroy: function () {
console.log("這是第七個(gè)");
},
//實(shí)例銷(xiāo)毀完成執(zhí)行的鉤子
destroy: function () {
console.log("這是第八個(gè)");
}
})
vue生命周期流程圖
