<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue-2.5.17.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='no'"/>
<h3 id="h3">{{msg}}</h3>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "ok"
},
methods: {
show(){
console.log("执行了show方法")
}
},
beforeCreate(){
//表示实例完全被创建出来执行,data和methods中的属性和方法都还未被初始化
//console.log(this.msg);
},
created(){
//在created中，data和methods中的属性和方法初始化好了
//console.log(this.msg);
//this.show();
},
beforeMount(){
//表示模板已经编译完成，并未挂载到页面中去,拿到的只是之前写的一些模板字符串
//console.log(document.getElementById("h3").innerText);
},
mounted(){
//表示模板已经挂载完成，用户可以查看挂载的数据，当执行完mounted表示实例已经完全创建好了，如果没有其他的操作，实例就会停留在内存中
//console.log(document.getElementById("h3").innerText);
},
beforeUpdate(){
//表示数据更新了，界面还没有更新的时候触发
//console.log("界面上元素的内容："+document.getElementById("h3").innerText);
//console.log("data的内容："+this.msg);
},
updated(){
//页面和数据同步了
console.log("界面上元素的内容："+document.getElementById("h3").innerText);
console.log("data的内容："+this.msg);
}
});
</script>
</body>
</html>
