vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。
vue.js常用指令
Vue.js使用方式及文本插值
Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
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 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>vue插值</title>
</head>
<body>
<div ></html> |
首先创建一个vue实例，并在创建实例的过程中传入一个对象。
该对象的第一个属性名为el，它的值是我们需要渲染的目标标签，我们通过属性查找定位这个标签。
该对象的第二个属性名为data，里面就是我们要渲染给浏览器标签的数据，另外还有其他属性，我们在后面的章节中一一介绍。
vue.js模板语法之常用指令
看了上面的代码，可能大家觉得vue也不过如此，原生js代码两行就能完成的事情，vue需要6行代码来实现，还是原生js比较简洁，其实，上面的代码只是给大家演示了挂档的技术，究竟是汽车比较快，还是骑马比较好，我们通过后面的不断学习，来解释这个问题。
接下来，我们来介绍踩油门的技术。
上面的代码中，我们演示了如何将数据渲染进DOM标签，vue帮助我们找到标签并且渲染，对于程序员来说，我们不再需要重复的找标签，绑定事件，然后再找标签，再绑定事件这样的工作了，vue帮我们都做好了，我们只需要关注具体的数据，以及业务逻辑。这也是vue给自己的定位，数据模板引擎。
它是引擎，引擎帮助我们驱动数据渲染到模板。
所以，vue的大部分内容，都是为了渲染数据用的，接下来，我们介绍vue中用来渲染数据的常用指令。
常用指令: v-html
双大括号语法无法渲染HTML标签，我们需要使用v-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 >
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div ></html> |
常用指令：v-text
类似双大括号语法渲染数据的另一种方式是使用v-text。
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>v-html</title>
</head>
<body>
<div ></html> |
常用指令：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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="../vue模板语法之插值/vue.js"></script>
</head>
<body>
<div ></html> |
常用指令：v-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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="./vue.js"></script>
</head>
<body>
<div ></html> |
通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。
常用指令：v-show
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="./vue.js"></script>
</head>
<body>
<div ></html> |
与v-if不同的是，v-show通过样式的display控制标签的显示。
v-if和v-show的性能比较
我们简单比较一下二者的区别：
实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；
加载性能：v-if加载速度更快，v-show加载速度慢
切换开销：v-if切换开销大，v-show切换开销小
v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。
常用指令：v-bind
绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。
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 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style>
.active {
background-color: #2b84da;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div ></html> |
常用指令：v-on
另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。
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 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>v-on</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div ></html> |
常用指令：v-model
上面演示的是通过vue实例将数据渲染进模板，并且在控制台，我们修改数据之后，修改后的数据能够及时（官方称之为响应式）的渲染到模板层，那么，如果有这样的需求，比如有一个input标签，当用户修改渲染的原始数据后，打印修改后的数据，简单说，我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。
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>v-model</title>
</head>
<body>
<div ></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 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div ></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
52
53
54
55
56
57
58
59
60
61
62
63 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div ></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
52 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px;
background-color: #ff0000;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div ></html> |
常用指令：获取DOM元素
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>获取DOM</title>
<script src="./vue.js"></script>
</head>
<body>
<div ></html> |
项目：todoList版本一
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="./vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
margin: 20px 400px;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
</style>
</head>
<body>
<div ></html> |
项目：todoList版本二
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135 | <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="./vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
margin: 20px 400px;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
</style>
</head>
<body>
<div ></html> |
好了，以上就是vue常用指令介绍。