Vue.js之生命周期
<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('执行了函数')
}
},
//第一个生命周期函数
beforeCreate() {
console.log(this.msg)//undefined
// this.show() //报错:this.show is not a function
},
//第二个生命周期函数
created() {
console.log(this.msg) //ok
this.show() //执行了函数
},
//第三个生命周期函数 ,表示模板已经在内存中编译完成,但尚未挂载到页面上
beforeMount(){
console.log(document.getElementById('h3').innerText)// {{ msg }}
},
//第四个生命周期函数 已经渲染到页面上了
mounted() {
// mounted是实例创建期间的最后一个生命周期函数
console.log(document.getElementById('h3').innerText) //ok
},
//运行中的两个事件
beforeUpdate() {
//页面还没被更新,数据已经被更新了
console.log('界面:'+document.getElementById('h3').innerText)//界面:ok
console.log('date中:'+this.msg) //date中:No
},
updated() {
//页面和数据都已更新
console.log('界面:'+document.getElementById('h3').innerText) //界面:No
console.log('date中:'+this.msg) //date中:No
}
})
</script>
</body>