Vue基础知识-（二）基础知识

本文最后更新于：December 3, 2021 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

1.模板语法

提示：注意自行查看源代码。
如果需要某属性值需要动态改变时，就不能再用{ { } }来进行替代。即，不能这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="root">
		<h1>hello,{{name}}</h1>
		<h2>年龄：{{age}}</h2>
		<a href="url">点击跳转</a> //错误写法
</div>

<script type="text/javascript">
		Vue.config.productionTip = false
		
		//创建vue示例
		const x = new Vue({
			el:document.getElementById('root'),
			data:{
				name:'loong',
				age:23,
				url:'www.tothefor.com',
				hello:'123'
			}
		})
	</script>

在源代码中可以看见。其中，name和age可以正常替代，但是url是不能正常替代的。需要加上指令：v-bind进行数据绑定。
即：

1
<a v-bind:href="url">点击跳转</a>

这样在源码中可以看见，href的值就变成了正常的了。当然了，如果需要多个，则每个属性之前都需要加上指令进行数据绑定。如：

1
<a v-bind:href="url" v-bind:x="hello">点击跳转</a>

v-bind:href="url"也可以简写成:href="url"。

1.1 总结

  1. 插值语法

用于解析标签体内容。写法：{ { xxxxx } } ，xxxxx 是JS表达式，且可以直接读取到data中的所有属性。

  1. 指令语法

用于解析标签（包括：标签属性、标签体内容、绑定事件……）。

2.数据绑定

2.1 单向数据绑定

用v-bind:实现。

示例：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<style type="text/css">
		*{
			margin-top:20px;
		}
		.demo2{
			height: 50px;
			background-color: skyblue;
		}	
		</style>
		
	</head>
	<body>
	<div id="root">
		<h1>hello,{{name}}</h1>
		<h2>年龄：{{age}}</h2>
		单向数据绑定：<input type="text" v-bind:value="name" /> <br>
	</div>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//创建vue示例
		const x = new Vue({
			el:'#root',
			data:{
				name:'loong'
			}
		})
	</script>
	</body>
</html>

在网页中打开控制台，在Vue下可以看见data中是有name属性的，且值为loong。当我们在控制台中修改name属性的值时，页面中的值也随之发生了变化。数据只能从data流向页面，这就是单向数据绑定。

2.2 双向数据绑定

用v-model:实现。

示例：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<style type="text/css">
		*{
			margin-top:20px;
		}
		.demo2{
			height: 50px;
			background-color: skyblue;
		}	
		</style>
		
	</head>
	<body>
	<div id="root">
		<h1>hello,{{name}}</h1>
		<h2>年龄：{{age}}</h2>
		双向数据绑定：<input type="text" v-model:value="name" /> 
    <input type="text" v-model="name" />//v-model:value可以简写成v-model，因为model默认收集的就是value值。
	</div>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//创建vue示例
		const x = new Vue({
			el:'#root',
			data:{
				name:'loong'
			}
		})
	</script>
	</body>
</html>

同样，在网页的控制台中可以看见对应的属性和值，如果在控制台上改变属性的值，则页面中的值也发生变化。如果在页面中修改（示例中是输入框，直接输入即可），则控制台上也会改变。数据不仅能从data流向页面，还可以从页面流向data。这就是双向数据绑定。

使用注意事项

  1. v-model只能应用在表单类元素（输入类元素）上，简单说就是要有value值才行。如：输入框、单选框、多选框、选项列表、多行输入等。

3.el和Date的两种写法

