1.Vue实例变量vm app 一般都代表vue实例 el:负责定义Vue定义的接管的dom最外层标签2.生命周期函数生命周期函数就是Vue实例在某一个时间点会自动执行的函数。（1）beforeCreate!DOCTYPE htmlhtmlheadmet...

1.Vue实例

变量vm app 一般都代表vue实例
el:负责定义Vue定义的接管的dom最外层标签

2.生命周期函数

生命周期函数就是Vue实例在某一个时间点会自动执行的函数。

（1）beforeCreate

<!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">
			Hello World
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				beforeCreate:function(){
					console.log("beforeCreate")
				}
			})
		</script>
	</body>
</html>

（2）.created

（3）.beforeMount

模板和数据相结合即将挂载到页面上之前执行。

<!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">
			Hello World
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				template:"<div>Hello World</div>",
				beforeCreate:function(){
					console.log("beforeCreate")
				},
				created:function(){
					console.log("created")
				},
				beforeMount:function(){
					console.log("beforeMount")
				}
			})
		</script>
	</body>
</html>

（4）.mounted

<!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">
			Hello World
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				template:"<div>Hello World</div>",
				beforeCreate:function(){
					console.log("beforeCreate")
				},
				created:function(){
					console.log("created")
				},
				beforeMount:function(){
					console.log("beforeMount")
				},
				mounted:function(){
					console.log("mounted")
				}
			})
		</script>
	</body>
</html>

（5）.beforeDestroy与destroyed

vm.$destroy（）可以消除vm组件

<!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">
			Hello World
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				template:"<div>Hello World</div>",
				beforeCreate:function(){
					console.log("beforeCreate")
				},
				created:function(){
					console.log("created")
				},
				beforeMount:function(){
					console.log("beforeMount")
				},
				mounted:function(){
					console.log("mounted")
				},
				beforeDestroy:function(){
					console.log("beforeDestroy")
				},
				destroyed:function(){
					console.log("destroyed")
				}
			})
		</script>
	</body>
</html>

（6）.beforeUpdate与updated

vm.text=“text”//修改text里面的内容

<!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">
			Hello World
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				template:"<div>{{text}}</div>",
				data:{
					text:"hello world"
				},
				beforeCreate:function(){
					console.log("beforeCreate")
				},
				created:function(){
					console.log("created")
				},
				beforeMount:function(){
					console.log("beforeMount")
				},
				mounted:function(){
					console.log("mounted")
				},
				beforeDestroy:function(){
					console.log("beforeDestroy")
				},
				destroyed:function(){
					console.log("destroyed")
				},
				beforeUpdate:function(){
					console.log("beforeUpdate")
				},
				updated:function(){
					console.log("updated")
				}
			})
		</script>
	</body>
</html>

Vue入门笔记Day4

1.Vue实例

2.生命周期函数

（1）beforeCreate

（2）.created

（3）.beforeMount

（4）.mounted

（5）.beforeDestroy与destroyed

（6）.beforeUpdate与updated

基础教程推荐