请陛下批阅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期函数</title>
<!--<script src="../../vue/vue.js"></script>-->
<script src="../../vue/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="msg = '等待!!!'">
<span id="span">{{msg}}</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '我也曾拥有过,但是我把ta弄丢了.....'
},
methods: {
show () {
console.log('执行show方法');
}
},
// ======= 创建阶段的函数 START =======
beforeCreate () {
//这个函数是生命周期执行的第一个函数,data和methods还没有初始化完成
// console.log(this.msg);
// this.show();
},
created (){
//这个函数是生命周期执行的第二个函数,data和methods已经初始化完成
// console.log(this.msg);
// this.show();
},
beforeMount(){
//这个函数是生命周期执行的第三个函数,Vue模板还在内存中,还没有挂载到DOM中
console.log(document.getElementById('span').innerHTML);
},
mounted () {
//Vue模板挂载到了DOM中
console.log(document.getElementById('span').innerHTML);
},
// ======= 创建阶段的函数 END =======
// ======= 运行阶段的函数 START =======
beforeUpdate() {
// 数据在内存中更新完,但是还没有渲染到页面中
console.log('这是页面中的数据:' + document.getElementById('span').innerHTML);
console.log('这是内存中的数据:' + this.msg);
},
updated() {
// 数据在内存中更新完,并且已经渲染到页面中
},
// ======= 运行阶段的函数 END =======
// ======= 销毁阶段的函数 START =======
beforeDestroy (){
// Vue实例销毁之前,所有的data,methods等都是可用的
},
destroyed() {
// Vue实例已经销毁
}
// ======= 销毁阶段的函数 END =======
});
</script>
</html>
