<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 生命周期函数就是 Vue实例在某一个时间点自动执行的函数
var vm = new Vue({
el : "#app",
template : "<div>{{message}}</div>",
data : {
message : "hello world"
},
// vue实例基础初始化之后，就会触发
beforeCreate : function(){
console.log("beforeCreate");
},
created : function(){
console.log("created");
},
// 如果没有template模板，就会将el内的当成模板
// 如果有template，就会用template里的东西
// beforeMount：当和模板结合，在渲染页面之前的一瞬间，执行beforeMount函数（还没有渲染到页面上————用模板的情况下）
beforeMount : function(){
console.log(this.$el);
console.log("beforeMount");
},
// 这时候hello World就会渲染在页面上了
// mounted就会自动执行（已经渲染了）
mounted : function(){
console.log(this.$el);
console.log("mounted");
},
// 实例还没有销毁，在销毁的前一刻
// 销毁实例：vm.$destroy()
beforeDestroy : function(){
console.log("beforeDestory");
},
// 实例被销毁了
destroyed : function(){
console.log("destoryed");
},
// 数据发生改变，还没渲染之前
beforeUpdate : function(){
console.log("beforeUpdate");
},
// 数据改变，渲染之后
updated : function(){
console.log("updated");
}
})
</script>
</body>
</html>vue的生命周期函数
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
