Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 -第3章Vue.js指令

教學(xué)目標(biāo)理解Vue.js指令的定義與分類。掌握條件渲染指令的使用與注意事項(xiàng)。掌握列表渲染指令v-for的多種定義方法及與key屬性配合使用的方法。掌握數(shù)據(jù)綁定的多種方式。掌握事件處理指令及事件修飾符的使用方法。掌握其它內(nèi)置指令的作用與使用方法。掌握Vue自定義指令定義與注冊的方法。1第3章

Vue.js指令（6學(xué)時）2Vue.js指令概述解決方案：Vue.js中的指令是以帶前綴（v-）的HTML屬性(attribute)的形式出現(xiàn)。指令是Vue對HTML標(biāo)記新增的、拓展的屬性，這些屬性不屬于標(biāo)準(zhǔn)的HTML屬性。只有Vue.js認(rèn)為是有效的，能夠處理它。問題導(dǎo)入：Vue給HTML標(biāo)記增加很多額外的屬性（如v-if），但是瀏覽器并不能正確解析？那么如何才能讓JS引擎去理解并解析它們呢？（例如需要有條件渲染某一標(biāo)記/元素，該如何處理呢？）指令指令(directive)本質(zhì)是模板中出現(xiàn)的特殊符號，讓處理模板的JS庫能夠知道對相關(guān)的DOM元素進(jìn)行一些相應(yīng)的處理。指令的作用：是當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式(Reactive)地作用于DOM上，也就是雙向數(shù)據(jù)綁定。Vue.js指令概述Vue.js的指令是以“v-”開頭的。Vue提供的指令有：v-if、v-else、v-else-if、v-show、v-for、v-bind、v-on、v-model、v-text、v-html、v-pre、v-cloak、v-once等?！净A(chǔ)語法】<elementprefix-directiveId[:argument]="expression"></element><!--以下是示例--><divv-html="message"></div><divv-on:click="clickHandler"></div><spanv-text="msg"></span><!--等價<span>{{msg}}</span>--><pv-if="greeting">Hello</p><pv-show="greeting">Hello2</p><av-bind:href="url">...</a>【語法說明】element：標(biāo)記名稱；prefix-directiveId：通用的指令格式，如v-if，v是前綴，if是指令I(lǐng)D。expressions表示表達(dá)式。一些指令能夠接收一個argument(參數(shù))，在指令名稱之后以冒號表示。指令的值是表達(dá)式，指令的值和在文本插值表達(dá)式{{}}的寫法是一樣的。指令既可以用于普通標(biāo)記，也可以用在<template></template>標(biāo)記上。3.1條件渲染v-if：用于條件性地渲染一塊內(nèi)容。當(dāng)指令的表達(dá)式的值為true時，內(nèi)容被渲染。v-else：必須搭配v-if使用，需要緊跟在v-if或者v-else-if后面，否則不起作用?？梢杂胿-else指令給v-if添加一個“else”塊。v-else-if：充當(dāng)v-if的else-if塊，可以鏈?zhǔn)降氖褂枚啻危詫?shí)現(xiàn)switch語句的功效?！净菊Z法】<!--以下v-if、v-else指令的示例--><標(biāo)記名稱

v-if="flag">v-if指令：當(dāng)flag為真時，我閃亮登場！</標(biāo)記名稱><標(biāo)記名稱v-else>v-else指令：當(dāng)flag為假時，哎呀！我暴露！</標(biāo)記名稱><!--以下v-if、v-else-if、v-else指令的示例，替代switch結(jié)構(gòu)--><標(biāo)記名稱

v-if="expressionA">成績等級為優(yōu)秀！</標(biāo)記名稱><標(biāo)記名稱

v-else-if="expressionB">成績等級為良好！</標(biāo)記名稱><標(biāo)記名稱

v-else>成績等級為不合格！</標(biāo)記名稱>條件渲染綜合應(yīng)用案例演示：【例3-1】條件渲染綜合應(yīng)用<div

id="app">

<div><fieldset>

<legend>使用v-if、v-else指令綜合應(yīng)用</legend>

<button

type="button"

@click="change">{{flag?"隱藏":"顯示"}}</button>

<h3

v-if="flag">v-if指令：當(dāng)flag為{{flag}}時，我被渲染啦！</h3>

<h3

v-else>v-else指令：當(dāng)flag為{{flag}}時，這回該輪到我被渲染啦！</h3>

<template

v-if="flag">

<h4>template模板內(nèi)容</h4>

<p>漸進(jìn)式前端框架Vue.js簡單易學(xué)！</p>

</template></fieldset>

</div>

<div>

<fieldset>

<legend>v-if、v-else-if、v-else指令綜合應(yīng)用</legend>

<label

for="">

政府采購評審專家考試成績：</label>

<input

type="text"

v-model="score"

/>

<h3

v-if="score>=90">結(jié)果：優(yōu)秀！</h3>

<h3

v-else-if="score>=80">結(jié)果：合格！</h3>

<h3

v-else>結(jié)果：不合格！，請補(bǔ)考??！</h3>

</fieldset>

</div>

</div>

<script

type="text/javascript">

const

App

=

{

data()

{

return

{

flag:

true,

score:

97,

};

},

methods:

{

change()

{

this.flag

=

this.flag

?

false

:

true;

},

},

};

