第2章Vu

e.js開發(fā)基礎(chǔ)《Vu

e.js前端開發(fā)實(shí)戰(zhàn)（第2版）》學(xué)習(xí)目標(biāo)/Ta

rg

e

t掌握單文件組件，能夠創(chuàng)建并使用單文件組件掌握數(shù)據(jù)綁定，能夠定義數(shù)據(jù)并將數(shù)據(jù)渲染到頁面中掌握內(nèi)容渲染指令，能夠靈活運(yùn)用v-te

xt和v-htm

l指令將字符串渲染到頁面中掌握屬性綁定指令，能夠靈活運(yùn)用v-b

ind指令給目標(biāo)元素的屬性動(dòng)態(tài)綁定值掌握事件綁定指令，能夠靈活運(yùn)用v-on指令給目標(biāo)元素綁定事件學(xué)習(xí)目標(biāo)/Ta

rg

e

t掌握雙向數(shù)據(jù)綁定指令，能夠靈活運(yùn)用v-m

ode

l指令在表單元素上實(shí)現(xiàn)數(shù)據(jù)的雙向綁定掌握條件渲染指令，能夠靈活運(yùn)用v-if、v-show

指令根據(jù)不同的條件渲染不同的標(biāo)簽掌握列表渲染指令，能夠靈活運(yùn)用v-for指令將數(shù)組、對(duì)象等中的數(shù)據(jù)渲染到頁面中掌握事件對(duì)象，能夠靈活運(yùn)用事件對(duì)象獲取和修改DOM元素的屬性學(xué)習(xí)目標(biāo)/Ta

rg

e

t掌握樣式綁定，能夠靈活運(yùn)用v-b

ind綁定cla

s

s

和s

tyle

屬性實(shí)現(xiàn)元素樣式的設(shè)置熟悉事件修飾符，能夠闡述常見的事件修飾符掌握計(jì)算屬性，能夠靈活運(yùn)用計(jì)算屬性實(shí)時(shí)監(jiān)聽數(shù)據(jù)的變化，當(dāng)所依賴的數(shù)據(jù)發(fā)生變化時(shí)重新計(jì)算值掌握偵聽器，能夠靈活運(yùn)用偵聽器監(jiān)聽數(shù)據(jù)的變化并進(jìn)行相應(yīng)的操作章節(jié)概述/Sum

m

a

ry在搭建好Vu

e開發(fā)環(huán)境后，要想使用Vu

e開發(fā)實(shí)際項(xiàng)目，必須先學(xué)習(xí)Vu

e基礎(chǔ)知識(shí)。只有掌握Vu

e框架的基礎(chǔ)知識(shí)后，才能根據(jù)實(shí)際需求游刃有余地進(jìn)行項(xiàng)目開發(fā)。本章將詳細(xì)講解

Vu

e開發(fā)基礎(chǔ)。目錄/Conte

nts2

.12

.22

.3單文件組件數(shù)據(jù)綁定指令2

.4事件對(duì)象2

.5事件修飾符目錄/Conte

nts2

.62

.72

.8計(jì)算屬性偵聽器樣式綁定2

.9階段案例——學(xué)習(xí)計(jì)劃表單文件組件2

.1掌握單文件組件，能夠創(chuàng)建并使用單文件組件2.1

單文件組件yx.ityxb

.co

m先定一個(gè)小目標(biāo)！什么是單文件組件？2.1

單文件組件yx.ityxb

.co

m在第1章中使用Vite創(chuàng)建Vu

e項(xiàng)目后，目錄結(jié)構(gòu)中包含一些擴(kuò)展名為.vue

的文件，每個(gè).vue文件都可用來定義一個(gè)單文件組件。Vu

e中的單文件組件是Vu

e組件的文件格式。yx.ityxb

.co

m2.1

單文件組件01020312yx.ityxb

.co

m3模板模板用于搭建當(dāng)前組件的DOM結(jié)構(gòu)，其代碼寫在<te

m

p

la

te>標(biāo)簽中。樣式樣式是指通過CS

S代碼為當(dāng)前組件設(shè)置樣式，其代碼寫在<s

tyle>標(biāo)簽中。邏輯邏輯是指通過Ja

va

S

crip

t代碼處理組件的數(shù)據(jù)與業(yè)務(wù)，其代碼寫在<s

crip

t>標(biāo)簽中。每個(gè)單文件組件由模板、樣式和邏輯3個(gè)部分構(gòu)成。2.1

單文件組件<

te

m

p

la

te

><!--此處編寫組件的結(jié)構(gòu)--><

/

te

m

p

la

te

><

s

crip

t>/*此處編寫組件的邏輯*/<

/

s

crip

t><

s

tyle

>/*此處編寫組件的樣式*/<

/

s

tyle

>yx.ityxb

.co

m2.1

單文件組件演示如何定義一個(gè)基本的單文件組件。步驟1打開命令提示符，切換到D:\vue\cha

p

te

r0

2目錄，在該目錄下執(zhí)行如下命令，創(chuàng)建項(xiàng)目。yx.ityxb

.co

m步驟3步驟4步驟2步驟5演示單文件組件的使用方法ya

rn

cre

a

te

vite

vue

-de

m

o

--te

m

p

la

te

vue項(xiàng)目創(chuàng)建完成后，執(zhí)行如下命令進(jìn)入項(xiàng)目目錄，啟動(dòng)項(xiàng)目。cd

vue

-de

m