常规写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
		Vue.config.productionTip = false
		
		//创建vue示例
		const x = new Vue({
			el:('#root'),
			data:{
				name:'loong',
				age:23,
				url:'www.tothefor.com',
				hello:'234'
			}
	console.log(x)
	</script>

3.1 el的另一种写法

1
x.$mount('#root')

这种的写法比较灵活。后面可见样例。

3.2 data的另一种写法

前面的那种是对象式，这种是函数式。

1
2
3
4
5
6
7
8
data:function(){
		 	return{
		 		name:'loong',
		 		age:23,
		 		url:'www.tothefor.com',
		 		hello:'234'
		 	}
		 }

也可以将:function省略，即：

1
2
3
4
5
6
7
8
data(){
				return{
					name:'loong',
					age:23,
					url:'www.tothefor.com',
					hello:'234'
				}
			}

3.3 实例

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
<div id="root">
	<h1>hello,{{name}}</h1>
	<h2>年龄：{{age}}</h2>
	<a v-bind:href="url" v-bind:x="hello">点击跳转</a>
</div>

<script type="text/javascript">
	Vue.config.productionTip = false
	
	//创建vue示例
	const x = new Vue({
		data(){
			return{
				name:'loong',
				age:23,
				url:'www.tothefor.com',
				hello:'234'
			}
		}
		
	})
	setTimeout(()=>{ //暂停1秒
		x.$mount('#root')
	},1000)
	
console.log(x)
</script>

4.数据代理

通过一个对象代理另一个对象中属性的操作（读写）。使用Object.defineproperty方法。

示例：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<style type="text/css">
		*{
			margin-top:20px;
		}
		.demo2{
			height: 50px;
			background-color: skyblue;
		}	
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
		let person = {
			name:'loong',
			sex:'男',
			// age:19
		}
		Object.defineProperty(person,'age',{
			value:18, //属性值
			enumerable:true, //控制是否可以枚举，默认false
			writable:true, //控制是否可以修改,默认false
			configurable:true  //控制是否可以被删除，默认false
		})
		
		console.log(Object.keys(person))
		console.log(person)
	</script>
	
	</body>
</html>

直接在person中写的属性，可以删改枚举，用数据代理的，默认是不可以的。可以在控制台中使用一下命令，进行验证：

  • person ：输出
  • person.age=100 ：修改属性值为100
  • delete person.age ：删除属性

4.1 函数

getter：当会读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值。

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<style type="text/css">
		*{
			margin-top:20px;
		}
		.demo2{
			height: 50px;
			background-color: skyblue;
		}	
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
		let num = 23;
		let person = {
			name:'loong',
			sex:'男',
			// age:19
		}
		Object.defineProperty(person,'age',{
			// value:18,
			// enumerable:false, //控制是否可以枚举，默认false
			// writable:true, //控制是否可以修改,默认false
			// configurable:true  //控制是否可以被删除，默认false
			
			//当会读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
			get:function(){
				return num;
			},
			//也可以简写成以下形式
			get(){
				return num;
			}
		
		})
		
		console.log(Object.keys(person))
		console.log(person)
	</script>
	
	</body>
</html>

setter：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<style type="text/css">
		*{
			margin-top:20px;
		}
		.demo2{
			height: 50px;
			background-color: skyblue;
		}	
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
		let num = 23;
		let person = {
			name:'loong',
			sex:'男',
			// age:19
		}
		Object.defineProperty(person,'age',{
			// value:18,
			// enumerable:false, //控制是否可以枚举，默认false
			// writable:true, //控制是否可以修改,默认false
			// configurable:true  //控制是否可以被删除，默认false
			
			//当会读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
			get(){
				return num;
			},
			//当会修改person的age属性时，set函数（setter）就会被调用，且会收到修改的新值
			set(value){
				num=value; //修改
			}
		
		})
		
		console.log(Object.keys(person))
		console.log(person)
	</script>
	
	</body>
</html>

在Vue中，vm._data中的数据和data中的数据是同一个。，代码如下，可自行在控制台中使用vm._data.name和vm._data.age进行查看。

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<style type="text/css">
		*{
			margin-top:20px;
		}
		.demo2{
			height: 50px;
			background-color: skyblue;
		}	
		</style>
		
	</head>
	<body>
	<div id="root">
		<h1>hello,{{name}}</h1>
		<h2>年龄：{{age}}</h2>
	</div>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//创建vue示例
		const vm = new Vue({
			el:'#root',
			data:{
				name:'loong',
				age:23
			}
		})
		
	// console.log(x)
	</script>
	
	</body>
</html>

基本原理

通过vm对象来代理data对象中属性的操作。通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。

Vue
Vue

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/2741274820.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！