Vue.js学习笔记——Vue实例生命周期

最新推荐文章于 2023-08-08 09:08:48 发布

你不在我都在

最新推荐文章于 2023-08-08 09:08:48 发布

阅读量165

点赞数

分类专栏： VUE.JS

本文链接：https://blog.csdn.net/weixin_41461319/article/details/101026318

版权

VUE.JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					msg: "hi vue",
				},
				//在实例初始化之后,数据观测(data)和event/watcher事件配置之前被调用
				beforeCreate:function(){
					console.log('beforeCreate');
				},
				//在实例创建完成后被立即调用
				//在这一步,实例已经完成以下配置:数据观测,属性和方法的运算,watch/event事件回调
				//然而挂载阶段还没有开始,$el属性目前不可见
				created:function(){
					console.log('created');
				},
				//在挂载开始之前被调用:相关的渲染函数首次被调用
				beforeMount:function(){
					console.log('beforeMount');
				},
				//el 被创建的 vm.$el 替换,挂载成功
				mounted:function(){
					console.log('mounted');
				},
				//数据更新时调用
				beforeUpdate:function(){
					console.log('beforeUpdate');
				},
				//组件DOM已经更新,组件更新完成
				updated:function(){
					console.log('updated');
				}
			});
			setTimeout(function(){
				vm.msg="change....";
			},3000)
		</script>
		<style type="text/css">
		</style>
	</body>
</html>

你不在我都在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记——Vue实例生命周期

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> <...
复制链接

扫一扫