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> |