《Vue.js 前端開(kāi)發(fā)技術(shù)與實(shí)踐》課件-第4章 Vue指令

第4章Vue指令在Vue中，以v-開(kāi)頭的屬性稱之為指令，被稱為指令的新屬性來(lái)擴(kuò)展HTML，指令是對(duì)DOM的增強(qiáng)，用來(lái)操作DOM。4.1數(shù)據(jù)綁定指令4.1.1文本節(jié)點(diǎn)綁定指令在HTML結(jié)構(gòu)中，文本節(jié)點(diǎn)是顯示頁(yè)面的文字內(nèi)容，動(dòng)態(tài)變化的文本數(shù)據(jù)可以用v-text、v-html指令來(lái)渲染?！癕ustache”語(yǔ)法“{{

}}”的文本插值，在此一起介紹。1、“Mustache”語(yǔ)法“{{

}}”文本插值語(yǔ)法：<標(biāo)簽>{{數(shù)據(jù)對(duì)象屬性}}</標(biāo)簽>2、v-text指令：綁定的數(shù)據(jù)也當(dāng)成純文本輸出，使用v-text指令的語(yǔ)法：<標(biāo)簽v-html="數(shù)據(jù)對(duì)象屬性"></標(biāo)簽>3、v-html指令:綁定的數(shù)據(jù)可以包含html標(biāo)簽，并且將以html標(biāo)記的方式渲染出來(lái)。<標(biāo)簽v-html="數(shù)據(jù)對(duì)象屬性"></標(biāo)簽>。解決插值表達(dá)式閃爍的問(wèn)題，可以使用v-cloak指令，結(jié)合display樣式來(lái)解決，先把Mustache模板表達(dá)式隱藏，直到獲得數(shù)據(jù)才顯示。v-cloak指令4.1.2屬性節(jié)點(diǎn)綁定v-bind指令給屬性綁定動(dòng)態(tài)數(shù)所據(jù)。語(yǔ)法：<標(biāo)簽v-bind:屬性名="表達(dá)式">或簡(jiǎn)寫(xiě)成<標(biāo)簽:屬性名="表達(dá)式">4.1.3樣式綁定（1）綁定class語(yǔ)法如下：<標(biāo)簽v-bind:class=”{class樣式1：數(shù)據(jù)對(duì)象屬性1,class樣式2：數(shù)據(jù)對(duì)象屬性2,……}”>上面的語(yǔ)法表示class樣式1、class樣式2等能否綁定取決于數(shù)據(jù)對(duì)象屬性值的真假。（2）綁定style語(yǔ)法如下：<標(biāo)簽v-bind:style=”{樣式屬性：數(shù)據(jù)對(duì)象屬性|樣式屬性值,……}”>4.1.4條件渲染（1）v-if指令和v-show指令v-if和v-show都能實(shí)現(xiàn)控制元素的顯示隱臧。v-if指令使用語(yǔ)法：v-if="表達(dá)式",表達(dá)式的值是布爾值。v-if指令用于條件性地渲染一塊內(nèi)容（一個(gè)或多個(gè)元素）。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回true值的時(shí)候被渲染顯示，為false時(shí)元素刪除轉(zhuǎn)為注釋。v-show指令使用語(yǔ)法：v-show="表達(dá)式",表達(dá)式的值是布爾值。根據(jù)表達(dá)式值的true/false來(lái)顯示或隱藏元素。4.1.5列表渲染（1）v-for指令基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表語(yǔ)法：<標(biāo)簽v-for=”iteminitems”>，其中items是源數(shù)據(jù)數(shù)組，item參數(shù)是被迭代的數(shù)組元素的別名，v-for還支持一個(gè)可選的第二個(gè)參數(shù)，語(yǔ)法<標(biāo)簽v-for="(item,index)initems">，第二個(gè)參數(shù)index即當(dāng)前項(xiàng)的索引。（2）v-for指令基于一個(gè)對(duì)象來(lái)渲染一個(gè)列表語(yǔ)法：<標(biāo)簽v-for=”valueinobject”>，其中object是源數(shù)據(jù)對(duì)象，value參數(shù)是被迭代的對(duì)象中的屬性值（鍵值）的別名。v-for還支持一個(gè)可選的第二個(gè)參數(shù)，語(yǔ)法<標(biāo)簽v-for="(value,name)inobject">，第二個(gè)參數(shù)name是對(duì)象中的屬性名（鍵名）。v-for還可以用第三個(gè)參數(shù)index作為索引。語(yǔ)法<標(biāo)簽v-for="(value,name,index)inobject">。（3）v-for指令基于一個(gè)數(shù)據(jù)來(lái)渲染一個(gè)列表語(yǔ)法：<標(biāo)簽v-for=”countin數(shù)值”>，count值從1開(kāi)始。4.1.6

