Vue入门笔记Day4

最新推荐文章于 2024-08-13 16:15:07 发布

阿浩！

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量71

点赞数

分类专栏： Vue 文章标签： vue javascript js nodejs

本文链接：https://blog.csdn.net/weixin_43273921/article/details/115368595

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

阿浩！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门笔记Day4

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="tex
复制链接

扫一扫

专栏目录