<body>
<div id="app">
<h3 id="h3">{{ msg }}</h3>
<input type="button" value="修改msg" @click="msg='no'">
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
msg: 'hhhhhh'
},
methods: {
show() {
console.log('执行力show函数');
}
},
//第一个生命周期函数，实例完全创建出来之前，会执行他
beforeCreate() {
//console.log(this.msg);
//this.show();
//在beforeCreate生命周期函数执行的时候，data和methods中的方法还没初始化
},
created() { //第二个生命周期函数，执行时data和methods都已经初始化好了
//console.log(this.msg);
//this.show();
},
//第三个生命周期函数，模板在内存中已经渲染完成，还未渲染到页面中
beforeMount() {
//var h3 = document.getElementById('h3').innerHTML;
//console.log(h3);
//页面中的元素还没有真正替换过来，只是之前写的一些模板字符串
},
//第四个生命周期函数，内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
mounted() {
//var h3 = document.getElementById('h3').innerHTML;
//console.log(h3);
//执行完mounted，整个实例就创建完成
},
//运行中的两个事件
//此时界面还没有被更新
beforeUpdate() {
//var h3 = document.getElementById('h3').innerHTML;
//console.log('界面上元素的内容:'+h3);
//console.log('data中msg数据：'+this.msg);
},
updated() {
var h3 = document.getElementById('h3').innerHTML;
console.log('界面上元素的内容:'+h3);
console.log('data中msg数据：'+this.msg);
//页面中的数据已经更新为修改后的data中的数据
},
});
</script>
</body>
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
