Vue_ElementUI之4_vue生命周期

最新推荐文章于 2024-11-27 21:30:00 发布

RobotB

最新推荐文章于 2024-11-27 21:30:00 发布

阅读量705

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/m0_47572402/article/details/113794194

版权

Web前端专栏收录该内容

8 篇文章

订阅专栏

这篇文章为Web开发者介绍了Vue.js的生命周期钩子函数，包括beforeCreate、created、beforeMount等，并通过实例演示了如何在这些关键阶段执行自定义操作。适合初级到中级前端学习者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文适用于Web入门级或偏中级前端爱好者等，内容是作者在51CTO的学习笔记，提交于github，有时候也没时间更新优快云，github对于部分同学可能也有一定的难度，本着开源的精神，较入门偏引导的小篇幅学习资料进行分享，希望对大家有帮助，也感谢大家的三联，我们走起！学到知识就好哦！知识版权申明，本知识体系是51CTO某位老师的课程，鉴于老师已在51CTO取得收益，故我不再进行版权申明和导流并作为知识技能分享，也希望老师看到能理解。

Vue生命周期钩子函数（回调函数）

钩子函数	说明
beforeCreate	Vue对象创建之前
created	Vue对象创建之后
beforeMount	Vue对象和文档节点挂载之前
mounted	Vue对象和文档节点挂载之后
beforeUpdate	视图数据改变之前
updated	视图数据改变之后
beforeDestory	Vue对象销毁之前
destroyed	Vue对象销毁之后

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期</title>
</head>
<body>

<!--DOM-->
<div id="app">
<span>span.name={{name}}</span>
<br>
<span>span.age={{age}}</span>
</div>

<!--引入vue-->
<script src="../js/vue.js"></script>

<!--javascript-->
<script>
<!--vue&javascript-->
	var data={
	name:'xu',
	age:20
};
	var vm=new Vue({
	el:'#app',
	data:data,
	//生命周期回调函数
	beforeCreate:function(){
	//创建Vue对象之前回调
	console.log('before');
	console.log(this);
	console.log(this.$data);
	console.log(this.$el);
	},
	//创建Vue对象之后回调
	created:function(){
	console.log('created')
	console.log(this);
	console.log(this.$el);
	console.log(this.$data.age);
	},
	//绑定（挂载）view和model之前回调
	beforeMount:function(){
	console.log('beforeMount');
	console.log(this.$el.innerHTML);
	},
	//绑定（挂载）view和model之后回调
	mounted:function(){
	console.log('Mount');
	console.log(this.$el.innerHTML);
	}
});
	console.log('now');
	console.log(vm.$data.name);
</script>
</body>
</html>