<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
//生命周期函数就是vue实例在某一个时间点会自动执行的函数
var vm = new Vue({
el:'#app',
template:'<div>{{test}}</div>',
data:{
test:'hello world'
},
beforeCreate:function () {
console.log("beforeCreate");
},
created:function () {
console.log('created');
},
beforeMount:function () {
console.log(this.$el);
console.log('beforeMount'); //此时hello world并没有渲染在页面上
},
mounted:function () {
console.log(this.$el);
console.log("mounted"); //此时hello worlf已经渲染在页面上了
},
beforeDestory:function () {
console.log("beforeDestory") //实例没有销毁之前
},
destoryed:function () {
console.log("destoryed") //实例已经被销毁
},
beforeUpdate:function () {
console.log("beforeUpdate") //数据更新渲染前
},
updated:function () {
console.log("updated") //数据更新渲染后
}
})
</script>
</body>
</html>
<!--
在vue中一共有十一个生命周期函数 这里只列举了8个 后三个 会在项目中体现
-->