Vue的学习之生命周期

一、生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的学习</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!"
				},
				// 开始进行生命周期
				// 页面加载之前被调用
				beforeCreate:function(){
					alert('beforeCreate');
				},
				created:function(){
					alert('created');
				},
				beforeMount:function(){
					alert('beforeMount');
				},
				mounted:function(){
					alert('mounted');
				},
				// 只有更新数据后才会被调用
				beforeUpdate:function(){
					alert('beforeUpdate');
				},
				updated:function(){
					alert('updated');
				}
			});
			// vm.$data.msg = 'change';
			// setTimeout()函数
			setTimeout(function(){
				vm.$data.msg = 'change....';
			},3000)
		</script>
	</body>
</html>

这一节要花点时间整明白生命周期是个什么原理，可以多试试代码的效果，自己写一些，咱们接下来学习下一节！！！

Vue的学习之生命周期

一、生命周期

悦读