const

instance

=

Vue.createApp(App).mount("#app");

</script>

3.1.2Vue3.x中key值的應(yīng)用1.v-if/v-else-if/v-else中的key值<!--Vue2.x--><divv-if="condition"key="yes">Yes</div><divv-elsekey="no">No</div><!--Vue3.x--><divv-if="condition">Yes</div><divv-else>No</div><!--Vue3.x手動綁定key值時，每一分支均需要綁定key值--><divv-if="condition"key="a">Yes</div><divv-elsekey="b">No</div>2.<template>使用v-for中的key值

在Vue2.x中，<template>不能綁定key值，而是綁定在它的子元素身上。在Vue3.x中，key值應(yīng)該綁定在<template>上而不是它的子元素。格式如下：<!--Vue3.x--><templatev-for="iteminlist":key="item.id"><div>...</div><span>...</span></template>問題導(dǎo)入：由于Vue通常會復(fù)用已有元素而不是從頭開始渲染。解決方案：在v-if/v-else/v-else-if中，key值綁定不再是必須的，因?yàn)閂ue3.x會自動生成對應(yīng)的唯一key值。若在Vue3.x中（如v-if）手動綁定key值，那么其他對應(yīng)指令中（如v-else）也必須手動綁定key值。<templatev-for>中的key值應(yīng)該綁定在<template>中而不再綁定在它的子元素中。3.1.2Vue3.x中key值的應(yīng)用3.<templatev-for>和v-if/v-else/v-else-if一起使用的key值

在Vue3.x，如果template使用了v-for，并且它的子元素中使用了v-if/v-else-if/v-else，那么key值也需要綁定在template上。格式如下：<!--Vue2.x--><templatev-for="iteminlist"><divv-if="item.isVisible":key="item.id">...</div><spanv-else:key="item.id">...</span></template><!--Vue3.x--><templatev-for="iteminlist":key="item.id"><divv-if="item.isVisible">...</div><spanv-else>...</span></template>案例演示：【例3-2】使用key屬性管理可復(fù)用的元素3.1.3v-show指令v-show指令用于根據(jù)條件展示元素，從而實(shí)現(xiàn)元素的隱藏與顯示。有v-show的元素始終會被渲染并保留在DOM中。v-show是簡單地切換元素的CSS屬性display?！净菊Z法】<標(biāo)記名稱v-show="true|false">標(biāo)記的內(nèi)容</標(biāo)記名稱><h1v-show="ok">Hello!</h1>【語法說明】v-show屬性的值是邏輯值。true：時渲染到頁面上；false：不渲染到頁面上。

帶有v-show的元素始終會被渲染并保留在DOM中。v-show只是簡單地切換元素的CSS屬性display。

注意：v-show

不支持

<template>

</template>

元素，也不支持

v-else。

v-show與v-if在使用上既有相同點(diǎn)，也有不同點(diǎn)。相同點(diǎn)：兩者都是在判斷DOM節(jié)點(diǎn)是否要顯示。不同點(diǎn)：(1)實(shí)現(xiàn)方式不同（DOM樹）。(2)編譯過程不同（局部編譯/卸載）。(3)編譯條件不同（惰性/DOM保留）。(4)性能消耗不同（切換消耗/初始渲染）。3.1.3v-show指令案例演示：【例3-3】v-show指令與v-if指令使用比較

<div

id="app">

<h3

v-if="flag">條件為{{flag}}時，渲染‘這是v-if’</h3>

<h3

v-show="flag">條件為{{flag}}時，渲染h3-這是v-show</h3>

<div

v-show="flag"

class="div1">div</div>

<button

type="button"

@click="change">切換元素-{{flag}}</button>

</div>

<script

type="text/javascript">

const

App

=

{

data()

{

return

{flag:

true,

};

},

methods:

{

change()

{

this.flag

=

!this.flag;

//取反賦值

},

},

};

Vue.createApp(App).mount("#app");

</script>

3.2列表渲染（v-for指令）

用v-for指令基于一個數(shù)組來渲染一個列表。v-for指令可以使用shoppingin|ofshoppings形式的特殊語法，其中shoppings是源數(shù)據(jù)數(shù)組(可以是普通數(shù)組或?qū)ο髷?shù)組)，而shopping則是被迭代的數(shù)組元素的別名。v-for指令的值中可以使用關(guān)鍵字in或of?！皘”表示或者的意思。1.使用單一參數(shù)的v-for指令循環(huán)遍歷對象數(shù)組<ul><liv-for="shoppinginshoppings">或<liv-for="shoppingofshoppings"> {{shopping}}</li> </ul>【語法說明】

定義的數(shù)組類型的數(shù)據(jù)shoppings，數(shù)組中每個元素有3個屬性，分別是bookName、issn、author，用v-for對li標(biāo)記循環(huán)渲染，效果如下圖所示?！净菊Z法】<divid="vue34"<ul>

<liv-for="(shopping,index)inshoppings">

{{index+1}}-{{shopping.bookName}}-{{shopping.issn}}-{{shopping.author}}

</li>

