網(wǎng)站建設(shè)合同是否繳納印花稅中國(guó)網(wǎng)站排名查詢
Vue的6種指令-前言
指令（Directives）是vue 為開發(fā)者提供的模板語法，用于輔助開發(fā)者渲染頁面的基本結(jié)構(gòu)。
vue 中的指令按照不同的用途可以分為如下6 大類
① 內(nèi)容渲染指令
② 屬性綁定指令
③ 事件綁定指令
④ 雙向綁定指令
⑤ 條件渲染指令
⑥ 列表渲染指令
指令是Vue開發(fā)中最基礎(chǔ)、最常用、最簡(jiǎn)單的知識(shí)點(diǎn)。
Vue的指令都是以 "v-" 為前綴的，指令是附加到 HTML 元素的特殊屬性，這些屬性可以更改行為，并基于 DOM 的表達(dá)式值提供對(duì) DOM 的控制。
一、內(nèi)容渲染指令
v-text、{{}}、v-html
內(nèi)容渲染指令用來輔助開發(fā)者渲染DOM 元素的文本內(nèi)容。
常用的主要有3個(gè)：
v-text
{{ }}
v-html
直接上代碼
<body>
<div id="app"><h1>1. v-text的使用</h1><p v-text="username"></p><p v-text="gender">性別</p><p>---------</p><h1>2. {{}}的使用</h1><p>姓名：{{username}}</p><p>性別：{{gender}}</p><p>---------</p><h1>3. v-html的使用</h1><p v-text="desc"></p><p>{{desc}}</p><p v-html="desc"></p>
</div><script src="../../lib/vue-2.6.12.js"></script>
<script>const vm = new Vue({el: '#app',data: {username: '李四',gender: '男',desc: '<i style="color:red">abc<i>'}})
</script>
</body>運(yùn)行結(jié)果
注意：
v-text 指令：會(huì)覆蓋元素內(nèi)默認(rèn)的值。
{{ }}：專門用來解決 v-text 會(huì)覆蓋默認(rèn)文本內(nèi)容的問題。{{ }} 語法的專業(yè)名稱是插值表達(dá)式！
v-html：v-text 指令和插值表達(dá)式只能渲染純文本內(nèi)容。如果要把包含HTML 標(biāo)簽的字符串渲染為頁面的HTML 元素， 則需要用到v-html 這個(gè)指令。
二、屬性綁定指令
v-bind
如果需要為元素的屬性動(dòng)態(tài)綁定屬性值，則需要用到 v-bind屬性綁定指令。
<body>
<!-- vue 實(shí)例要控制的 DOM 區(qū)域 -->
<div id="app"><input v-bind:placeholder="inputValue" type="text"><hr><img v-bind:src="imgSrc" alt="">
</div>
<!-- 導(dǎo)入 vue 腳本文件 -->
<script src="../../lib/vue-2.6.12.js"></script>
<script>// 創(chuàng)建 VM 實(shí)例對(duì)象const vm = new Vue({// 指定當(dāng)前 VM 要控制的區(qū)域el: '#app',// 數(shù)據(jù)源data: {// 文本框的占位符內(nèi)容inputValue: '請(qǐng)輸入內(nèi)容',// 圖片的 src 地址imgSrc: '../../images/logo.png',},})
</script>
</body>運(yùn)行結(jié)果
注意：
由于 v-bind 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡(jiǎn)寫形式
上述的v-bind的用法
<input v-bind:placeholder="inputValue" type="text">我們可以簡(jiǎn)寫寫成
<input :placeholder="inputValue" type="text">使用 Javascript 表達(dá)式
插值表達(dá)式、v-bind指令可以和JavaScriJavaScript表達(dá)式一起使用。
在 vue 提供的模板渲染語法中，除了支持綁定簡(jiǎn)單的數(shù)據(jù)值之外，還支持Javascript 表達(dá)式的運(yùn)算
<body>
<!-- vue 實(shí)例要控制的 DOM 區(qū)域 -->
<div id="app"><p>{{number + 1}}</p><p>{{ok ? 'True' : 'False'}}</p><p>{{message.split('').reverse().join('')}}</p><p :id="'list-' + id">xxx</p><p>{{user.name}}</p>
</div><!-- 導(dǎo)入 vue 腳本文件 -->
<script src="../../lib/vue-2.6.12.js"></script>
<script>// 創(chuàng)建 VM 實(shí)例對(duì)象const vm = new Vue({// 指定當(dāng)前 VM 要控制的區(qū)域el: '#app',// 數(shù)據(jù)源data: {// 數(shù)值number: 9,// 布爾值ok: false,// 字符串message: 'ABC',// id 值id: 3,// 用戶的信息對(duì)象user: {name: 'zs',},},})
</script>
</body>運(yùn)行結(jié)果
10
False
CBA
xxx
zs
三、事件綁定指令
vue 提供了 v-on 事件綁定指令，用來輔助程序員為DOM 元素綁定事件監(jiān)聽。
v-on
語法格式
<button v-on:事件名稱="事件處理函數(shù)的名稱"></button>注意：
原生DOM 對(duì)象有 onclick、oninput、onkeyup 等原生事件，在Vue中可以分別被v-on:click、v-on:input、v-on:keyup所替代！
v-on指令的使用
<div id="app"><h3>count 的值為：{{count}}</h3><!-- TODO：點(diǎn)擊按鈕，讓 data 中的 count 值自增 +1 --><button v-on:click="addCount">+1</button>
</div><!-- 導(dǎo)入 vue 腳本文件 -->
<script src="../../lib/vue-2.6.12.js"></script>
<script>// 創(chuàng)建 VM 實(shí)例對(duì)象const vm = new Vue({// 指定當(dāng)前 VM 要控制的區(qū)域el: '#app',// 數(shù)據(jù)源data: {// 計(jì)數(shù)器的值count: 0,},methods: {// 點(diǎn)擊按鈕，讓 count 自增 +1addCount() {this.count += 1},},})
</script>
</body>注意，這里面必須是使用this.count，這樣子賦值才會(huì)生效！this表示當(dāng)前的Vue實(shí)例對(duì)象！
運(yùn)行結(jié)果：
v-on指令的簡(jiǎn)寫形式
同上述的v-bind指令一樣，v-on 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡(jiǎn)寫形式
而且，如果函數(shù)內(nèi)部的邏輯很簡(jiǎn)單，也可以直接將其寫到" "內(nèi)！
<div id="app"><h3>count 的值為：{{count}}</h3><button @click="count+=1">+1</button>
</div>事件對(duì)象 event
在原生的DOM 事件綁定中，可以在事件處理函數(shù)的形參處，接收事件對(duì)象event
<body>
<!-- vue 實(shí)例要控制的 DOM 區(qū)域 -->
<div id="app"><h3>count 的值為：{{count}}</h3><button v-on:click="addCount">+1</button>
</div><!-- 導(dǎo)入 vue 腳本文件 -->
<script src="../../lib/vue-2.6.12.js"></script>
<script>// 創(chuàng)建 VM 實(shí)例對(duì)象const vm = new Vue({// 指定當(dāng)前 VM 要控制的區(qū)域el: '#app',// 數(shù)據(jù)源data: {// 計(jì)數(shù)器的值count: 0,},methods: {// 點(diǎn)擊按鈕，讓 count 自增 +1addCount(e) {const nowBgColor = e.target.style.backgroundColor;e.target.style.backgroundColor = nowBgColor === 'red' ? '' : 'red';this.count += 1;},},})
</script>
用參數(shù)e來接收事件對(duì)象，并且可以通過e來操作這個(gè)事件對(duì)象。
但是如果該函數(shù)中原本就有參數(shù)呢？
比如，需要傳遞一個(gè)步長(zhǎng)值step，我們可以直接這么寫：addCount(step, e) 嗎？顯然是不行的！
$event
vue 提供了名為$event 的特殊變量，用來表示原生的事件參數(shù)對(duì)象 event。$event 可以解決事件參數(shù)對(duì)象event 被覆蓋的問題。
用法如下所示
<button @click="addCount(2, $event)">+2</button>
<script>const vm = new Vue({...methods: {addCount(step, e) {...},},})
</script>事件修飾符
在事件處理函數(shù)中調(diào)用preventDefault() 或 stopPropagation() 是非常常見的需求。
因此，vue 提供了事件修飾符的概念，來輔助程序員更方便的對(duì)事件的觸發(fā)進(jìn)行控制。
在Vue中，有5個(gè)較為常用的事件修飾符：
事件冒泡、事件捕獲、事件處理程序詳解
四、雙向綁定指令
v-model
vue 提供了 v-model 雙向數(shù)據(jù)綁定指令，用來輔助開發(fā)者在不操作DOM 的前提下，快速獲取表單的數(shù)據(jù)。
但是，v-model 指令只能配合表單元素一起使用！！！
<div id="app"><p>用戶名是：{{username}}</p><input type="text" v-model="username"/><hr/><p>選中的省份是：{{province}}</p><select v-model="province"><option value="">請(qǐng)選擇</option><option value="1">北京</option><option value="2">河北</option><option value="3">黑龍江</option></select>
</div><script src="../../lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {// 姓名username: 'zs',// 省份province: '1',},})
</script>
</body>運(yùn)行結(jié)果
上述代碼，在input上面加了v-model，data中相應(yīng)屬性的值，會(huì)自動(dòng)被渲染到文本框上；當(dāng)文本框中的值被修改時(shí)，data里面的數(shù)據(jù)也會(huì)發(fā)生相應(yīng)的變化，這就是雙向綁定！
v-model 指令的修飾符
為了方便對(duì)用戶輸入的內(nèi)容進(jìn)行處理，vue 為 v-model 指令提供了3 個(gè)修飾符：
用法如下：
<div id="app">姓名：<input type="text" v-model.trim="username"/><hr/>年齡：<input type="text" v-model.number="age"/><hr/>地址：<input type="text" v-model.lazy="address"/>
</div>上述代碼
username：會(huì)自動(dòng)去除輸入字符串前后的空格。
age：會(huì)將輸入的內(nèi)容轉(zhuǎn)為數(shù)值類型。
address：會(huì)在“失去焦點(diǎn)”后更新，而不是實(shí)時(shí)更新。
五、條件渲染指令
v-if 與 v-show
條件渲染指令用來輔助開發(fā)者按需控制DOM 的顯示與隱藏。
條件渲染指令有如下兩個(gè)：
v-if
v-show
<div id="app"><button @click="flag = !flag">Toggle Flag</button><p v-if="flag">請(qǐng)求成功 --- 被 v-if 控制</p><p v-show="flag">請(qǐng)求成功 --- 被 v-show 控制</p>
</div><script src="../../lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {// flag 用來控制元素的顯示與隱藏// 值為 true 時(shí)顯示元素// 值為 false 時(shí)隱藏元素flag: false,},})
</script>運(yùn)行結(jié)果
在上述代碼中v-show 和 v-if 的效果是一樣的！但是它們的實(shí)現(xiàn)原理和性能不同！
兩者區(qū)別
1.原理不同
v-if 指令：會(huì)動(dòng)態(tài)地創(chuàng)建或移除DOM 元素，從而控制元素在頁面上的顯示與隱藏
v-show 指令：會(huì)動(dòng)態(tài)為元素添加或移除 style="display: none;" 樣式，從而控制元素的顯示與隱藏
2.性能消耗不同
v-if 有更高的切換開銷，而v-show有更高的初始渲染開銷。
如果需要非常頻繁地切換，則使用 v-show 較好
如果在運(yùn)行時(shí)條件很少改變，則使用v-if 較好
v-else 與 v-else-if
v-if 可以單獨(dú)使用，或配合v-else 指令、 v-else-if指令一起使用。
<div id="app"><p v-if="type === 'A'">優(yōu)秀</p><p v-else-if="type === 'B'">良好</p><p v-else-if="type === 'C'">一般</p><p v-else>差</p>
</div>效果其實(shí)就和我們Java里面的if-else一樣。
六、列表渲染指令
vue 提供了 v-for 指令，用來輔助開發(fā)者基于一個(gè)數(shù)組來循環(huán)渲染相似的UI 結(jié)構(gòu)。
v-for 指令需要使用 item in items 的特殊語法
items 是待循環(huán)的數(shù)組
item 是當(dāng)前的循環(huán)項(xiàng)
語法格式
<li v-for="item in list">{{item.name}}</li>v-for 指令還支持一個(gè)可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。
<li v-for="(item, index) in list">索引是：{{index}}，姓名是：{{item.name}}</li>案例代碼
<div id="app"><ul><li v-for="(user, i) in list">索引是：{{i}}，姓名是：{{user.name}}</li></ul>
</div><script src="../../lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {// 用戶列表的數(shù)據(jù)list: [{id: 1, name: 'zs'},{id: 2, name: 'ls'},],},})
</script>運(yùn)行結(jié)果
使用 key 維護(hù)列表的狀態(tài)
當(dāng)列表的數(shù)據(jù)變化時(shí)，默認(rèn)情況下，vue 會(huì)盡可能的復(fù)用已存在的DOM 元素，從而提升渲染的性能。
但這種默認(rèn)的性能優(yōu)化策略，會(huì)導(dǎo)致有狀態(tài)的列表無法被正確更新！！！
<div id="app"><div><input type="text" v-model="name"><button @click="addNewUser">添加</button></div><ul><li :key="user.id" v-for="(user, index) in userlist"><input type="checkbox"/>姓名：{{user.name}}</li></ul>
</div><script src="../../lib/vue-2.6.12.js"></script>
<script>const vm = new Vue({el: '#app',data: {// 用戶列表userlist: [{id: 1, name: 'zs'},{id: 2, name: 'ls'}],// 輸入的用戶名name: '',// 下一個(gè)可用的 id 值nextId: 3},methods: {// 點(diǎn)擊了添加按鈕addNewUser() {this.userlist.unshift({id: this.nextId, name: this.name})this.name = ''this.nextId++}},})
</script>運(yùn)行結(jié)果
 先選zs的那一行，再點(diǎn)擊添加! |  之前選中的zs，在添加了一個(gè)元素后，頁面選項(xiàng)發(fā)生了變化！！！ |
需要為每項(xiàng)提供一個(gè)唯一的key 屬性，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而在保證有狀態(tài)的列表可以被正確更新。
<ul><li :key="user.id" v-for="(user, index) in userlist"><input type="checkbox"/>姓名：{{user.name}}</li>
</ul>key使用的注意事項(xiàng)
key 的值只能是字符串或數(shù)字類型
key 的值必須具有唯一性（即：key 的值不能重復(fù)）
建議把數(shù)據(jù)項(xiàng) id 屬性的值作為key 的值（因?yàn)?id 屬性的值具有唯一性）
使用 index 的值當(dāng)作key 的值沒有任何意義（沒有任何意義！）
建議使用 v-for 指令時(shí)一定要指定key 的值（既提升性能、又防止列表狀態(tài)紊亂）