Vue基础

发表于 | 分类于 | 阅读次数:
字数统计: 1.4k | 阅读时长 ≈ 8

基础使用~

生命周期函数

介绍

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

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue实例生命周期函数</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app"></div>

	<script>
		// 生命周期函数就是vue实例在某一个时间点会自动执行的函数
		var vm = new Vue({
			el: "#app",
			template: "<div>{{test}}</div>",
			data: {
				test: "hello world"
			},
			beforeCreate: function() {
				console.log("beforeCreate");
			},
			created: function() {
				console.log("created");
			},
			beforeMount: function() {
				console.log(this.$el);
				console.log("beforeMount");
			},
			mounted: function() {
				console.log(this.$el);
				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>

模板语法

后续会继续增加~

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 lang="en">
<head>
	<meta charset="UTF-8">
	<title>模版语法</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<div>{{name + ' Lee'}}</div>
		<div v-text="name + ' Lee'"></div>	<!--不做html解析-->
		<div v-html="name + ' Lee'"></div>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				name: "Dell"
			}
		})
	</script>
</body>
</html>

计算属性，方法和侦听器

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性，方法，侦听器</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
		{{age}}
	</div>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				firstName: "Dell",
				lastName: "Lee",
				fullName: "Dell Lee",
				age: 28
			},
            //侦听器
			watch: {
				firstName: function() {
					console.log("计算了一次");
					this.fullName = this.firstName + " " + this.lastName;
				},
				lastName: function() {
					console.log("计算了一次");
					this.fullName = this.firstName + " " + this.lastName;
				}
			}
			// 方法
			// methods: {
			// 	fullName: function() {
			// 		console.log("计算了一次");
			// 		return this.firstName + " " + this.lastName;
			// 	}
			// }
			// 计算属性
			// computed: {
			// 	fullName: function() {
			// 		console.log("计算了一次");
			// 		return this.firstName + " " + this.lastName
			// 	}
			// }
		})
	</script>
</body>
</html>

计算属性的setter和getter

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性的setter和getter</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
	</div>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				firstName: "Dell",
				lastName: "Lee"
			},
			computed: {
				fullName: {
					get: function() {
						return this.firstName + " " + this.lastName
					},
					set: function(value) {
						var arr = value.split(" ");
						this.firstName = arr[0];
						this.lastName = arr[1];
					}
				}
			}
		})
	</script>
</body>
</html>

样式绑定

两种：对象语法，数组语法

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue中的样式绑定</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id="app">
		<div :style="[styleObj, {fontSize: '20px'}]" @click="handleDivClick">
			Hello world
		</div>
	</div>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				styleObj: {
					color: "black"
				}
			},
			methods: {
				handleDivClick: function() {
					this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
				}
			}
		})
	</script>
</body>
</html>

条件渲染

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 lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue中的条件渲染</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id="app">
		<div v-if="show">
			用户名：<input key="username" /> <!--key防止vue复用-->
		</div>
		<div v-else>
			邮箱名：<input key="password"/>
		</div>
	</div>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				show: false,
			}
		})
	</script>
</body>
</html>

列表渲染

数组

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vue中的列表渲染</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<template v-for="(item,index) of list">
			<div >
				{{item.text}} ---- {{index}}
			</div>
			<span>
				{{item.text}}
			</span>
		</template>
		
	</div>
</body>
<script>
    //push pop shift unshift splice sort reverse  动态改变数据直接页面生效
    //或者改变list引用
    //Vue.set()或vm.$set()
	var vm = new Vue({
		el:"#app",
		data:{
			list:[
				{
					id:"1",
					text:"hello"
				},
				{
					id:"2",
					text:"world"
				},
				{
					id:"3",
					text:"emmmmm"
				}
			]
		}
	})
</script>
</html>

对象

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue中的列表渲染</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-for="(item, key, index) of userInfo">
			{{item}} --- {{key}} -- {{index}}
		</div>
	</div>

	<script>
        //Vue动态改变，Vue.set(vm.userInfo,"","")
        //vm.$set(vm.userInfo,"","")
		var vm = new Vue({
			el: "#app",
			data: {
				userInfo: {
					name: "Dell",
					age: 28,
					gender: "male",
					salary: "secret"
				}
			}
		})
	</script>
</body>
</html>