</ul></div>【語法說明】v-for屬性值中支持第二個參數(shù)index，作為當(dāng)前項(xiàng)的索引。不可以放在第一個參數(shù)位置上，否則渲染后不會出結(jié)果。多個參數(shù)必須使用括號包裹，并使用逗號分隔參數(shù)。依次訪問數(shù)組中對象的屬性shopping.bookName、shopping.issn、shopping.author。渲染結(jié)果如圖所示。2.使用兩個參數(shù)的v-for指令循環(huán)遍歷對象數(shù)組3.2列表渲染（v-for指令）3.使用三個參數(shù)的v-for指令循環(huán)遍歷對象的屬性v-for指令也可以對對象的屬性進(jìn)行遍歷，使用(

value,key,index)in

student的形式來遍歷數(shù)組元素?！净菊Z法】<ul>

<liv-for="(value,key,index)instudent">{{index}}-{{key}}-{{value}}</li> </ul>【語法說明】student是一個對象，它有3個屬性，分別為name、class、age。采用v-for指令分別遍歷對象的每一個屬性。3個參數(shù)的位置順序可以任意排列，默認(rèn)第一參數(shù)為value，第二參數(shù)為key，第三參數(shù)為index。渲染結(jié)果如下圖所示。3.2列表渲染（v-for指令）【基本語法】<ul>

<liv-for="(value,index)inarray"><!--也可以用valueinarray--> {{index}}-{{value}}<!--也可以用{{value}}--></li></ul>在data選項(xiàng)中增加定義普通數(shù)組array。格式如下：array:[100,200,300,205,110,96],【語法說明】array為普通數(shù)組，可以使用單一參數(shù)和帶第二個參數(shù)(索引)的形式的v-for指令來遍歷普通數(shù)組元素。渲染效果如下圖所示。4.v-for指令循環(huán)遍歷普通數(shù)組3.2列表渲染（v-for指令）5.v-for指令循環(huán)遍歷某一范圍內(nèi)的數(shù)字【基本語法】<divid="vue34">

<spanv-for="countin20">{{count}}</span>

</div> 【語法說明】

使用v-for指令遍歷某一范圍內(nèi)整數(shù)，count表示20以內(nèi)的每一個整數(shù)，然后在一行中輸出所有整數(shù)，渲染后效果如下圖所示。3.2列表渲染（v-for指令）6.v-for指令使用key關(guān)鍵字循環(huán)遍歷數(shù)組【基本語法】<divid="app"><pv-for="userinstudents":key='user.id'>{{user.id}}--{{}}</p></div>在data選項(xiàng)中增加下列屬性定義。格式如下：data(){return{students:[{id:1,name:'張開民'}],id:'',name:''}},3.2列表渲染（v-for指令）案例演示：【例3-4】

v-for指令的綜合運(yùn)用案例3.2列表渲染（v-for指令）3.2列表渲染（v-for指令）3.2列表渲染v-for指令7．v-for指令與v-if指令的執(zhí)行優(yōu)先級當(dāng)v-if與v-for一起使用時，即當(dāng)它們處于同一節(jié)中，v-for具有比v-if更高的優(yōu)先級，這意味著v-if將分別重復(fù)運(yùn)行于每個v-for循環(huán)中。所以，不推薦v-if和v-for同時使用。下列兩種常見的情況下，建議采用的做法如下：為了過濾一個列表中的項(xiàng)目

(比如v-for="userinusers"v-if="user.isActive")。在這種情形下，請將users替換為一個計(jì)算屬性(比如activeUsers)，讓其返回過濾后的列表。為了避免渲染本應(yīng)該被隱藏的列表(比如v-for="userinusers"v-if="isDisplayUsers")。這種情形下，請將v-if移動至容器元素上(比如ul,ol)。在Vue3.x中，將v-for和v-if同時作用在同一個元素上會報(bào)錯。在Vue2.x中可以，但不建議這么做。在父元素ul上使用v-for指令，在子元素上使用v-if指令。案例演示：【例3-5】v-for與v-if同時出現(xiàn)的解決方案v-for指令與v-if指令組合使用3.3類與樣式綁定（v-bind指令）

【基本語法】以下HTML中定義

<divv-bind:class="classObject"></div><!--v-bind基本語法--><div:class="classObject"></div><!--v-bind語法糖及綁定對象--><divv-bind:class="{active:isActive}"></div>v-bind:class指令也可以與普通的class屬性共存<divclass="static"v-bind:class="{active:isActive,'text-danger':hasError}"></div><divv-bind:class="[classA,classB]"></div><!--數(shù)組語法--><divv-bind:style="{color:activeColor,fontSize:fontSize+'px'}">對象</div><divv-bind:style="[styleObjectA,styleObjectB]">style數(shù)組</div>//以下組件的data選項(xiàng)中定義data(){return{classObject:{'class-a':true,'class-b':false},isActive:true,hasError:false,classA:'class-a',classB:'class-b',styleObjectA:{color:'blue'},styleObjectB:{background:'#DFDFDF'},}}語法糖:

v-bind:attribute=:attribute”.

所謂“語法糖”是指在不影響功能的情況下，添加某種方法實(shí)現(xiàn)同樣的效果，從而方便程序開發(fā)。使用語法糖可以簡化代碼書寫。問題導(dǎo)入：如果需要動態(tài)、響應(yīng)式更新HTML屬性（class、style等），該如何處理呢？解決方案：使用v-bind:property=“variant”【語法說明】v-bind可以綁定class、style，從而動態(tài)地渲染元素的樣式。

