<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
生命周期
</title>
</head>
<body>
<div id="app">
<input type="button" value="修改" @click="msg='sss'"/>
<p id="p1">{{msg}}</p>
</div>
</body>
<!--1、导入vue包-->
<script src="./js/vue.min.js"></script>
<!--2、创建vue实例（new对象）-->
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg:'msg'
},
//生命周期第一个函数，代表vue实例被创建,并没有初始化数据
beforeCreate() {
console.log(this.msg)
this.show()
},
//生命周期的第二个函数，代表数据被初始化，此处为最早获取到的数据和方法的地方
created() {
console.log(this.msg)
this.show()
},
// 生命周期的第三个函数，在模板挂载前
beforeMount() {
// 代表template模板已经存在内存中，并且模板中已经编辑完数据，但是此时已完成挂载到页面
console.log(document.getElementById('p1').innerHTML)
},
mount() {
// 代表template模板已经存在内存中，并且模板中已经编辑完数据，但是此时模板还没挂载到页面
console.log(document.getElementById('p1').innerHTML)
},
beforeUpdate() {
//数据发生更新，但是没有显示到页面
console.log("页面上的msg元素内容："+document.getElementById('p1').innerHTML)//页面上的msg元素内容:msg
console.log("data中msg的内容"+this.msg)//data中msg的内容:sss
console.log("----------------------------");
},
update() {
// 数据发生更新，且显示到页面
console.log("页面上的msg元素内容："+document.getElementById('p1').innerHTML)//页面上的msg元素内容:sss
console.log("data中msg的内容"+this.msg)//data中msg的内容:sss
},
methods: {
show(){
console.log('show');
}
}
})
</script>
</html>
