天天看点

Vue的生命周期(钩子函数)

vue的生命周期为开始创建、初始化数据、编译模板、挂载dom、渲染、更新、再渲染到销毁的过程

在vue创建实例时需要传入一个选项参数对象,下面时一个钩子函数

(1)created()函数:实例简历完成后使用。

(2)mounted()函数:el挂载到实例上之后调用。

(3)beforedestroy()函数:实例被销毁之前使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<p>{{title}}</p>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
				title:"nihao"
			},
			created:function(){
				this.title="生命周期钩子函数";
				console.log("created()钩子函数执行");
			},
			mounted:function(){
				console.log(this.$el);
				console.log("title的值",this.$el);
				console.log("mounted()执行");
				
			}
		})
	</script>
</html>
           
Vue的生命周期(钩子函数)

继续阅读