綁定class時，其值:普通變量、對象、數(shù)組等。綁定style時，其值:對象、數(shù)組?！纠?-6】class與style綁定綜合應(yīng)用實(shí)戰(zhàn)

在實(shí)際工程中需要分三步實(shí)現(xiàn)：(1)在HTML元素上完成屬性綁定，并定義其值的類型。(2)在Vue根對象的data選項(xiàng)中定義相關(guān)屬性的值。(3)在CSS部分需要定義相關(guān)類的樣式。案例演示：【例3-6】class與style綁定綜合應(yīng)用實(shí)戰(zhàn)【例3-6】class與style綁定綜合應(yīng)用實(shí)戰(zhàn)<div

id="app">

<fieldset>

<legend>class綁定應(yīng)用場景-變量、對象和數(shù)組</legend>

<p

v-bind:class="myClass">普通變量：Vue.js是漸進(jìn)式前端框架。</p>

<p

:class="classObject">對象：Vue單頁應(yīng)用開發(fā)簡單。</p>

<div

v-bind:class="{active:

isActive

}">對象：是一種常用的數(shù)據(jù)類型。</div>

<div

v-bind:class="[classA,

classB]">數(shù)組：在工程項(xiàng)目中使用非常廣泛。

</div>

<div

class="static"

v-bind:class="{active:

isActive,

redText:

hasError

}"

>

v-bind:class指令與普通的class屬性共存。

</div>

</fieldset>

<fieldset>

<legend>style綁定應(yīng)用場景-對象和數(shù)組</legend>

<div

v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">綁定style</div>

<div

:style="styleObject">style對象</div>

<div

v-bind:style="[styleObjectA,

styleObjectB]">style數(shù)組</div>

</fieldset>

</div>

<script

type="text/javascript">

const

App

=

{

data()

{

return

{

myClass:

"red",

classObject:

{class1:

true,class2:

true,},

classA:

"class1",

classB:

"class2",

isActive:

true,

hasError:

true,

activeColor:

"#99DD33",

fontSize:

36,

styleObject:

{

border:

"2px"

+

"

solid"

+

"#99AA33",fontSize:

28

+

"px",},

styleObjectA:

{

color:

"blue",

fontSize:

32

+

"px",},

styleObjectB:

{

background:

"#EFEFDF",

},

};

},

};

const

instance

=

Vue.createApp(App).mount("#app");

</script>

3.4事件處理（v-on指令）v-on指令（簡寫為

@）主要用來監(jiān)聽DOM事件，并在觸發(fā)時執(zhí)行對應(yīng)的JavaScript。用法：v-on:click="methodName"

或

@click="handler"。

事件處理器的值可以是：內(nèi)聯(lián)事件處理器：事件被觸發(fā)時執(zhí)行的內(nèi)聯(lián)JavaScript語句(與onclick類似)。方法事件處理器：一個指向組件上定義的方法的屬性名或是路徑。1.內(nèi)聯(lián)事件處理器--用于簡單場景//單文件組件中,采用組合式API（選項(xiàng)式API中使用methods）constcount=ref(0)<button@click="count++">Add1</button><p>Countis:{{count}}</p>2.方法事件處理器—邏輯復(fù)雜場景v-on

也可以接受一個方法名或?qū)δ硞€方法的調(diào)用。舉例如下：//在單文件組件中,采用組合式API（選項(xiàng)式API中使用methods）constname=ref('Vue.js')functiongreet(event){alert(`Hello${name.value}!`)//`event`是DOM原生事件if(event){alert(event.target.tagName)}}<!--`greet`是上面定義過的方法名--><button@click="greet">Greet</button>

方法事件處理器會自動接收原生DOM事件并觸發(fā)執(zhí)行。在上面的例子中，能夠通過被觸發(fā)事件的event.target.tagName訪問到該DOM元素。243.方法與內(nèi)聯(lián)事件判斷

模板編譯器會通過檢查v-on的值是否是合法的JavaScript標(biāo)識符或?qū)傩栽L問路徑來斷定是何種形式的事件處理器。舉例來說，foo、foo.bar和foo['bar']會被視為方法事件處理器，而foo()和count++會被視為內(nèi)聯(lián)事件處理器。4．在內(nèi)聯(lián)處理器中調(diào)用方法

除了直接綁定方法名，還可以在內(nèi)聯(lián)事件處理器中調(diào)用方法，并允許向方法傳入自定義參數(shù)以代替原生事件。舉例如下：//以下是在單文件組件中，采用組合式API（選項(xiàng)式API中使用methods）functionsay(message){alert(message)}<button@click="say('hello')">Sayhello</button><button@click="say('bye')">Saybye</button>5.在內(nèi)聯(lián)事件處理器中訪問事件參數(shù)