oya

rnya

rn

d

e

v項(xiàng)目啟動(dòng)后，可以使用URL地址http://1

2

7.0.0.1:5

1

7

3/進(jìn)行訪問。2.1

單文件組件演示單文件組件的使用方法步驟1步驟2步驟3步驟4步驟5使用VS

Code編輯器打開D:\vue\cha

p

te

r0

2\vue-de

m

o目錄。2.1

單文件組件yx.ityxb

.co

m演示單文件組件的使用方法步驟2步驟3步驟4步驟5yx.ityxb

.co

m步驟1將s

rc\s

tyle.cs

s

文件中的樣式代碼全部刪除，從而避免項(xiàng)目創(chuàng)建時(shí)自帶的樣式代碼影響本案例的實(shí)現(xiàn)效果。2.1

單文件組件演示單文件組件的使用方法創(chuàng)建s

rc\com

p

one

nts\De

m

o.vue文件，該文件是De

m

o組件。步驟1步驟3yx.ityxb

.co

m步驟4步驟2步驟5<

te

m

p

la

te

><d

iv

cla

s

s="d

e

m

o">De

m

o組件</d

iv><

/

te

m

p

la

te

><

s

tyle

>.d

e

m

o

{fo

nt-s

ize

:

2

2

px;fo

nt-w

e

ig

ht:

b

o

ld

;}<

/

s

tyle

>2.1

單文件組件演示單文件組件的使用方法步驟2yx.ityxb

.co

m步驟3步驟4步驟5步驟1修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

De

m

o

.vue'2.1

單文件組件保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，De

m

o組件的頁面效果如下圖所示。2.1

單文件組件yx.ityxb

.co

m數(shù)據(jù)綁定2

.2掌握數(shù)據(jù)綁定，能夠定義數(shù)據(jù)并將數(shù)據(jù)渲染到頁面中2.2.1

初識(shí)數(shù)據(jù)綁定yx.ityxb

.co

m先定一個(gè)小目標(biāo)！2.2.1

初識(shí)數(shù)據(jù)綁定什么是數(shù)據(jù)綁定？yx.ityxb

.co

m2.2.1

初識(shí)數(shù)據(jù)綁定Vu

e通過數(shù)據(jù)綁定實(shí)現(xiàn)了數(shù)據(jù)與頁面相分離，從而實(shí)現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)視圖的效果。即將頁面中的數(shù)據(jù)分離出來，放到組件的<s

crip

t>標(biāo)簽中，通過程序操作數(shù)據(jù)，并且當(dāng)數(shù)據(jù)改變時(shí)，頁面會(huì)自動(dòng)發(fā)生改變。yx.ityxb

.co

m2.2.1

初識(shí)數(shù)據(jù)綁定數(shù)據(jù)綁定分為定義數(shù)據(jù)和輸出數(shù)據(jù)。定義數(shù)據(jù)由于數(shù)據(jù)和頁面是分離的，在實(shí)現(xiàn)數(shù)據(jù)顯示之前，需要先在<s

crip

t>標(biāo)簽中定義組件所需的數(shù)據(jù)。輸出數(shù)據(jù)Vue為開發(fā)者提供了Mus

ta

che語法（又稱為雙大括號(hào)語法），將數(shù)據(jù)輸出到頁面中。yx.ityxb

.co

m2.2.1

初識(shí)數(shù)據(jù)綁定yx.ityxb

.co

m定義數(shù)據(jù)的語法格式如下。1.定義數(shù)據(jù)<

s

crip

t>e

xp

o

rt

d

e

fa

u

lt

{s

e

tup

()

{re

turn

{數(shù)據(jù)名:數(shù)據(jù)值,??}}}<

/

s

crip

t>2.2.1

初識(shí)數(shù)據(jù)綁定yx.ityxb

.co

m為了讓代碼更簡潔，Vu

e

3提供了s

e

tup語法糖（Synta

ctic

S

ug

a

r），使用它可以簡化上述語法，提高開發(fā)效率。使用s

e

tup語法糖來定義數(shù)據(jù)的語法格式如下。<

s

crip

t

s

e

tup

>co

ns

t數(shù)據(jù)名=數(shù)據(jù)值<

/

s

crip

t>2.2.1

初識(shí)數(shù)據(jù)綁定Vu

e為開發(fā)者提供了Mus

ta

che

語法（又稱為雙大括號(hào)語法），使用該語法時(shí)相當(dāng)于在模板中放入占位符，其語法格式如下。2.輸出數(shù)據(jù){{數(shù)據(jù)名}}當(dāng)頁面渲染時(shí)，模板中的{{數(shù)據(jù)名}}會(huì)被替換為實(shí)際的數(shù)據(jù)yx.ityxb

.co

m2.2.1

初識(shí)數(shù)據(jù)綁定yx.ityxb

.co

m在Mus

ta

