<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h3 id="h3">{{message}}</h3>
<input type="button" value="修改message" @click="message='No'">
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var xm=new Vue({
el:"#app",
data:{
message:"OK"
},
methods:{
show(){
console.log('执行了show方法')
}
},
// 未被初始化函数
beforeCreate() { //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它；
//在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化.
},
// 初始化完成的函数
created() {//这是我们遇到的第二个生命周期函数
// console.log(this.message)
// this.show()
// 在created中,data和methods都已经被初始化好了
//如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作
},
// 即将挂载的函数
beforeMount() {//这是我们遇到的第三个生命周期函数，表示模板已经在内存中编译完成了，但是还没有渲染到页面中
// console.log(document.getElementById("h3").innerText)
//在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的模板字符串,还是旧的
},
// 挂载的函数
mounted() {//这是我们遇到的第三个生命周期函数，表示内存中的模板已经挂载到了页面中
// console.log(document.getElementById("h3").innerText)
//mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，
//此时，如果没有其他操作的话，这个实例就在我们的内存当中
//如果我们需要操作dom中的元素，我们必须在mounted完成之后才可以，mounted之后，我们已经脱离了创建阶段，
//进入了运行阶段
},
// ---------------------------------------------------------------------------------------------------------------
// 运行阶段的生命周期函数：
beforeUpdate() {//页面还未被更新，但是数据被更新了
// console.log('界面上的元素是'+document.getElementById("h3").innerText);
// console.log('data中的message的数据是: '+ this.message);
// 当执行 beforeUpdate()的时候，页面中显示的数据还是旧的，但是数据是新的
},
//渲染到页面的函数
updated() {
//updated()事件执行的时候，页面和data数据已经保持同步了，都是最新的
},
//即将销毁的函数
beforeDestroy() {
//当执行beforeDestroy()钩子函数的时候，vue实例就已经从运行阶段进行到销毁阶段，当执行beforeDestroy()
},
//销毁的函数
destroyed() {
// 此时实例身上所有的data,methods,过滤器，指令都已经销毁了
},
})
</script>