有時需要在內(nèi)聯(lián)事件處理器中訪問原生DOM事件。可以向該處理器方法傳入一個特殊的$event變量，或者使用內(nèi)聯(lián)箭頭函數(shù)。舉例如下：<!--使用特殊的$event變量--><button@click="warn('Formcannotbesubmittedyet.',$event)">Submit</button><!--使用內(nèi)聯(lián)箭頭函數(shù)--><button@click="(event)=>warn('Formcannotbesubmittedyet.',event)">Submit</button>functionwarn(message,event){//這里可以訪問原生事件if(event){event.preventDefault()}alert(message)}3.4事件處理（v-on指令）【例3-7】v-on指令綜合應(yīng)用第18行v-on指令綁定帶參數(shù)的事件處理方法showInfo1(‘用$event傳入!’,$event)，傳入特殊變量$event，用于訪問原生DOM事件。v-on指令綁定不帶參數(shù)的事件處理方法showInfo2，在methods中定義時需要將event作為參數(shù)。v-on指令綁定賦值語句。第14行v-on指令綁定不帶參數(shù)的事件處理方法newDate。第16行v-on指令綁定帶參數(shù)的事件處理方法displayName(100,200)。在Vue中事件修飾符主要有：（1）.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡。（2）.prevent：等同于JavaScript中的event.preventDefault()，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件，而不停止事件的進(jìn)一步傳播）。（3）.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)。（4）.self：只會觸發(fā)自己范圍內(nèi)的事件，不包含子元素。（5）.once：只會觸發(fā)一次。（6）.passive：不檢查是否默認(rèn)事件被阻止，用于觸發(fā)滾動時性能會更好。問題導(dǎo)入：實(shí)際工程中，定義事件處理函數(shù)時，更好的方式是讓事件處理函數(shù)只負(fù)責(zé)數(shù)據(jù)邏輯，而不處理DOM事件細(xì)節(jié)。該如何處理呢？解決方案：Vue.js為v-on提供了事件修飾符（Modifier）。修飾符是由點(diǎn)開頭的指令后綴來表示的。6．事件修飾符3.4事件處理（v-on指令）3.4事件處理（v-on指令）--修飾符<!--單擊事件將停止傳遞--><a@click.stop=<!--單擊事件將停止傳遞--><a@click.stop="doThis"></a>

<!--提交事件將不再重新加載頁面--><form@submit.prevent="onSubmit"></form>

<!--修飾符可以使用鏈?zhǔn)綍鴮?-><a@click.stop.prevent="doThat"></a>

<!--也可以只有修飾符--><form@submit.prevent></form>

<!--僅當(dāng)event.target是元素本身時才會觸發(fā)事件處理器--><!--例如：事件處理器不來自子元素--><div@click.self="doThat">...</div>"doThis"></a>.capture、.once和.passive修飾符與原生的addEventListener事件相對應(yīng)：<!--添加事件監(jiān)聽器時，使用`capture`捕獲模式--><!--例如：指向內(nèi)部元素的事件，在被內(nèi)部元素處理前，先被外部處理--><div@click.capture="doThis">...</div>

<!--點(diǎn)擊事件最多被觸發(fā)一次--><a@click.once="doThis"></a>

<!--滾動事件的默認(rèn)行為(scrolling)將立即發(fā)生而非等待`onScroll`完成--><!--以防其中包含`event.preventDefault()`--><div@scroll.passive="onScroll">...</div>

注意：使用修飾符時需要注意調(diào)用順序，因?yàn)橄嚓P(guān)代碼是以相同的順序生成的。因此使用@click.prevent.self會阻止元素及其子元素的所有點(diǎn)擊事件的默認(rèn)行為，而@click.self.prevent則只會阻止對元素本身的點(diǎn)擊事件的默認(rèn)行為。案例演示：【例3-8】事件處理的修飾符的應(yīng)用3.4事件處理（v-on指令）--案例7.按鍵修飾符在監(jiān)聽鍵盤事件時，經(jīng)常需要檢查詳細(xì)的按鍵。Vue允許為

v-on或@

在監(jiān)聽鍵盤事件時添加按鍵修飾符。<!--僅在`key`為`Enter`時調(diào)用`instance.submit()`--><input@keyup.enter="submit"/>

可以直接使用KeyboardEvent.key暴露的按鍵名稱作為修飾符，但需要轉(zhuǎn)為kebab-case形式。<input@keyup.down="onPageDown"/>在上面的例子中，僅會在$event.key為‘PageDown'時調(diào)用事件處理。

序號快捷名稱描述序號快捷名稱描述1.enter

回車鍵7.down

↓鍵2.tab

tab鍵8.left

←鍵3.delete

刪除和退格鍵9.right

→鍵4.esc

Esc鍵10.ctrlCtrl鍵5.space

空格鍵11.altAlt鍵6.up

↑鍵12.shiftShift鍵Vue.js提供了按鍵別名，也稱為快捷名稱，如下表所示。<!--

按下Tab鍵跳到此處時觸發(fā)事件--><inputtype="text"v-on:keyup.tab="inputName"><inputtype="text"v-on:keyup.enter="inputName"><inputtype="text"v-on:keyup.shift="inputAge">

系統(tǒng)按鍵修飾符

