vue.js官方给本身的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的经常使用指令。css
vue.js经常使用指令
Vue.js使用方式及文本插值
Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最多见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值</title>
</head>
<body>
<div id="app-01">
{{ message }}
</div>
<!--安装方式一-->
<script src="../../statics/vue.js"></script>
<!--安装方式二-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>-->
<script>
// 原生js
let odiv = document.getElementById("app-01");
odiv.innerText = "Hello Vue!";
// vue的核心之一是容许采用简洁的模板语法来将数据渲染进DOM系统
let app01 = new Vue({
el: "#app-01",
data: {
message: "Hello Vue!"
}
});
</script>
</body>
</html>
|
首先建立一个vue实例，并在建立实例的过程当中传入一个对象。前端
该对象的第一个属性名为el，它的值是咱们须要渲染的目标标签，咱们经过属性查找定位这个标签。vue
该对象的第二个属性名为data，里面就是咱们要渲染给浏览器标签的数据，另外还有其余属性，咱们在后面的章节中一一介绍。python
vue.js模板语法之经常使用指令
看了上面的代码，可能你们以为vue也不过如此，原生js代码两行就能完成的事情，vue须要6行代码来实现，仍是原生js比较简洁，其实，上面的代码只是给你们演示了挂档的技术，到底是汽车比较快，仍是骑马比较好，咱们经过后面的不断学习，来解释这个问题。程序员
接下来，咱们来介绍踩油门的技术。web
上面的代码中，咱们演示了如何将数据渲染进DOM标签，vue帮助咱们找到标签而且渲染，对于程序员来讲，咱们再也不须要重复的找标签，绑定事件，而后再找标签，再绑定事件这样的工做了，vue帮咱们都作好了，咱们只须要关注具体的数据，以及业务逻辑。这也是vue给本身的定位，数据模板引擎。ajax
它是引擎，引擎帮助咱们驱动数据渲染到模板。django
因此，vue的大部份内容，都是为了渲染数据用的，接下来，咱们介绍vue中用来渲染数据的经常使用指令。element-ui
经常使用指令: 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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app01">
<div v-html="vue"></div>
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01",
data: {
vue: '<h1>Hello Vue!</h1>'
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app01">
<div v-text="name"></div>
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01",
data: {
name: "Alex"
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="../vue模板语法之插值/vue.js"></script>
</head>
<body>
<div id="app01">
<h2>alex的爱好</h2>
<ul>
<li v-for="item in qianqian">{{ item }}</li>
</ul>
<h2>学生的爱好</h2>
<ul>
<li v-for="stu in students">{{ stu.name }}的爱好是{{ stu.hobby}}</li>
</ul>
</div>
<script>
let app01 = new Vue({
el: "#app01",
data: {
guniang: [
"学习",
"逛街",
"美甲"
],
students: [
{
name: "alex",
hobby: "girls"
},
{
name: "peiqi",
hobby: "girls"
},
{
name: "pizza",
hobby: "study"
}
]
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<!--<div v-if="role == 'shanshan'">-->
<!--<h2>欢迎小美女</h2>-->
<!--</div>-->
<!--<div v-if="role == 'longting'">-->
<!--<h2>欢迎小龙女</h2>-->
<!--</div>-->
<!--<div v-if="role == 'alex'">-->
<!--<h2>滚~~~</h2>-->
<!--</div>-->
<div v-if="role == 'shanshan'">
<h2>欢迎小美女</h2>
</div>
<div v-else-if="role == 'longting'">
<h2>欢迎小龙女</h2>
</div>
<div v-else>
<h2>滚~~~</h2>
</div>
</div>
<script>
// 请注意看HTML标签元素，v-if底层使用appendChild实现
let app01 = new Vue({
el: "#app01",
data: {
role: "shanshan"
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<h1 v-show="isShow">Hello Vue!</h1>
</div>
<script>
// v-show的实现原理是经过控制样式的display
let app01 = new Vue({
el: "#app01",
data: {
isShow: true
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style>
.active {
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<a v-bind:href='link' v-bind:class="{active: isActive}">去百度</a>
</div>
<script>
// 绑定属性，简写冒号：
let app01 = new Vue({
el: "#app01",
data: {
// urls: {
// url: "https://www.baidu.com",
// name: "百度"
// },
link: "https://www.baidu.com",
isActive: true
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<!--方式一-->
<a v-bind:href='link'
v-bind:class="{active: isActive}"
v-on:click="myClick"
v-on:mouseenter="mouseEnter"
@mouseleave="mouseLeave">去百度</a>
<!--方式二-->
<button v-on="{click: myClick,
mouseenter: mouseEnter,
mouseleave: mouseLeave}">
点我今晚吃鸡~~~
</button>
</div>
<script>
// 绑定属性，简写冒号：
let app01 = new Vue({
el: "#app01",
data: {
// urls: {
// url: "https://www.baidu.com",
// name: "百度"
// },
link: "https://www.baidu.com",
isActive: false
},
methods: {
myClick: function () {
// this.isActive = true;
console.log("大吉大利，今晚吃鸡~~~")
},
mouseEnter: function () {
console.log("鼠标来了~~~");
},
mouseLeave: function () {
console.log("鼠标走了~~~");
}
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app01">
<p>请选择你的性别</p>
<br>
<input v-model="name"/>
<p><input type="text" v-model="name"/></p>
<p>
<input type="checkbox" value="男" v-model="gender"/>
<input type="checkbox" value="女" v-model="gender"/>
</p>
<br>
{{ name }}
{{ gender }}
<p>请选择你的女友</p>
<select name="" id="" v-model="girlFriends">
<option>alex</option>
<option>pizza</option>
<option>peiqi</option>
</select>
<br>
{{ girlFriends }}
<p>
<textarea v-model="article"></textarea>
</p>
<br>
{{ article }}
</div>
<script src="./vue.js"></script>
<script>
let app01 = new Vue({
el: "#app01",
data: {
name: "alex",
gender: [],
girlFriends: [],
article: "这是一篇文章",
}
})
</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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python基础</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model.number="web"/></td>
</tr>
<tr>
<td>Django</td>
<td><input type="text" v-model.number="django"/></td>
</tr>
</tbody>
</table>
</div>
<script>
let app01 = new Vue({
el: "#app01",
data: {
python: 75,
web: 98,
django: 88
}
})
</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
52
53
54
55
56
57
58
59
60
61
62
63
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python基础</td>
<td><input type="text" v-model.number="python"/></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model.number="web"/></td>
</tr>
<tr>
<td>Django</td>
<td><input type="text" v-model.number="django"/></td>
</tr>
<tr>
<td>总分</td>
<td>{{ python + web + django }}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{ avgScore }}</td>
</tr>
</tbody>
</table>
</div>
<script>
// 计算属性放在缓存当中，只有数据修改时才从新计算
let app01 = new Vue({
el: "#app01",
data: {
python: 75,
web: 98,
django: 88
},
computed: {
sumScore: function () {
return this.python + this.web + this.django;
},
avgScore: function () {
return this.sumScore/3;
}
}
})
</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
52
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01" class="box" v-pos.left.bottom="post">
</div>
<script>
Vue.directive("pos", function (el, bindding) {
console.log(el);
console.log(bindding);
let decorators = bindding.modifiers;
if (bindding.value) {
// el.style.position = "fixed";
// el.style['right'] = 0;
// el.style['top'] = 0;
el.style['position'] = 'fixed';
// el.style['right'] = 0;
// el.style['top'] = 0;
for (let key in decorators) {
// console.log(el.style);
// console.log(typeof el.style);
el.style[key] = 0;
}
} else {
el.style.position = "static";
}
});
// 自定义属性
let app01 = new Vue({
el: "#app01",
data: {
post: true
}
})
</script>
</body>
</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 lang="en">
<head>
<meta charset="UTF-8">
<title>获取DOM</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<div ref="myBox">alex</div>
<button v-on:click="myAlex">点击alex变红</button>
</div>
<script>
// 错误实例button放在div外面
let app01 = new Vue({
el: "#app01",
methods: {
myAlex: function () {
this.$refs.myBox.style.color = "red";
}
}
})
</script>
</body>
</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 lang="en">
<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 id="todolist">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>TodoList</span>
<input id="waitInput" v-on:keyup.enter="todoEnter"
style="margin-left: 20px; width: 250px;"
v-model="waitInput"
placeholder="请输入待办事项"
/>
<el-button
style="float: right;
padding: 3px 0"
type="text"
v-on:click="todoEnter">添加待办
</el-button>
</div>
<div class="left">
<div style="text-align: center; margin-bottom: 10px; color: red;">待办</div>
<div v-for="(todo, index) in todoThings" class="text item">
<input v-on:click="addDone(index)"
style="margin-right: 15px;"
type="checkbox"
v-model="currentThing"
/>{{ todo }}
<img v-on:click="delThing(index)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
<div class="right">
<div style="text-align: center; margin-bottom: 10px; color: green;">已办</div>
<div v-for="(done, index) in doneThings" class="text item">
<input v-on:click="delDone(index)"
style="margin-right: 15px;"
type="checkbox"
/>{{ done }}
<img v-on:click="delThing(index)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
</el-card>
</div>
<script>
new Vue({
el: "#todolist",
data: {
waitInput: "",
currentThing: "",
checked: true,
todoThings: ['写代码', '五道口吃火锅', '超市买鸡蛋', '图书馆看书', '看电影', '看演唱会', '游泳', '跑步'],
doneThings: ['看书', '写博客', '散步', '与朋友聊天', '打电话给父母']
},
methods: {
todoEnter: function () {
if ( this.waitInput ) {
this.todoThings.push(this.waitInput);
this.waitInput = "";
}
},
addDone: function (index) {
event.currentTarget.checked = false;
let done = this.todoThings[index];
this.todoThings.splice(index, 1);
this.doneThings.push(done);
},
delDone: function (index) {
let notDone = this.doneThings[index];
this.doneThings.splice(index, 1);
this.todoThings.push(notDone);
},
delThing: function (index, currentlist) {
if ( currentlist === this.todoThings ) {
this.todoThings.splice(index, 1);
} else {
this.doneThings.splice(index, 1);
}
}
}
})
</script>
</body>
</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 lang="en">
<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 id="todolist">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>TodoList</span>
<input id="waitInput" v-on:keyup.enter="todoEnter"
style="margin-left: 20px; width: 250px;"
v-model="waitInput"
placeholder="请输入待办事项"
/>
<el-button
style="float: right;
padding: 3px 0"
type="text"
v-on:click="todoEnter">添加待办
</el-button>
</div>
<div class="left">
<div style="text-align: center; margin-bottom: 10px; color: red;">待办</div>
<div v-for="(todo, index) in todoThings" class="text item">
<input v-on:click="moveThings(index, todoThings)"
style="margin-right: 15px;"
type="checkbox"
v-model="currentThing"
/>{{ todo }}
<img v-on:click="delThing(index, todoThings)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
<div class="right">
<div style="text-align: center; margin-bottom: 10px; color: green;">已办</div>
<div v-for="(done, index) in doneThings" class="text item">
<input v-on:click="moveThings(index, doneThings)"
style="margin-right: 15px;"
type="checkbox"
/>{{ done }}
<img v-on:click="delThing(index, doneThings)"
style="width: 30px; height: 20px; float: right;
margin-right: 30px"
src="./delete.png"/>
</div>
</div>
</el-card>
</div>
<script>
new Vue({
el: "#todolist",
data: {
waitInput: "",
currentThing: "",
checked: true,
todoThings: ['写代码', '五道口吃火锅', '超市买鸡蛋', '图书馆看书', '看电影', '看演唱会', '游泳', '跑步'],
doneThings: ['看书', '写博客', '散步', '与朋友聊天', '打电话给父母']
},
methods: {
todoEnter: function () {
if ( this.waitInput ) {
this.todoThings.push(this.waitInput);
this.waitInput = "";
}
},
moveThings: function (index, currentlist) {
event.currentTarget.checked = false;
let spliceList = currentlist === this.todoThings ? this.todoThings : this.doneThings;
let pushList = spliceList === this.todoThings ? this.doneThings : this.todoThings;
let thing = currentlist[index];
spliceList.splice(index, 1);
pushList.push(thing);
},
delThing: function (index, currentlist) {
if ( currentlist === this.todoThings ) {
this.todoThings.splice(index, 1);
} else {
this.doneThings.splice(index, 1);
}
}
}
})
</script>
</body>
</html> |