##vue生命周期函数演示
废话不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期函数演示</title>
</head>
<body>
<div id="app">
<h3 id="h3">{{ msg }}</h3>
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 'OK'
},
methods: {
show() {
console.log("执行了show()方法")
}
},
beforeCreate() {
//这是我们遇到的第一个生命周期函数,表示实例被完全创建出来之前,会执行
//在beforeCreate函数执行的时候,data和methods中的数据都还没有被初始化
//console.log(this.msg);
//this.show();
},
created() {
console.log(this.msg);
this.show();
},
beforeMount() {
//模板已经在内存中编译完成,但是尚未将模板渲染到页面中
console.log(document.getElementById('h3').innerText);
},
mounted() {
console.log(document.getElementById('h3').innerText);
}
})
</script>
</body>
</html>