可以使用以下系統(tǒng)按鍵修飾符來觸發(fā)鼠標(biāo)或鍵盤事件監(jiān)聽器，只有當(dāng)按鍵被按下時才會觸發(fā)。系統(tǒng)按鍵修飾符有：.ctrl、.alt、.shift、.meta?！纠?-9】按鍵修飾符的應(yīng)用.exact修飾符.exact修飾符允許控制觸發(fā)一個事件所需的確定組合的系統(tǒng)按鍵修飾符。<!--當(dāng)按下Ctrl時，即使同時按下Alt或Shift也會觸發(fā)--><button@click.ctrl="onClick">A</button><!--僅當(dāng)按下Ctrl且未按任何其他鍵時才會觸發(fā)--><button@click.ctrl.exact="onCtrlClick">A</button><!--僅當(dāng)沒有按下任何系統(tǒng)按鍵時觸發(fā)--><button@click.exact="onClick">A</button>.鼠標(biāo)按鍵修飾符

鼠標(biāo)按鍵修飾符有：.left、.righ、.middle。這些修飾符將處理程序限定為由特定鼠標(biāo)按鍵觸發(fā)的事件。案例演示：【例3-9】按鍵修飾符的應(yīng)用31<script>

constApp={

data(){

return{

myInformation:"",

myName:"",

myPassword:"",

};

},

methods:{

inputName(){

console.log("按enter:"+this.myName);

this.myInformation=this.myName+"-"+this.myPassword;

},

inputPassword(){

console.log("按shift："+this.myPassword);

this.myInformation=this.myName+"-"+this.myPassword;

},

metaClick(){

console.log("meta+按鍵觸發(fā)");

},

doSomething(){

document.getElementsByClassName("div1")[0].innerHTML=

"按下CTRL+單擊...<br/>";

console.log("按下CTRL+單擊..,即使同時按下alt或shift也觸發(fā)");

},

onClick(){

console.log("僅當(dāng)沒有按下任何系統(tǒng)按鍵時觸發(fā)");

},

},

};

constinstance=Vue.createApp(App).mount("#app");

</script>【例3-9】按鍵修飾符的應(yīng)用3.5表單輸入綁定（v-model指令）

在Vue.js中可以通過v-model指令在表單的input、textarea及select元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但v-model本質(zhì)上不過是語法糖。v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：（1）文本輸入框和多行文本域元素使用value屬性和input事件。（2）復(fù)選框和單選按鈕使用checked屬性和change事件。(3）下拉列表框?qū)alue作為prop，并將change作為事件?！净菊Z法】<!--1.文本輸入框，綁定到value--><inputtype="text"placeholder="輸入姓名"v-model="myName"><!--2.多行文本域，綁定到value--><textareav-model="message"placeholder="請輸入您的建議或意見"></textarea> <!--3.單個復(fù)選框，綁定到布爾值--><inputtype="checkbox"id="checkbox"v-model="checked">3.5表單輸入綁定（v-model指令）<!--4.多個復(fù)選框，綁定到同一個數(shù)組(checkedNames值為[])--><inputtype="checkbox"id="jack"value="Jack"v-model="checkedNames"><labelfor="jack">Jack</label><inputtype="checkbox"id="john"value="John"v-model="checkedNames"><labelfor="john">John</label><inputtype="checkbox"id="mike"value="Mike"v-model="checkedNames"><labelfor="mike">Mike</label><span>Checkednames:{{checkedNames}}</span><!--5.多個單選按鈕，綁定到同一個變量--><inputtype="radio"id="man"value="男"v-model="sex"/>男<inputtype="radio"id="woman"value="女"v-model="sex"/>女<!--6.列表框單選時，綁定到一個變量。多選時，綁定到一個數(shù)組--><selectname=""v-model="mySelected"multiple> <optiondisabledvalue="">請選擇</option> <optionvalue="Java程序設(shè)計(jì)">Java程序設(shè)計(jì)</option> <optionvalue="數(shù)據(jù)挖掘與分析">數(shù)據(jù)挖掘與分析</option></select>【例3-10】表單綁定的綜合應(yīng)用

<div

id="app">

<fieldset>

<legend

align="center">信息調(diào)查表</legend>

姓名：<input

type="text"

placeholder="輸入姓名"

v-model="myName"

/>

<!--

姓名：<input

type="text"

placeholder="輸入姓名"

v-on:input="myName=$event.target.value"

v-bind:value="myName">

-->

<p>您的姓名：{{myName}}</p>

<p>建議或意見：{{message}}</p>

<textarea

v-model="message"

placeholder="請輸入您的建議或意見"

rows="3"

cols="60"

></textarea>

<p>您的興趣與愛好：{{checckMyLove}}</p>

<input

type="checkbox"

id="music"

value="繪畫"

v-model="checckMyLove"

/>繪畫

<input

type="checkbox"

id="netword"

value="網(wǎng)絡(luò)小說"

v-model="checckMyLove"

/>網(wǎng)絡(luò)小說

<input

type="checkbox"

id="game"

value="音樂"

v-model="checckMyLove"

/>音樂

<p>您的性別：{{

sex

}}</p>

<input

type="radio"

id="man"

value="男"

v-model="sex"

/>男

<input

type="radio"

id="woman"

value="女"

v-model="sex"

/>女

<p>選擇專業(yè)選修課：{{mySelected}}</p>

<select

name=""

v-model="mySelected"

multiple>

<option

disabled

value="">請選擇</option>

<option

value="Java程序設(shè)計(jì)">AngularJS前端框架</option>

<option

value="算法設(shè)計(jì)與分析">Fluttert移動開發(fā)</option>

<option

value="計(jì)算機(jī)網(wǎng)絡(luò)">Vue.js前端框架技術(shù)</option>