v-pre指令和v-once指令v-pre指令不編譯mustache模板表達(dá)式，可以用來(lái)顯示原始Mustache標(biāo)簽。v-once指令只渲染元素和組件一次，這可以用于優(yōu)化更新性能。4.2數(shù)據(jù)雙向綁定在Web應(yīng)用中，經(jīng)常會(huì)使用表單向服務(wù)端提交一些數(shù)據(jù)，在Vue.js中可以使用v-model指令同步用戶輸入的數(shù)據(jù)到Vue實(shí)例data屬性中。v-model指令在表單<input>、<textarea>等元素上創(chuàng)建雙向數(shù)據(jù)綁定。語(yǔ)法：v-model=’數(shù)據(jù)對(duì)象屬性’雙向綁定修飾符（1）.lazyv-model.lazy只有在回車或者在輸入框onblur（失去焦點(diǎn)）時(shí)，數(shù)據(jù)進(jìn)行同步。（2）.numberv-model.number只能輸入數(shù)字。3）.trimv-model.trim去除前后空格。4.3事件綁定采用v-on指令來(lái)綁定。無(wú)須在JavaScript中手動(dòng)綁定事件。4.3.1監(jiān)聽(tīng)事件語(yǔ)法格式有如下兩種方式。（1）直接把JavaScript代碼寫(xiě)在v-on指令中<標(biāo)簽v-on:事件名=‘JavaScript代碼’>（2）v-on指令可以接收需要JavaScript函數(shù)的調(diào)用，分為無(wú)參數(shù)調(diào)用函數(shù)和有參數(shù)調(diào)用函數(shù)。無(wú)參：<標(biāo)簽v-on:事件名=‘函數(shù)名稱’>，有參：<標(biāo)簽v-on:事件名=‘函數(shù)名稱(參數(shù))’>“v-on:事件名”也可簡(jiǎn)寫(xiě)成“@事件名”。4.3.2事件修飾符4.3.2事件修飾符（1）.stop修飾符阻止事件冒泡在綁定事件的后面加修飾符.stop，即可阻止事件冒泡。<div

@click.stop="func1($event)">（2）.capture修飾符所修飾的事件流為捕獲事件流DOM事件流分為冒泡事件流和捕獲事件流，默認(rèn)是冒泡，.capture所修飾的事件流為捕獲事件流。

<div

@click.capture="box"

:style="{border:'solid

2px

red'}">（3）.self修飾符只接收自觸發(fā)事件.self所修飾的事件，只有在綁定該事件元素觸發(fā)事件時(shí)，才會(huì)觸發(fā)事件處理函數(shù)，該事件不被冒泡或捕獲觸發(fā)。（4）.prevent修飾符阻止默認(rèn)事件在綁定事件的后面加修飾符.prevent，即可阻止默認(rèn)事件。

<a

href=""

@click.prevent="func">不能訪問(wèn)百度</a>（5）.once修飾符所修飾的事件只生效一次（6）鍵盤(pán)事件修飾符按鍵修飾符可