vue笔记-生命周期

最新推荐文章于 2024-06-06 11:33:58 发布

ClarenceJohnson

最新推荐文章于 2024-06-06 11:33:58 发布

阅读量119

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43108539/article/details/103887023

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

一直不知道如何学习前端，之前在做html和css以及JavaScript的应用，逐渐地又学习到了利用jQuery和bootstrap写前端，现在大前端的流行使得vue、angular、三足鼎立，国内目前比较火的是vue，故而进行学习。

vue生命周期同angular以及微信小程序类似，记录下当前图以便于后期深入学习和分析

在这里插入图片描述以下是部分试验代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>

		<section id="app-8">
			{{data}}
		</section>

		<script>
			var myVue = new Vue({
				el: "#app-8",
				data: {
					data: "aaaaa",
					info: "nono"
				},
				beforeCreate: function() {
					console.log("创建前========")
					console.log(this.data)
					console.log(this.$el)
				},
				created: function() {
					console.log("已创建========")
					console.log(this.info)
					console.log(this.$el)
				},
				beforeMount: function() {
					console.log("mount之前========")
					console.log(this.info)
					console.log(this.$el)
				},
				mounted: function() {
					console.log("mounted========")
					console.log(this.info)
					console.log(this.$el)
				},
				beforeUpdate: function() {
					console.log("更新前========");

				},
				updated: function() {
					console.log("更新完成========");
				},
				beforeDestroy: function() {
					console.log("销毁前========")
					console.log(this.info)
					console.log(this.$el)
				},
				destroyed: function() {
					console.log("已销毁========")
					console.log(this.info)
					console.log(this.$el)
				}
			})
		</script>
	</body>
</html>
</body>
</html>

参考资料：

https://cn.vuejs.org/v2/guide/instance.html

ClarenceJohnson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记-生命周期

前言一直不知道如何学习前端，之前在做html和css以及JavaScript的应用，逐渐地又学习到了利用jQuery和bootstrap写前端，现在大前端的流行使得vue、angular、三足鼎立，国内目前比较火的是vue，故而进行学习。vue生命周期同angular以及微信小程序类似，记录下当前图以便于后期深入学习和分析以下是部分试验代码：<!DOCTYPE html>&l...
复制链接

扫一扫