<option

value="數(shù)據(jù)挖掘與分析">JSP程序設(shè)計(jì)</option>

</select>

</fieldset>

</div>

<script>

const

App

=

{

data()

{

return

{

myName:

"",

message:

"",

checckMyLove:

[],

sex:

"",

mySelected:

[],

};

},

};

Vue.createApp(App).mount("#app");

</script>

【例3-10】表單綁定的綜合應(yīng)用【例3-10】表單綁定的綜合應(yīng)用36<div

id="app">

<h3>專業(yè)核心課程選擇：{{mySelected}}</h3>

<select

v-model="mySelected">

<option

v-for="(option,index)

in

options"

v-bind:value="option.value">

{{option.text}}

</option>

</select>

</div>

<script>

const

App

=

{

data()

{

return

{

mySelected:

"計(jì)算機(jī)網(wǎng)絡(luò)",

options:

[

{

value:

"計(jì)算機(jī)網(wǎng)絡(luò)",

text:

"計(jì)算機(jī)科學(xué)與技術(shù)",

},

{

value:

"軟件測試",

text:

"軟件工程",},

{

value:

"Python程序設(shè)計(jì)",text:

"數(shù)據(jù)科學(xué)與大數(shù)據(jù)技術(shù)",},

],

};

},

};

const

instance

=

Vue.createApp(App).mount("#app");

</script>

【例3-11】下拉列表框選項(xiàng)自動渲染表單元素值綁定

對于單選按鈕、復(fù)選框及下拉列表框的選項(xiàng)，v-model綁定的值通常是靜態(tài)字符串或布爾值。但是有時需要把值綁定到Vue實(shí)例的一個動態(tài)屬性上，就可以用v-bind實(shí)現(xiàn)，并且這個屬性的值可以不是字符串?！净菊Z法】<inputtype="radio"v-model="myRadio"value="radio"><inputtype="radio"v-model="myRadio"v-bind:value="radio1"> <inputtype="checkbox"v-model="myChecked1"> <inputtype="checkbox"v-model="myChecked2":true-value="valueA":false-value="valueB"> <selectv-model="mySelected"><optionvalue="html">HTML</option><option:value="{valueC:'js'}">JS</option></select>//以下需要在Vue組件或?qū)嵗械膁ata選項(xiàng)中定義myChecked1:'',myChecked2:'',mySelected:'',myRadio:'',radio1:'123',valueA:"A",valueB:"B",【語法說明】

當(dāng)選中第1單選按鈕時，myRadio的值為字符串"radio"；當(dāng)選中第2單選按鈕時，myRadio的值為字符串"123"。當(dāng)選中第1個復(fù)選框時，myChecked1為true，否則為false；當(dāng)選中第2個復(fù)選框時，myChecked2為"A"(動態(tài)綁定數(shù)據(jù)屬性)。當(dāng)選中下拉列表中第1個選項(xiàng)時，mySelected為字符串"html"；當(dāng)選中下拉列表中第2個選項(xiàng)時，mySelected為對象{valueC:'js'}?！纠?-12】表單元素值的綁定<div

id="app">

<h3>單選按鈕值綁定：

<input

type="radio"

v-model="myRadio"

value="逛街"

/>上街去逛逛

<input

type="radio"

v-model="myRadio"

v-bind:value="

radio1

"

/>

在家宅著

</h3>

<p>單選按鈕myRadio：{{myRadio}}</p>

<h3>

復(fù)選框值綁定：

<input

type="checkbox"

v-model="myChecked1"

value="checked"

/>音樂

<input

type="checkbox"

v-model="myChecked2"

:true-value="valueA"

:false-value="valueB"

/>繪畫

</h3>

<p>復(fù)選框1：{{myChecked1}}，復(fù)選框2：{{myChecked2}}</p>

<h3>下拉列表框：{{mySelected}}</h3>

<select

v-model="mySelected">

<option

value="請選擇"

disabled>請選擇</option>

<option

value="計(jì)算機(jī)網(wǎng)絡(luò)">計(jì)算機(jī)網(wǎng)絡(luò)</option>

<option

:value="{classHours:

'56學(xué)時'}">Vue.js前端框架技術(shù)</option>

</select>

</div>

<scripttype="text/javascript">

constApp={

data(){

return{

myChecked1:"",

myChecked2:"",

mySelected:"",

myRadio:"",

radio1:"宅家",

valueA:"我喜歡",

valueB:"不想去",

};

},

};

constinstance=Vue.createApp(App).mount("#app");

</script>v-model與修飾符修飾符描述.trim自動過濾輸入內(nèi)容最開始和最后的空格，中間的會保留一個空格，多的會被過濾掉.number自動將輸入的數(shù)據(jù)轉(zhuǎn)成number類型.lazy一般情況下，在input上使用v-model命令是一直在同步輸入的內(nèi)容與顯示的內(nèi)容，不過再添加上.lazy后，就會變成：在失去焦點(diǎn)或按回車時才更新數(shù)據(jù)v-model的修飾符，一般用于控制數(shù)據(jù)同步的時機(jī)。Vue內(nèi)置的修飾符如下表所示。

【基本語法】<inputv-model.lazy="myNo"placeholder="輸入學(xué)號"><inputv-model.number="myAge"type="number"placeholder="輸入年齡"><inputv-model.trim="myIdea"placeholder="輸入建議">

