<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">{{a}}
<button v-on:click="change">change</button>
</div>
</body>
</html>
<script>
var myVue = new Vue({
el: "#app",
data: {
a: "Vue.js"
},
methods:{
change(){
console.log('change Vue')
}
} ,
beforeCreate: function() {
console.log("創(chuàng)建前")
console.log(this.a)
console.log(this.$el)
},
created: function() {
console.log("創(chuàng)建之后");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function() {
console.log("mount之后")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function() {
console.log("更新前");
console.log(this.a)
console.log(this.$el)
},
updated: function() {
console.log("更新完成");
console.log(this.a);
console.log(this.$el)
},
beforeDestroy: function() {
console.log("銷毀前");
console.log(this.a)
console.log(this.$el)
console.log(this.$el)
},
destroyed: function() {
console.log("已銷毀");
console.log(this.a)
console.log(this.$el)
},
});
</script>
// 關(guān)于vue.js生命周期的一些認(rèn)識：
// this.a this.$el
// beforeCreate：創(chuàng)建前; N N
// created:創(chuàng)建后; Y N
//
// beforeMount:載入前; Y Y(虛擬的奕筐，占坑而已)
// mouted:載入后 Y Y(真實(shí)的)
//
// beforeUpdate:更新前;
// updated:更新后;
//
// beforeDestory:銷毀前;
// destroyed:銷毀后趟据；
//
//
/*
beforecreate : 可以在這加個loading事件，在加載實(shí)例時觸發(fā)
created : 初始化完成時的事件寫在這里喇喉，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用
mounted : 掛載元素扭勉，獲取到DOM節(jié)點(diǎn)
updated : 如果對數(shù)據(jù)統(tǒng)一處理昭灵，在這里寫上相應(yīng)函數(shù)
beforeDestroy : 可以做一個確認(rèn)停止事件的確認(rèn)框
*/