che語法中還可以將表達(dá)式的值作為輸出內(nèi)容。表達(dá)式的值可以是字符串、數(shù)字等類型，示例代碼如下。{{

'He

llo

Vue

.js

'

}}{{

num

b

e

r

+

1

}}{{

o

b

j.na

m

e

}}{{

o

k

?'YES

'

:

'NO'

}}{{'<d

iv>HTML標(biāo)簽</d

iv>'}}2.2.1

初識(shí)數(shù)據(jù)綁定演示數(shù)據(jù)綁定的實(shí)現(xiàn)創(chuàng)建s

rc\com

p

one

nts\Me

s

s

a

g

e.vue文件。步驟1<

te

m

p

la

te

>

{{

m

e

s

s

a

g

e

}}<

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>co

ns

t

m

e

s

s

a

g

e='不積跬步，無以至千里'<

/

s

crip

t>步驟2用于在模板中輸出m

e

s

s

a

g

eyx.ityxb

.co

m2.2.1

初識(shí)數(shù)據(jù)綁定步驟2演示數(shù)據(jù)綁定的實(shí)現(xiàn)修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

Me

s

s

a

g

e

.vue'yx.ityxb

.co

m保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，數(shù)據(jù)綁定的頁面效果如下圖所示。2.2.1

初識(shí)數(shù)據(jù)綁定yx.ityxb

.co

m2.2.1

初識(shí)數(shù)據(jù)綁定多學(xué)一招：將Vu

e引入HTML頁面中前面學(xué)習(xí)的方式是通過Vite

創(chuàng)建一個(gè)新的項(xiàng)目，這個(gè)項(xiàng)目中不僅有Vu

e

，而且整合了一系列輔助開發(fā)的工具。其實(shí)Vu

e的使用方式非常靈活，它還提供了另一種使用方式，就是將Vu

e引入HTML頁面中。但這種方式只能使用Vu

e的核心功能，所以只適合開發(fā)一些簡單的頁面，在實(shí)際開發(fā)中一般不用這種方式。yx.ityxb

.co

m2.2.1

初識(shí)數(shù)據(jù)綁定步驟1演示如何將Vu

e引入HTM

L頁面中創(chuàng)建D:\vue\cha

p

te

r0

2\he

llow

orld.htm

l文件，在該文件中通過<s

crip

t>標(biāo)簽引入Vu

e

。yx.ityxb

.co

m<

!DOCTYPE

htm

l><

htm

l><

he

a

d><

m

e

ta

cha

rs

e

t=

"

UTF-8

"

><t

it

le>He

llo

Wo

rld案例</t

it

le><

s

crip

t

s

rc=

"

http

s

:/

/

unp

kg

.co

m

/

vue

@

3

/

d

is

t

/

vue

.g

lo

b

a

l.js

"

>

<

/

s

crip

t><

/

he

a

d

><

b

o

d

y><

/

b

o

d

y><

/

htm

l>步驟3步驟22.2.1

初識(shí)數(shù)據(jù)綁定在頁面中定義一個(gè)用于被Vu

e應(yīng)用實(shí)例控制的DOM區(qū)域，使開發(fā)者可以將數(shù)據(jù)填充到該DOM區(qū)域中。<

d

iv

id=

"

a

p

p"

><

p

>

{{

m

e

s

s

a

g

e

}}<

/

p

><

/

d

iv>步驟1yx.ityxb

.co

m步驟3步驟2演示如何將Vu

e引入HTM

L頁面中2.2.1

初識(shí)數(shù)據(jù)綁定演示如何將Vu

e引入HTM

L頁面中在</b

ody>結(jié)束標(biāo)簽前編寫代碼，創(chuàng)建Vu

e應(yīng)用實(shí)例。<

s

crip

t>co

ns

t

vm

=

Vue

.cre

a

te

Ap

p

({s

e

tup

()

{re

turn

{m

e

s

s

a

g

e

:

'He

llo

Wo

rld

!'}}})vm

.m

o

unt('#

a

p

p

')<

/

s

crip

t>步驟1yx.ityxb

.co

m步驟3步驟22.2.1

初識(shí)數(shù)據(jù)綁定通過瀏覽器訪問he

llow

orld.htm

l，將Vu

e引入HTML頁面的效果如下圖所示。yx.ityxb

.co

m掌握響應(yīng)式數(shù)據(jù)綁定，能夠定義數(shù)據(jù)并將數(shù)據(jù)渲染到頁面中2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m先定一個(gè)小目標(biāo)！2.2.2

響應(yīng)式數(shù)據(jù)綁定如果想要實(shí)現(xiàn)頁面中數(shù)據(jù)的更新，則需要進(jìn)行響應(yīng)式數(shù)據(jù)綁定，也就是將數(shù)據(jù)定義成響應(yīng)式數(shù)據(jù)。Vu

e為開發(fā)者提供了如下函數(shù)用于定義響應(yīng)式數(shù)據(jù)。

re

f()函數(shù)

re

a

ctive()函數(shù)

to

Re

f()函數(shù)

to

Re

fs()函數(shù)yx.ityxb

.co

m2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m響應(yīng)式數(shù)據(jù)=re

f(數(shù)據(jù))1.re

f()函數(shù)re

f()函數(shù)用于將數(shù)據(jù)轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)，其參數(shù)為數(shù)據(jù)，返回值為轉(zhuǎn)換后的響應(yīng)式數(shù)據(jù)。使用re

f()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。響應(yīng)式數(shù)據(jù).va

lue=新值如果需要更改響應(yīng)式數(shù)據(jù)的值，可以使用如下語法格式進(jìn)行修改。步驟2yx.ityxb

.co

m演示re

f()函數(shù)的使用方法創(chuàng)建s

rc\com

p

one

nts\Re

f.vue文件。步驟1<

te

m

p

la

te

>

{{

m

e

s

s

a

g

e

}}<

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>im

p

o

rt

{

re

f

}

f

ro

m

'vue'co

ns

t

m

e

s

s

a

g

e=re

f('會(huì)當(dāng)凌絕頂，一覽眾山小')

s

e

t

Tim

e

o

ut(()=>{m

e

s

s

a

g

e.va

lue='鍥而不舍，金石可鏤'},

2

0

0

0

)<

/

s

crip

t>2.2.2

響應(yīng)式數(shù)據(jù)綁定步驟2演示re

f()函數(shù)的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

Re

f.vue'2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，初始頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m等待2秒后的頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m2.re

a

ctive()函數(shù)re

a

ctive()函數(shù)用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象或數(shù)組，將普通的對(duì)象或數(shù)組作為參數(shù)傳給該函數(shù)即可。使用re

a

ctive()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。響應(yīng)式對(duì)象或數(shù)組=re

a

ctive(普通的對(duì)象或數(shù)組)步驟2yx.ityxb

.co

m演示re

a

ct

iv

e()函數(shù)的使用方法創(chuàng)建s

rc\com

p

one

nts\Re

a

ctive.vue文件。步驟1<

te

m

p

la

te

>

{{

o

b

j.m

e

s

s

a

g

e

}}<

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>im

p

o

rt

{

re

a

ctive

}

f

ro

m

'vue'co

ns

t

o

b

j=re

a

ct

ive({m

e

s

s

a

g

e:'不畏浮云遮望眼，自緣身在最高層'})

s

e

t

Tim

e

o

ut(()=>{o

b

j.m

e

s

s

a

g

e='欲窮千里目，更上一層樓'},

2

0

0

0

)<

/

s

crip

t>2.2.2

響應(yīng)式數(shù)據(jù)綁定步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

Re

a

ct

ive

.vue'演示re

a

ct

iv

e()函數(shù)的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.2.2

響應(yīng)式數(shù)據(jù)綁定保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，初始頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m等待2秒后的頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m2.2.2

響應(yīng)式數(shù)據(jù)綁定3.to

Re

f()函數(shù)to

Re

f()函數(shù)用于將響應(yīng)式對(duì)象中的單個(gè)屬性轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。使用to

Re

f()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。響應(yīng)式數(shù)據(jù)=to

Re

f(響應(yīng)式對(duì)象,'屬性名')to

Re

f()函數(shù)的第1個(gè)參數(shù)是響應(yīng)式對(duì)象，第2個(gè)參數(shù)是待轉(zhuǎn)換的屬性名，返回值為轉(zhuǎn)換后的響應(yīng)式數(shù)據(jù)。yx.ityxb

.co

myx.ityxb

.co

m步驟1演示t

o

Re

f()函數(shù)的使用方法創(chuàng)建s

rc\com

p

one

nts\To

Re

f.vue文件。步驟2<

te

m

p

la

te

><d

iv>m

e

s

s

a

g

e的值：{{m

e

s

s

a

g

e}}</d

iv><d

iv>o

b

j.m

e

s

s

a

g

e的值：{{o

b

j.m

e

s

s

a

g

e}}</d

iv><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>im

p

o

rt

{

re

a

ctive

,

to

Re

f

}

f

ro

m

'vue'co

ns

t

o

b

j=re

a

ct

ive({m

e

s

s

a

g

e:'黑發(fā)不知勤學(xué)早，白首方悔讀書遲'})

co

ns

t

m

e

s

s

a

g

e=to

Re

f(o

b

j,'m

e

s

s

a

g

e')s

e

t

Tim

e

o

ut(()

=

>

{m

e

s

s

a

g

e.va

lue='少壯不努力，老大徒傷悲'},

2

0

0

0

)<

/

s

crip

t>2.2.2

響應(yīng)式數(shù)據(jù)綁定步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

To

Re

f.vue'演示t

o

Re

f()函數(shù)的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.2.2

響應(yīng)式數(shù)據(jù)綁定保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，初始頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m等待2秒后的頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m4.to

Re

fs()函數(shù)to

Re

fs()函數(shù)用于將響應(yīng)式對(duì)象中的所有屬性轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。使用to

Re

fs()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。所有屬性組成的對(duì)象=to

Re

fs(響應(yīng)式對(duì)象)yx.ityxb

.co

m步驟1演示t

o

Re

f

s()函數(shù)的使用方法創(chuàng)建s

rc\com

p

one

nts\To

Re

fs.vue文件。步驟2<

te

m

p

la

te

><d

iv>m

e

s

s

a

g

e的值：{{m

e

s

s

a

g

e}}</d

iv><d

iv>o

b

j.m

e

s

s

a

g

e的值：{{o

b

j.m

e

s

s

a

g

e}}</d

iv><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>im

p

o

rt

{

re

a

ctive

,

to

Re

f

s

}

f

ro

m

'vue'co

ns

t

o

b

j=re

a

ct

ive({m

e

s

s

a

g

e:'盛年不重來，一日難再晨'})

le

t{m

e

s

s

a

g

e}=to

Re

f

s(o

b

j)s

e

t

Tim

e

o

ut(()

=

>

{m

e

s

s

a

g

e.va

lue='及時(shí)當(dāng)勉勵(lì)，歲月不待人'},

2

0

0

0

)<

/

s

crip

t>2.2.2

響應(yīng)式數(shù)據(jù)綁定步驟2im

p

ort

Ap

p

from

'./

com

p

one

nts

/

To

Re

f

s

.vue'演示t

o

Re

f

s()函數(shù)的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.2.2

響應(yīng)式數(shù)據(jù)綁定保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，初始頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m等待2秒后的頁面效果如下圖所示。2.2.2

響應(yīng)式數(shù)據(jù)綁定yx.ityxb

.co

m指令2

.3掌握內(nèi)容渲染指令，能夠靈活運(yùn)用v-te

xt和v-htm

l指令將字符串渲染到頁面中2.3.1內(nèi)容渲染指令yx.ityxb

.co

m先定一個(gè)小目標(biāo)！內(nèi)容渲染指令用于渲染DOM元素的內(nèi)容。常見的內(nèi)容渲染指令如下。

v-te

xt

v-htm

lyx.ityxb

.co

m2.3.1內(nèi)容渲染指令<標(biāo)簽名v-te

xt="數(shù)據(jù)名"></標(biāo)簽名>yx.ityxb

.co

m1

.

v-te

xtv-text用于渲染DOM元素的文本內(nèi)容，如果文本內(nèi)容中包含HTML標(biāo)簽，那么瀏覽器不會(huì)對(duì)其進(jìn)行解析。v-te

xt的語法格式如下。2.3.1內(nèi)容渲染指令步驟2yx.ityxb

.co

m演示v-t

e

x

t的使用方法創(chuàng)建s

rc\com

p

one

nts\VTe

xt.vue文件。步驟1<

te

m

p

la

te

><

d

iv

v-te

xt=

"

m

e

s

s

a

g

e"

>

<

/

d

iv><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>cons

t

m

e

s

s

a

g

e='<s

pa

n>咬定青山不放松，立根原在破巖中</s

pa

n>'<

/

s

crip

t>2.3.1內(nèi)容渲染指令步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VTe

xt.vue'演示v-t

e

x

t的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.3.1內(nèi)容渲染指令保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，v-te

xt的運(yùn)行結(jié)果如下圖所示。2.3.1內(nèi)容渲染指令yx.ityxb

.co

m<標(biāo)簽名v-htm

l="數(shù)據(jù)名"></標(biāo)簽名>yx.ityxb

.co

m2

.

v-htm

l在使用Vu

e進(jìn)行內(nèi)容渲染時(shí)，如果內(nèi)容中包含HTML標(biāo)簽并且希望這些標(biāo)簽被瀏覽器解析，則可以使用v-htm

l。v-htm

l用于渲染DOM元素的HTML內(nèi)容，其用法與v-te

xt相似。v-

htm

l的語法格式如下。2.3.1內(nèi)容渲染指令步驟2yx.ityxb

.co

m演示v-h

t

m

l的使用方法創(chuàng)建s

rc\com

p

one

nts\VHtm

l.vue文件。步驟1<

te

m

p

la

te

><

d

iv

v-htm

l=

"

htm

l"

>

<

/

d

iv><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>cons

t

htm

l='<s

t

ro

ng>千磨萬擊還堅(jiān)勁，任爾東西南北風(fēng)</s

t

ro

ng>'<

/

s

crip

t>2.3.1內(nèi)容渲染指令步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VHtm

l.vue'演示v-h

t

m

l的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.3.1內(nèi)容渲染指令保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，v-htm

l的運(yùn)行結(jié)果如下圖所示。2.3.1內(nèi)容渲染指令yx.ityxb

.co

m掌握屬性綁定指令，能夠靈活運(yùn)用v-

b

ind指令給目標(biāo)元素的屬性動(dòng)態(tài)綁定值2.3.2

屬性綁定指令yx.ityxb

.co

m先定一個(gè)小目標(biāo)！<標(biāo)簽名v-b

ind:屬性名="數(shù)據(jù)名"></標(biāo)簽名>yx.ityxb

.co

m在Vu

e開發(fā)中，有時(shí)需要綁定DOM元素的屬性，從而更好地控制屬性的值，此時(shí)可以使用屬性綁定指令v-b

ind來實(shí)現(xiàn)。v-b

ind的語法格式如下。2.3.2

屬性綁定指令<

d

iv

:id=

"

'lis

t

'

+

inde

x"

>

<

/

d

iv>v-b

ind還支持將屬性與字符串拼接表達(dá)式綁定，示例代碼如下。步驟2yx.ityxb

.co

m演示v-b

in

d的使用方法創(chuàng)建s

rc\com

p

one

nts\VBind.vue文件。步驟1<

te

m

p

la

te

><

p

>

<

inp

ut

typ

e

=

"

te

xt"

v-b

ind

:p

la

ce

ho

ld

e

r=

"

us

e

rna

m

e"

>

<

/

p

><

p

>

<

inp

ut

typ

e

=

"

pa

s

s

w

o

rd

"

:p

la

ce

ho

ld

e

r=

"

pa

s

s

w

o

rd

"

>

<

/

p

><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>cons

t

us

e

rna

m

e='請(qǐng)輸入用戶名'

cons

t

pa

s

s

w

o

rd='請(qǐng)輸入密碼'<

/

s

crip

t>2.3.2

屬性綁定指令步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VBind.vue'演示v-b

in

d的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.3.2

屬性綁定指令保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，v-b

ind的運(yùn)行結(jié)果如下圖所示。2.3.2

屬性綁定指令yx.ityxb

.co

m掌握事件綁定指令，能夠靈活運(yùn)用v-on指令給目標(biāo)元素綁定事件2.3.3

事件綁定指令yx.ityxb

.co

m先定一個(gè)小目標(biāo)！<標(biāo)簽名v-on:事件名="事件處理器"></標(biāo)簽名>yx.ityxb

.co

m在Vu

e開發(fā)中，有時(shí)需要給DOM元素綁定事件，從而利用事件實(shí)現(xiàn)交互效果，這時(shí)可以利用事件綁定指令v-on來實(shí)現(xiàn)。v-o

n的語法格式如下。在上述語法格式中，事件名即DOM中的事件名，例如click、inp

ut

、ke

yup

等；事件處理器

可以是方法名或內(nèi)聯(lián)Ja

va

S

crip

t語句。如果邏輯復(fù)雜，事件處理器建議使用方法名，方法需

要在<s

crip

t>標(biāo)簽中定義；如果邏輯簡單，只有一行代碼，則可以使用內(nèi)聯(lián)Ja

va

S

crip

t語句。另外，v-on還有簡寫形式，可以將“v-o

n:事件名”簡寫為“@事件名”。2.3.3

事件綁定指令步驟2yx.ityxb

.co

m演示v-o

n的使用方法創(chuàng)建s

rc\com

p

one

nts\VOn.vue文件。步驟1<

te

m

p

la

te

><b

utto

n

@

click="s

ho

w

Info">輸出信息</b

utto

n><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>cons

t

s

ho

w

Info

=

()

=

>

{co

ns

o

le.lo

g('歡迎來到Vue.js的世界！')}<

/

s

crip

t>2.3.3

事件綁定指令步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VOn.vue'演示v-o

n的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.3.3

事件綁定指令保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，單擊“輸出信息”按鈕后的頁面效果和控制臺(tái)如下圖所示。2.3.3

事件綁定指令yx.ityxb

.co

m掌握雙向數(shù)據(jù)綁定指令，能夠靈活運(yùn)用

v-m

ode

l指令在表單元素上實(shí)現(xiàn)數(shù)據(jù)的雙向綁定2.3.4

雙向數(shù)據(jù)綁定指令yx.ityxb

.co

m先定一個(gè)小目標(biāo)！<標(biāo)簽名v-m

ode

l="數(shù)據(jù)名"></標(biāo)簽名>yx.ityxb

.co

mVu

e為開發(fā)者提供了v-m

ode

l指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定，使用它可以在input

、te

xta

re

a

和

s

e

le

ct

元素上創(chuàng)建雙向數(shù)據(jù)綁定，它會(huì)根據(jù)使用的元素自動(dòng)選取對(duì)應(yīng)的屬性和事件組合，負(fù)責(zé)監(jiān)聽用戶的輸入事件并更新數(shù)據(jù)。v-m

ode

l的語法格式如下。2.3.4

雙向數(shù)據(jù)綁定指令<

inp

ut

v-m

ode

l=

"

info"

>yx.ityxb

.co

mv-m

ode

l內(nèi)部會(huì)為不同的元素綁定不同的屬性和事件，具體如下。

te

xta

re

a

元素和te

xt類型的inp

ut元素會(huì)綁定va

lue

屬性和inp

ut事件。

che

ckb

ox類型的inp

ut

元素和ra

d

io

類型的inp

ut

元素會(huì)綁定che

cke

d

屬性和cha

ng

e

事件。

s

e

le

ct元素會(huì)綁定va

lue

屬性和cha

ng

e

事件。例如，使用v-m

ode

l實(shí)現(xiàn)輸入框的值與變量保持同步，示例代碼如下。2.3.4

雙向數(shù)據(jù)綁定指令2.3.4

雙向數(shù)據(jù)綁定指令yx.ityxb

.co

m修飾符作用.num

b

e

r自動(dòng)將用戶輸入的值轉(zhuǎn)換為數(shù)字類型.t

rim自動(dòng)過濾用戶輸入的首尾空白字符.la

zy在cha

ng

e事件而非inp

ut事件觸發(fā)時(shí)更新數(shù)據(jù)為了方便對(duì)用戶輸入的內(nèi)容進(jìn)行處理，v-m

ode

l提供了3個(gè)修飾符。v-m

ode

l的修飾符如下表所示。步驟2yx.ityxb

.co

m演示v-m

o

d

e

l的使用方法創(chuàng)建s

rc\com

p

one

nts\VMode

l.vue文件。步驟1<

te

m

p

la

te

>請(qǐng)輸入姓名：<inp

ut

typ

e="te

xt"v-m

ode

l="us

e

rna

m

e"><d

iv>姓名是：{{us

e

rna

m

e}}</d

iv><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>im

p

o

rt

{

re

f

}

f

ro

m

'vue'cons

t

us

e

rna

m

e

=

re

f('zha

ng

s

a

n')<

/

s

crip

t>2.3.4

雙向數(shù)據(jù)綁定指令步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VMo

de

l.vue'演示v-m

o

d

e

l的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.3.4

雙向數(shù)據(jù)綁定指令保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，v-m

ode

l的初始頁面效果如下圖所示。2.3.4

雙向數(shù)據(jù)綁定指令yx.ityxb

.co

m在輸入框中輸入“xia

om

ing

”，頁面效果如下圖所示。2.3.4

雙向數(shù)據(jù)綁定指令yx.ityxb

.co

m步驟1演示.n

u

m

b

e

r修飾符的使用方法在s

rc\com

p

one

nts\VMode

l.vue文件的<s

crip

t>標(biāo)簽中添加代碼，定義響應(yīng)式數(shù)據(jù)n

1和n

2。yx.ityxb

.co

mcons

t

n

1

=

re

f(1

)cons

t

n

2

=

re

f(2

)步驟3步驟22.3.4

雙向數(shù)據(jù)綁定指令在s

rc\com

p

one

nts\VMode

l.vue文件的<te

m

p

la

te>標(biāo)簽中添加代碼，通過v-m

ode

l實(shí)現(xiàn)雙向數(shù)據(jù)綁定。<

input

typ

e

=

"

te

xt"

v-m

ode

l=

"

n

1

"

>

+

<

inp

uttyp

e

=

"

te

xt"

v-m

ode

l=

"

n

2

"

>=

{{

n

1

+

n

2

}}步驟1yx.ityxb

.co

m步驟3步驟22.3.4

雙向數(shù)據(jù)綁定指令演示.n

u

m

b

e

r修飾符的使用方法保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，未使用.num

b

e

r修飾符的初始頁面效果如下圖所示。2.3.4

雙向數(shù)據(jù)綁定指令yx.ityxb

.co

m改變n

1的值為“1

9

8”，查看n

1+n

2的值。改變n

1的值為“1

9

8”的頁面效果如下圖所示。2.3.4

雙向數(shù)據(jù)綁定指令yx.ityxb

.co

m修改輸入框的代碼，通過添加.num

b

e

r修飾符實(shí)現(xiàn)將用戶輸入的數(shù)字自動(dòng)轉(zhuǎn)換成數(shù)字類型。<

inp

ut

typ

e

=

"

te

xt"

v-m

ode

l.num

b

e

r=

"

n

1

"

>

+<

inp

ut

typ

e

=

"

te

xt"

v-m

ode

l.num

b

e

r=

"

n

2

"

>步驟1yx.ityxb

.co

m步驟3步驟22.3.4

雙向數(shù)據(jù)綁定指令演示.n

u

m

b

e

r修飾符的使用方法改變n

1的值為“1

9

8”，查看n

1+n

2的值。使用.num

b

e

r修飾符后改變n

1的值為“1

9

8”的頁面效果如下圖所示。2.3.4

雙向數(shù)據(jù)綁定指令yx.ityxb

.co

m掌握條件渲染指令，能夠靈活運(yùn)用v-if、v-s

how

指令根據(jù)不同的條件渲染不同

的標(biāo)簽2.3.5

條件渲染指令yx.ityxb

.co

m先定一個(gè)小目標(biāo)！在Vu

e中，當(dāng)需要根據(jù)不同的判斷結(jié)果顯示不同的DOM元素時(shí)，可以通過條件渲染指令來實(shí)現(xiàn)。條件渲染指令可以輔助開發(fā)者按需控制DOM元素的顯示與隱藏。條件渲染指令如下。

v-if

v-s

howyx.ityxb

.co

m2.3.5

條件渲染指令1

.

v-ifyx.ityxb

.co

mv-if是根據(jù)布爾值切換元素的顯示或隱藏狀態(tài)，本質(zhì)是通過操作DOM元素來切換顯示狀態(tài)。

當(dāng)給定的值為true

時(shí)，元素存在于DOM樹中；

當(dāng)給定的值為fa

ls

e

時(shí)，元素從DOM樹中移除。2.3.5

條件渲染指令2.3.5

條件渲染指令直接給定一個(gè)條件，控制單個(gè)元素的顯示或隱藏yx.ityxb

.co

mv-if有兩種使用方式。<標(biāo)簽名v-if="條件"></標(biāo)簽名>通過v-if結(jié)合v-e

ls

e-if、v-e

ls

e來控制不同元素的顯示或隱藏<標(biāo)簽名v-if="條件A">展示A</標(biāo)簽名><標(biāo)簽名v-e

ls

e-if="條件B">展示B</標(biāo)簽名><標(biāo)簽名v-e

ls

e>展示C</標(biāo)簽名>步驟1演示v-if的使用方法創(chuàng)建s

rc\com

p

one

nts\VIf.vue文件。yx.ityxb

.co

m步驟2<

te

m

p

la

te

>小明的學(xué)習(xí)評(píng)定等級(jí)為：<p

v-if="typ

e==='A'">優(yōu)秀</p><p

v-e

ls

e-if="typ

e==='B'">良好</p><p

v-e

ls

e>差</p><b

utto

n

@

click="typ

e='A'">切換成優(yōu)秀</b

utto

n><b

utto

n

@

click="typ

e='B'">切換成良好</b

utto

n><b

utto

n

@

click="typ

e='C'">切換成差</b

utto

n><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>

im

p

o

rt

{

re

f

}

f

ro

m

'vue'cons

t

typ

e

=

re

f('B')<

/

s

crip

t>2.3.5

條件渲染指令步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VIf.vue'演示v-if的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.3.5

條件渲染指令保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，v-if的初始頁面效果如下圖所示。yx.ityxb

.co

m2.3.5

條件渲染指令單擊“切換成優(yōu)秀”按鈕后的頁面效果如下圖所示。2.3.5

條件渲染指令yx.ityxb

.co

m2

.

v-s

howyx.ityxb

.co

mv-s

how

與v-if都用來決定某一個(gè)元素是否在頁面上顯示出來。v-s

how的原理是通過為元素添加或移除dis

p

la

y:none樣式來實(shí)現(xiàn)元素的顯示或隱藏。當(dāng)需要頻繁切換某個(gè)元素的顯示或隱藏時(shí)，使用v-s

ho

w會(huì)更節(jié)省性能開銷；而當(dāng)只需要切換一次顯示或隱藏時(shí)，使用v-if更合理。2.3.5

條件渲染指令步驟2yx.ityxb

.co

m演示v-s

h

o

w的使用方法創(chuàng)建s

rc\com

p

one

nts\VS

how.vue文件。步驟1<

te

m

p

la

te

><p

v-if="f

la

g">通過v-if控制的元素</p><p

v-s

ho

w="f

la

g">通過v-s

ho

w控制的元素</p><b

utto

n

@

click="f

la

g=!f

la

g">顯示/隱藏</b

utto

n><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>im

p

o

rt

{

re

f

}

f

ro

m

'vue'co

ns

t

f

la

g

=

re

f(t

rue

)<

/

s

crip

t>2.3.5

條件渲染指令步驟2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VS

ho

w.vue'演示v-s

h

o

w的使用方法修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1yx.ityxb

.co

m2.3.5

條件渲染指令保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，v-s

how的初始頁面效果如下圖所示。yx.ityxb

.co

m2.3.5

條件渲染指令單擊“顯示/隱藏”按鈕后的頁面效果如下圖所示。2.3.5

條件渲染指令yx.ityxb

.co

m掌握列表渲染指令，能夠靈活運(yùn)用v-for指令將數(shù)組、對(duì)象等中的數(shù)據(jù)渲染到頁面中2.3.6

列表渲染指令yx.ityxb

.co

m先定一個(gè)小目標(biāo)！在開發(fā)購物應(yīng)用時(shí)，為了方便用戶查找商品信息，通

常會(huì)以商品列表的形式展示商品信息。在商品列表中，每件商品的結(jié)構(gòu)都是相同的，如果每件商品的結(jié)構(gòu)都要手動(dòng)定義，會(huì)非常麻煩。為此，Vu

e提供了列表渲染指令v-for。開發(fā)者只需在模板中定義一件商品的結(jié)構(gòu)，v-for便會(huì)根據(jù)開發(fā)者提供的數(shù)據(jù)自動(dòng)渲染商品列表中所有的商品。yx.ityxb

.co

m2.3.6

列表渲染指令2.3.6

列表渲染指令根據(jù)數(shù)組渲染列表根據(jù)對(duì)象渲染列表根據(jù)數(shù)字渲染列表使用v-for循環(huán)渲染列表根據(jù)字符串渲染列表<標(biāo)簽名v-fo

r="(ite

m,ind

e

x)in

a

rr"></標(biāo)簽名>yx.ityxb

.co

m<標(biāo)簽名v-fo

r="(ite

m,na

m

e,inde

x)in

o

b

j"></標(biāo)簽名><標(biāo)簽名v-fo

r="(ite

m,ind

e

x)in

num"></標(biāo)簽名><標(biāo)簽名v-fo

r="(ite

m,ind

e

x)in

s

t

r"></標(biāo)簽名><

d

iv

v-for=

"

ite

m

in

ite

m

s

"

:ke

y=

"

ite

m

.id

"

>

<

/

d

iv>yx.ityxb

.co

m使用v-for（根據(jù)lis

t數(shù)組中的元素）渲染列表后，當(dāng)在lis

t數(shù)組中刪除一個(gè)元素后，inde

x會(huì)發(fā)生變化，v-for會(huì)重新渲染列表，導(dǎo)致性能下降。為了給v-for一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而對(duì)現(xiàn)有元素進(jìn)行重用和重新排序，建議通過ke

y屬性為列表中的每一項(xiàng)提供具有唯一性的值，示例代碼如下。2.3.6

列表渲染指令步驟2yx.ityxb

.co

m演示使用v-f

o

r根據(jù)一維數(shù)組渲染列表創(chuàng)建s

rc\com

p

one

nts\VFor1.vue文件。步驟1<

te

m

p

la

te

><d

iv

v-for="(ite

m,ind

e

x)in

lis

t":ke

y="ind

e

x">索引是：{{ind

e

x}}---元素的內(nèi)容是：{{ite

m}}<

/

d

iv><

/

te

m

p

la

te

><

s

crip

t

s

e

tup

>im

p

o

rt

{

re

a

ctive

}

f

ro

m

'vue'co

ns

t

lis

t

=

re

a

ctive

(['HTML',

'CS

S

',

'Ja

va

S

crip

t

'])<

/

s

crip

t>2.3.6

列表渲染指令步驟2演示使用v-f

o

r根據(jù)一維數(shù)組渲染列表修改s

rc\m

a

in.js文件，切換頁面中顯示的組件。步驟1im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

VFo

r1

.vue'2.3.6

列表渲染指令yx.ityxb

.co

m保存上述代碼后，在瀏覽器中訪問http://1

2

7.0.0.1:5

1

7

3/，根據(jù)一維數(shù)組渲染列表的頁面效果如下圖所示。2.3.6

列表渲染指令yx.ityxb

.co

m步驟1演示使用v-f

o

r根據(jù)對(duì)象數(shù)組渲染列表創(chuàng)建s

rc\com

p

one

nts\VFor2.vue文件。yx.ityxb

.co

m步驟2<

te

m

p

la

te

><

d

iv

v-for=

"

ite

m

in

lis

t

"

:ke

y=

"

ite

m

.id

"

>id是：{{ite

m.id}}---元素的內(nèi)容是：{{it

e

m.m