shangrila-xiu

112
文章
101
分类
33
标签

vue-常用指令的讲解

vue的常用指令的讲解

v-model数据绑定，通常与input一起使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box1">
		<!--数据更新，模板变化-->
		<div>{{msg}}</div>
      <script type="text/javascript">
       window.onload=function(){
				new Vue({
					el:'#box1',//选择器
					data:{
						msg:'Welcome to study!',//数据
					}
				});
			};
		</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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box1">
		<!--只绑定一次-->
		<div >{{*msg}}</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box1',
					data:{
						msg:'Welcome to study!'
					}
				});
			};
		</script>
	</body>
</html>

HTML转义输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box1">
		<!--HTML转意输出-->
		<div>{{{msg}}}</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box1',
					data:{
						msg:'Welcome to study!'
					}
				});
			};
		</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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box1">
		<!--数据更新，模板变化-->
		<div>{{msg}}</div>
		<input type="text" v-model="msg"/>
		<!--只绑定一次-->
		<div >{{*msg}}</div>
		<!--HTML转意输出-->
		<div>{{{msg}}}</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box1',
					data:{
						msg:'Welcome to study!'
					}
				});
			};
		</script>
	</body>
</html>

for-in循环的讲解

语法：v-for=”key in 数组名或者json名”

值的显示：

在数组中：，也可以包含索引，写法为： ；
在json中：除了上面的写法，还有一个值：来获取键的名称
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>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="key in arr">
					{{key }} {{$index}}
				</li>
				<li v-for="value in json">
					{{value}}
				</li>
			</ul>
		</div>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						arr:["apple","banana","pear","orange"],
						json:{a:'I',b:'love',c:'you'}
					},
				});
			};
		</script>
	</body>
</html>

在json中还可以这样写循环：

1
v-for="(k,v) in json"
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="(k,v) in json">
					{{k}} {{v}} {{$index}} {{$key}}
				</li>
			</ul>
		</div>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						json:{a:'I',b:'love',c:'you'}
					},
				});
			};
		</script>
	</body>
</html>

vue事件

v-on:click=”函数()”——–>可以有参数，也可以没有参数

除了v-on:click，还有很多的鼠标键盘事件

1
2
3
4
5
6
7
v-on:mouseover
v-on:dblclick
v-on:mouseout
v-on:mousedown
v-on:mouseup
v-on:keyup
v-on:keydown........
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="btn">
			<input type="button" v-on:click="add()" value="按钮"/>
			<ul>
				<li v-for="value in arr">
					{{value}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
				window.onload=function(){
					new Vue({
						el:'#btn',
						data:{//数据
							arr:["apple","banana","pear","orange"],
						},
						methods:{//方法和函数
							add:function(){
								this.arr.push("tomoto");
							}
						},
					});
				};
			</script>	
	</body>
</html>

vue显示和隐藏

v-show=”true/false”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<div style="background: #FFB800;width: 100px;height: 200px;" v-show="true"></div>
		</div>
		<script>
			new Vue({
				el:'#box',
			
			});
		</script>
	</body>
</html>

或者也可以是下面的方法，但是在vue中建议使用data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
		<div style="background: #FFB800;width: 100px;height: 200px;" v-show="a"></div>
		</div>
		<script>
			new Vue({
				el:'#box',
				data:{
					a:true,
				},
				
			});
		</script>
	</body>
</html>

点击按钮使div消失

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<input type="button" value="点击按钮下面的DIV消失" v-on:click="a=false" />
		<div style="background: #FFB800;width: 100px;height: 200px;" v-show="a"></div>
		</div>
		<script>
			new Vue({
				el:'#box',
				data:{
					a:true
				},
			});
		</script>
	</body>
</html>