2_1 Vue生命周期实例_案例讲解

最新推荐文章于 2024-09-14 17:41:03 发布

上晴下雪

最新推荐文章于 2024-09-14 17:41:03 发布

阅读量133

点赞数

分类专栏： vue 文章标签： php

本文链接：https://blog.csdn.net/xueerkeji/article/details/106029169

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>Vue生命周期实例</title>
	<script type="text/javascript" src="./vue.js"></script>

</head>
<body>
	<div id="app">{{content}}</div>
	<script type="text/javascript">
	//标题：Vue实例的生命周期钩子
	//详解：生命周期函数就是Vue实例在某一个时间点会自动执行的函数
	
	//创建Vue实例
	var vm = new Vue({
		//挂载指定DOM元素
		el:'#app',
		//数据
		data:{
			content:'你好，中国'
		},
		//初始化之后（数据观测之前（data ovserver和）和event/watcher事件配置之前调用）
		beforeCreate:function(){
			console.log('beforeCreate');
		},
		//实例创建完成后调用（在此时，实例已完成配置有：数据观测（data observer）,property 和方法的运算，watch/event 事件回调。）
		//注意：挂载阶段还没开始 $el propetry 目前尚不可用
		careated:function(){
			console.log('careated');
		},
		//实例挂载开始之前被调用
		beforeMount:function(){
			console.log('beforeMount');
		},
		//实例挂载后调用
		mounted:function(){
			console.log('mounted');
		},
		//数据更新前
		beforeUpdate:function(){
			console.log('beforeUpdate');
		},
		//数据更新之后
		updated:function(){
			console.log('updated');
		},
		//实例销毁之前调用
		beforeDestroy:function(){
			console.log('beforeDestroy');
		},
		//实例销毁之后调用
		destroyed:function(){
			console.log('destroyed');
		}


	});
	</script>
</body>
</html>