Vue系列-Day01-第一个Vue程序

第一个VUE程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ counter }}
		</div>
        
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					counter :"www.hikki.site"
				}
			});
		</script>
	</body>
</html>

第一个程序

if-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if = "test">www.hikki.site</h1>
			<h1 v-else >这是我的博客</h1>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					test: true

				}
			});
		</script>
	</body>
</html>

if-else

if-else-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if = "test === 'A'">www.hikki.site</h1>
			<h1 v-else-if = "test ==='B'">B</h1>
			<h1 v-else >C</h1>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					test: 'A'
				}
			});
		</script>
	</body>
</html>

if-else-if

v-for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<li v-for="item in items">
			{{item.msg}}
			</li>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					items:[
						{msg:'www.hikki.site'},
						{msg:'筆記'},
						{msg:'我的博客'},
					]
				}
			});
		</script>
	</body>
</html>

image-20220801001856459

监听变量变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{a}}
</div>

<script type="text/javascript">
var data = { a : "变量变化前" };
var vm = new Vue({
	el   : "#app",
	data : data
});

vm.$watch('a', function(newVal, oldVal){
	console.log(newVal, oldVal);
})

vm.$data.a = "变量变化后"
</script>
</body>
</html>

image-20220801004415392

生命周期的监听

可以指定事件在某个事件完成前后执行，处理特定的的事情。

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.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",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "3秒后改变";
}, 3000);
</script>
</body>
</html>

image-20220801004956374