【語法說明】v-model.lazy修飾符：表示在輸入域失去焦點(diǎn)或按回車時數(shù)據(jù)才更新。v-model.number修飾符：表示將輸入域中內(nèi)容轉(zhuǎn)換為數(shù)值型數(shù)據(jù)。v-model.trim修飾符：表示將輸入域中內(nèi)容的前后空格過濾掉，并在字符串中間多個空格轉(zhuǎn)換為一個空格?！纠?-13】v-model的修飾符的應(yīng)用<divid="app">

<fieldset>

<legend>v-model修飾符的應(yīng)用-教學(xué)意見反饋表</legend>

姓名<inputv-model.lazy="name"placeholder="輸入姓名"

/><br/>學(xué)號<input

v-model.number="myNo"

type="number"

placeholder="輸入學(xué)號"

/><br/>

教學(xué)意見：<textarea

v-model.trim="myIdea"

rows="3"

cols="50"

placeholder="輸入意見"

></textarea>

<h4>信息匯總</h4>

<p>

姓名：{{name}}，學(xué)號：{{myNo}}({{typeofmyNo}})，意見：{{myIdea}}

</p>

</fieldset>

</div><script>

constApp={

data(){

return{

name:"",

myNo:"",

myIdea:"",

};

},

};

constinstance=Vue.createApp(App).mount("#app");

</script>3.6v-text與v-html指令基本語法<p>{{myText}}</p><pv-text="myText"></p><!--以上兩種形式是等價的--><spanv-html="varHtml"></span><!--解析為HTML，并顯示相關(guān)標(biāo)記的樣式效果--><spanv-text="varHtml"></span><!--解析為純文本，HTML標(biāo)記也顯示出來-->語法說明v-text更新元素的textContent。讀取文本不能讀取html標(biāo)記，解析文本。如果要更新部分的textContent上的值發(fā)生改變，插值處的內(nèi)容也會隨之更新。v-html更新元素的innerHTML?？梢宰x取HTML標(biāo)記，解析HTML標(biāo)記。它與v-text區(qū)別在于v-text輸出的是純文本，瀏覽器不會對其再進(jìn)行HTML解析，但v-html會將其當(dāng)HTML標(biāo)記解析后輸出。注意：在正式環(huán)境上動態(tài)渲染HTML是很危險的，因?yàn)槿菀讓?dǎo)致XSS攻擊?！纠?-14】v-text與v-html指令比較應(yīng)用

<divid="app">

<fieldset>

<legend>v-text指令</legend>

<p>插值：{{myContent}}</p>

<!--兩種形式是等價的-->

<p>v-text：<spanv-text="myContent">我被替換啦！</span></p>

</fieldset>

<fieldset>

<legend>v-html指令與v-text指令區(qū)別</legend>

<p><b>htmlCode值為:</b>{{htmlCode}}</p>

<p>使用v-html結(jié)果：<spanv-html="htmlCode"></span></p>

<p>使用v-text結(jié)果：<spanv-text="htmlCode"></span></p>

</fieldset>

</div>

<scripttype="text/javascript">

constinstance=Vue.createApp({

data(){

return{

myContent:"Vue.js是漸進(jìn)式前端框架！",

htmlCode:

'<pstyle="color:green"><strong>Vue.js是漸進(jìn)式前端框架！</strong></p>',

};

},

}).mount("#app");

</script>3.7v-cloak、v-once、

v-pre指令【基本語法】<pv-once>有v-once：{{myInput}}</p><p><spanv-cloak>{{information}}</span></p><spanv-pre>{{message}}</span>【語法說明】v-once指令：只執(zhí)行一次DOM渲染，渲染完成后視為靜態(tài)內(nèi)容，跳出以后的渲染過程。v-pre指令：在模板中跳過Vue的編譯，直接輸出原始值。這時并不會輸出的message值，而是直接在網(wǎng)頁中顯示{{message}}。v-cloak指令：保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和CSS規(guī)則([v-cloak]{display:none;})一起用時，這個指令可以隱藏未編譯的{{information}}，直到實(shí)例準(zhǔn)備完畢。渲染時會出現(xiàn)變量閃爍?！纠?-15】v-pre、v-once、v-cloak指令的綜合應(yīng)用3.8Vue.js自定義指令3.8.1自定義指令注冊一個自定義指令由一個包含類似組件生命周期鉤子的對象來定義。鉤子函數(shù)會接收到指令所綁定元素作為其參數(shù)。//組件中js部分constfocus={mounted:(el)=>el.focus()//使用箭頭函數(shù)定義}exportdefault{directives:{//組件內(nèi)局部注冊//在模板中啟用v-focusfocus}}<!--HTML模板中--><inputv-focus/>將一個自定義指令全局注冊到應(yīng)用層級也是一種常見的做法。代碼如下：constapp=Vue.createApp({}) //使v-focus在所有組件中都可用app.directive('focus',{/*...*/})【基本語法】<標(biāo)記名稱v-my-directive>使用方式與內(nèi)置指令相同</標(biāo)記名稱><!--自定義指令

-->

(1)注冊全局自定義指令v-my-directive。

第1種定義方法如下：constapp=Vue.createApp({}