首页 > 其他分享> > Vue入门笔记Day4

Vue入门笔记Day4

2021-04-01 14:00:21 作者：互联网

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>

beforeCreate

（2）.created

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>

beforeMount

（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>

mounted

（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>

在这里插入图片描述

标签：function,Vue,console,入门,Day4,vm,beforeCreate,log
来源： https://blog.csdn.net/weixin_43273921/article/details/115368595