Vue.js前端开发实战（第2版）-教学课件 第2章 Vue

第2章Vu

e.js开发基础《Vu

e.js前端开发实战（第2版）》学习目标/Ta

rg

e

t掌握单文件组件，能够创建并使用单文件组件掌握数据绑定，能够定义数据并将数据渲染到页面中掌握内容渲染指令，能够灵活运用v-te

xt和v-htm

l指令将字符串渲染到页面中掌握属性绑定指令，能够灵活运用v-b

ind指令给目标元素的属性动态绑定值掌握事件绑定指令，能够灵活运用v-on指令给目标元素绑定事件学习目标/Ta

rg

e

t掌握双向数据绑定指令，能够灵活运用v-m

ode

l指令在表单元素上实现数据的双向绑定掌握条件渲染指令，能够灵活运用v-if、v-show

指令根据不同的条件渲染不同的标签掌握列表渲染指令，能够灵活运用v-for指令将数组、对象等中的数据渲染到页面中掌握事件对象，能够灵活运用事件对象获取和修改DOM元素的属性学习目标/Ta

rg

e

t掌握样式绑定，能够灵活运用v-b

ind绑定cla

s

s

和s

tyle

属性实现元素样式的设置熟悉事件修饰符，能够阐述常见的事件修饰符掌握计算属性，能够灵活运用计算属性实时监听数据的变化，当所依赖的数据发生变化时重新计算值掌握侦听器，能够灵活运用侦听器监听数据的变化并进行相应的操作章节概述/Sum

m

a

ry在搭建好Vu

e开发环境后，要想使用Vu

e开发实际项目，必须先学习Vu

e基础知识。只有掌握Vu

e框架的基础知识后，才能根据实际需求游刃有余地进行项目开发。本章将详细讲解

Vu

e开发基础。目录/Conte

nts2

.12

.22

.3单文件组件数据绑定指令2

.4事件对象2

.5事件修饰符目录/Conte

nts2

.62

.72

.8计算属性侦听器样式绑定2

.9阶段案例——学习计划表单文件组件2

.1掌握单文件组件，能够创建并使用单文件组件2.1

单文件组件yx.ityxb

.co

m先定一个小目标！什么是单文件组件？2.1

单文件组件yx.ityxb

.co

m在第1章中使用Vite创建Vu

e项目后，目录结构中包含一些扩展名为.vue

的文件，每个.vue文件都可用来定义一个单文件组件。Vu

e中的单文件组件是Vu

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

.co

m2.1

单文件组件01020312yx.ityxb

.co

m3模板模板用于搭建当前组件的DOM结构，其代码写在<te

m

p

la

te>标签中。样式样式是指通过CS

S代码为当前组件设置样式，其代码写在<s

tyle>标签中。逻辑逻辑是指通过Ja

va

S

crip

t代码处理组件的数据与业务，其代码写在<s

crip

t>标签中。每个单文件组件由模板、样式和逻辑3个部分构成。2.1

单文件组件<

te

m

p

la

te

><!--此处编写组件的结构--><

/

te

m

p

la

te

><

s

crip

t>/*此处编写组件的逻辑*/<

/

s

crip

t><

s

tyle

>/*此处编写组件的样式*/<

/

s

tyle

>yx.ityxb

.co

m2.1

单文件组件演示如何定义一个基本的单文件组件。步骤1打开命令提示符，切换到D:\vue\cha

p

te

r0

2目录，在该目录下执行如下命令，创建项目。yx.ityxb

.co

m步骤3步骤4步骤2步骤5演示单文件组件的使用方法ya

rn

cre

a

te

vite

vue

-de

m

o

--te

m

p

la

te

vue项目创建完成后，执行如下命令进入项目目录，启动项目。cd

vue

-de

m

oya

rnya

rn

d

e

v项目启动后，可以使用URL地址http://1

2

7.0.0.1:5

1

7

3/进行访问。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

文件中的样式代码全部删除，从而避免项目创建时自带的样式代码影响本案例的实现效果。2.1

单文件组件演示单文件组件的使用方法创建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数据绑定2

.2掌握数据绑定，能够定义数据并将数据渲染到页面中2.2.1

初识数据绑定yx.ityxb

.co

m先定一个小目标！2.2.1

初识数据绑定什么是数据绑定？yx.ityxb

.co

m2.2.1

初识数据绑定Vu

e通过数据绑定实现了数据与页面相分离，从而实现了数据驱动视图的效果。即将页面中的数据分离出来，放到组件的<s

crip

t>标签中，通过程序操作数据，并且当数据改变时，页面会自动发生改变。yx.ityxb

.co

m2.2.1

初识数据绑定数据绑定分为定义数据和输出数据。定义数据由于数据和页面是分离的，在实现数据显示之前，需要先在<s

crip

t>标签中定义组件所需的数据。输出数据Vue为开发者提供了Mus

ta

che语法（又称为双大括号语法），将数据输出到页面中。yx.ityxb

.co

m2.2.1

初识数据绑定yx.ityxb

.co

m定义数据的语法格式如下。1.定义数据<

s

crip

t>e

xp

o

rt

d

e

fa

u

lt

{s

e

tup

()

{re

turn

{数据名:数据值,⋯⋯}}}<

/

s

crip

t>2.2.1

初识数据绑定yx.ityxb

.co

m为了让代码更简洁，Vu

e

3提供了s

e

tup语法糖（Synta

ctic

S

ug

a

r），使用它可以简化上述语法，提高开发效率。使用s

e

tup语法糖来定义数据的语法格式如下。<

s

crip

t

s

e

tup

>co

ns

t数据名=数据值<

/

s

crip

t>2.2.1

初识数据绑定Vu

e为开发者提供了Mus

ta

che

语法（又称为双大括号语法），使用该语法时相当于在模板中放入占位符，其语法格式如下。2.输出数据{{数据名}}当页面渲染时，模板中的{{数据名}}会被替换为实际的数据yx.ityxb

.co

m2.2.1

初识数据绑定yx.ityxb

.co

m在Mus

ta

che语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型，示例代码如下。{{

'He

llo

Vue

.js

'

}}{{

num

b

e

r

+

1

}}{{

o

b

j.na

m

e

}}{{

o

k

?'YES

'

:

'NO'

}}{{'<d

iv>HTML标签</d

iv>'}}2.2.1

初识数据绑定演示数据绑定的实现创建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

初识数据绑定步骤2演示数据绑定的实现修改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/，数据绑定的页面效果如下图所示。2.2.1

初识数据绑定yx.ityxb

.co

m2.2.1

初识数据绑定多学一招：将Vu

e引入HTML页面中前面学习的方式是通过Vite

创建一个新的项目，这个项目中不仅有Vu

e

，而且整合了一系列辅助开发的工具。其实Vu

e的使用方式非常灵活，它还提供了另一种使用方式，就是将Vu

e引入HTML页面中。但这种方式只能使用Vu

e的核心功能，所以只适合开发一些简单的页面，在实际开发中一般不用这种方式。yx.ityxb

.co

m2.2.1

初识数据绑定步骤1演示如何将Vu

e引入HTM

L页面中创建D:\vue\cha

p

te

r0

2\he

llow

orld.htm

l文件，在该文件中通过<s

crip

t>标签引入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

初识数据绑定在页面中定义一个用于被Vu

e应用实例控制的DOM区域，使开发者可以将数据填充到该DOM区域中。<

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

初识数据绑定演示如何将Vu

e引入HTM

L页面中在</b

ody>结束标签前编写代码，创建Vu

e应用实例。<

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

初识数据绑定通过浏览器访问he

llow

orld.htm

l，将Vu

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

.co

m掌握响应式数据绑定，能够定义数据并将数据渲染到页面中2.2.2

响应式数据绑定yx.ityxb

.co

m先定一个小目标！2.2.2

响应式数据绑定如果想要实现页面中数据的更新，则需要进行响应式数据绑定，也就是将数据定义成响应式数据。Vu

e为开发者提供了如下函数用于定义响应式数据。

re

f()函数

re

a

ctive()函数

to

Re

f()函数

to

Re

fs()函数yx.ityxb

.co

m2.2.2

响应式数据绑定yx.ityxb

.co

m响应式数据=re

f(数据)1.re

f()函数re

f()函数用于将数据转换成响应式数据，其参数为数据，返回值为转换后的响应式数据。使用re

f()函数定义响应式数据的语法格式如下。响应式数据.va

lue=新值如果需要更改响应式数据的值，可以使用如下语法格式进行修改。步骤2yx.ityxb

.co

m演示re

f()函数的使用方法创建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('会当凌绝顶，一览众山小')

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

响应式数据绑定步骤2演示re

f()函数的使用方法修改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

响应式数据绑定yx.ityxb

.co

m保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，初始页面效果如下图所示。2.2.2

响应式数据绑定yx.ityxb

.co

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

响应式数据绑定yx.ityxb

.co

m2.2.2

响应式数据绑定yx.ityxb

.co

m2.re

a

ctive()函数re

a

ctive()函数用于创建一个响应式对象或数组，将普通的对象或数组作为参数传给该函数即可。使用re

a

ctive()函数定义响应式数据的语法格式如下。响应式对象或数组=re

a

ctive(普通的对象或数组)步骤2yx.ityxb

.co

m演示re

a

ct

iv

e()函数的使用方法创建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

响应式数据绑定步骤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()函数的使用方法修改s

rc\m

a

in.js文件，切换页面中显示的组件。步骤1yx.ityxb

.co

m2.2.2

响应式数据绑定保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，初始页面效果如下图所示。2.2.2

响应式数据绑定yx.ityxb

.co

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

响应式数据绑定yx.ityxb

.co

m2.2.2

响应式数据绑定3.to

Re

f()函数to

Re

f()函数用于将响应式对象中的单个属性转换为响应式数据。使用to

Re

f()函数定义响应式数据的语法格式如下。响应式数据=to

Re

f(响应式对象,'属性名')to

Re

f()函数的第1个参数是响应式对象，第2个参数是待转换的属性名，返回值为转换后的响应式数据。yx.ityxb

.co

myx.ityxb

.co

m步骤1演示t

o

Re

f()函数的使用方法创建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:'黑发不知勤学早，白首方悔读书迟'})

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

响应式数据绑定步骤2im

p

o

rt

Ap

p

f

ro

m

'./

co

m

p

o

ne

nts

/

To

Re

f.vue'演示t

o

Re

f()函数的使用方法修改s

rc\m

a

in.js文件，切换页面中显示的组件。步骤1yx.ityxb

.co

m2.2.2

响应式数据绑定保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，初始页面效果如下图所示。2.2.2

响应式数据绑定yx.ityxb

.co

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

响应式数据绑定yx.ityxb

.co

m2.2.2

响应式数据绑定yx.ityxb

.co

m4.to

Re

fs()函数to

Re

fs()函数用于将响应式对象中的所有属性转换为响应式数据。使用to

Re

fs()函数定义响应式数据的语法格式如下。所有属性组成的对象=to

Re

fs(响应式对象)yx.ityxb

.co

m步骤1演示t

o

Re

f

s()函数的使用方法创建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='及时当勉励，岁月不待人'},

2

0

0

0

)<

/

s

crip

t>2.2.2

响应式数据绑定步骤2im

p

ort

Ap

p

from

'./

com

p

one

nts

/

To

Re

f

s

.vue'演示t

o

Re

f

s()函数的使用方法修改s

rc\m

a

in.js文件，切换页面中显示的组件。步骤1yx.ityxb

.co

m2.2.2

响应式数据绑定保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，初始页面效果如下图所示。2.2.2

响应式数据绑定yx.ityxb

.co

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

响应式数据绑定yx.ityxb

.co

m指令2

.3掌握内容渲染指令，能够灵活运用v-te

xt和v-htm

l指令将字符串渲染到页面中2.3.1内容渲染指令yx.ityxb

.co

m先定一个小目标！内容渲染指令用于渲染DOM元素的内容。常见的内容渲染指令如下。

v-te

xt

v-htm

lyx.ityxb

.co

m2.3.1内容渲染指令<标签名v-te

xt="数据名"></标签名>yx.ityxb

.co

m1

.

v-te

xtv-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对其进行解析。v-te

xt的语法格式如下。2.3.1内容渲染指令步骤2yx.ityxb

.co

m演示v-t

e

x

t的使用方法创建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内容渲染指令步骤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内容渲染指令保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，v-te

xt的运行结果如下图所示。2.3.1内容渲染指令yx.ityxb

.co

m<标签名v-htm

l="数据名"></标签名>yx.ityxb

.co

m2

.

v-htm

l在使用Vu

e进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，则可以使用v-htm

l。v-htm

l用于渲染DOM元素的HTML内容，其用法与v-te

xt相似。v-

htm

l的语法格式如下。2.3.1内容渲染指令步骤2yx.ityxb

.co

m演示v-h

t

m

l的使用方法创建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>千磨万击还坚劲，任尔东西南北风</s

t

ro

ng>'<

/

s

crip

t>2.3.1内容渲染指令步骤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内容渲染指令保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，v-htm

l的运行结果如下图所示。2.3.1内容渲染指令yx.ityxb

.co

m掌握属性绑定指令，能够灵活运用v-

b

ind指令给目标元素的属性动态绑定值2.3.2

属性绑定指令yx.ityxb

.co

m先定一个小目标！<标签名v-b

ind:属性名="数据名"></标签名>yx.ityxb

.co

m在Vu

e开发中，有时需要绑定DOM元素的属性，从而更好地控制属性的值，此时可以使用属性绑定指令v-b

ind来实现。v-b

ind的语法格式如下。2.3.2

属性绑定指令<

d

iv

:id=

"

'lis

t

'

+

inde

x"

>

<

/

d

iv>v-b

ind还支持将属性与字符串拼接表达式绑定，示例代码如下。步骤2yx.ityxb

.co

m演示v-b

in

d的使用方法创建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='请输入用户名'

cons

t

pa

s

s

w

o

rd='请输入密码'<

/

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的运行结果如下图所示。2.3.2

属性绑定指令yx.ityxb

.co

m掌握事件绑定指令，能够灵活运用v-on指令给目标元素绑定事件2.3.3

事件绑定指令yx.ityxb

.co

m先定一个小目标！<标签名v-on:事件名="事件处理器"></标签名>yx.ityxb

.co

m在Vu

e开发中，有时需要给DOM元素绑定事件，从而利用事件实现交互效果，这时可以利用事件绑定指令v-on来实现。v-o

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

ut

、ke

yup

等；事件处理器

可以是方法名或内联Ja

va

S

crip

t语句。如果逻辑复杂，事件处理器建议使用方法名，方法需

要在<s

crip

t>标签中定义；如果逻辑简单，只有一行代码，则可以使用内联Ja

va

S

crip

t语句。另外，v-on还有简写形式，可以将“v-o

n:事件名”简写为“@事件名”。2.3.3

事件绑定指令步骤2yx.ityxb

.co

m演示v-o

n的使用方法创建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/，单击“输出信息”按钮后的页面效果和控制台如下图所示。2.3.3

事件绑定指令yx.ityxb

.co

m掌握双向数据绑定指令，能够灵活运用

v-m

ode

l指令在表单元素上实现数据的双向绑定2.3.4

双向数据绑定指令yx.ityxb

.co

m先定一个小目标！<标签名v-m

ode

l="数据名"></标签名>yx.ityxb

.co

mVu

e为开发者提供了v-m

ode

l指令来实现双向数据绑定，使用它可以在input

、te

xta

re

a

和

s

e

le

ct

元素上创建双向数据绑定，它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。v-m

ode

l的语法格式如下。2.3.4

双向数据绑定指令<

inp

ut

v-m

ode

l=

"

info"

>yx.ityxb

.co

mv-m

ode

l内部会为不同的元素绑定不同的属性和事件，具体如下。

te

xta

re

a

元素和te

xt类型的inp

ut元素会绑定va

lue

属性和inp

ut事件。

che

ckb

ox类型的inp

ut

元素和ra

d

io

类型的inp

ut

元素会绑定che

cke

d

属性和cha

ng

e

事件。

s

e

le

ct元素会绑定va

lue

属性和cha

ng

e

事件。例如，使用v-m

ode

l实现输入框的值与变量保持同步，示例代码如下。2.3.4

双向数据绑定指令2.3.4

双向数据绑定指令yx.ityxb

.co

m修饰符作用.num

b

e

r自动将用户输入的值转换为数字类型.t

rim自动过滤用户输入的首尾空白字符.la

zy在cha

ng

e事件而非inp

ut事件触发时更新数据为了方便对用户输入的内容进行处理，v-m

ode

l提供了3个修饰符。v-m

ode

l的修饰符如下表所示。步骤2yx.ityxb

.co

m演示v-m

o

d

e

l的使用方法创建s

rc\com

p

one

nts\VMode

l.vue文件。步骤1<

te

m

p

la

te

>请输入姓名：<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

双向数据绑定指令步骤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

双向数据绑定指令保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，v-m

ode

l的初始页面效果如下图所示。2.3.4

双向数据绑定指令yx.ityxb

.co

m在输入框中输入“xia

om

ing

”，页面效果如下图所示。2.3.4

双向数据绑定指令yx.ityxb

.co

m步骤1演示.n

u

m

b

e

r修饰符的使用方法在s

rc\com

p

one

nts\VMode

l.vue文件的<s

crip

t>标签中添加代码，定义响应式数据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

双向数据绑定指令在s

rc\com

p

one

nts\VMode

l.vue文件的<te

m

p

la

te>标签中添加代码，通过v-m

ode

l实现双向数据绑定。<

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

双向数据绑定指令演示.n

u

m

b

e

r修饰符的使用方法保存上述代码后，在浏览器中访问http://1

2

7.0.0.1:5

1

7

3/，未使用.num

b

e

r修饰符的初始页面效果如下图所示。2.3.4

双向数据绑定指令yx.ityxb

.co

m改变n

1的值为“1

9

8”，查看n

1+n

2的值。改变n

1的值为“1

9

8”的页面效果如下图所示。2.3.4

双向数据绑定指令yx.ityxb

.co

m修改输入框的代码，通过添加.num

b

e

r修饰符实现将用户输入的数字自动转换成数字类型。<

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

双向数据绑定指令演示.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

双向数据绑定指令yx.ityxb

.co

m掌握条件渲染指令，能够灵活运用v-if、v-s

how

指令根据不同的条件渲染不同

的标签2.3.5

条件渲染指令yx.ityxb

.co

m先定一个小目标！在Vu

e中，当需要根据不同的判断结果显示不同的DOM元素时，可以通过条件渲染指令来实现。条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。条件渲染指令如下。

v-if

v-s

howyx.ityxb

.co

m2.3.5

条件渲染指令1

.

v-ifyx.ityxb

.co

mv-if是根据布尔值切换元素的显示或隐藏状态，本质是通过操作DOM元素来切换显示状态。

当给定的值为true

时，元素存在于DOM树中；

当给定的值为fa

ls

e

时，元素从DOM树中移除。2.3.5

条件渲染指令2.3.5

条件渲染指令直接给定一个条件，控制单个元素的显示或隐藏yx.ityxb

.co

mv-if有两种使用方式。<标签名v-if="条件"></标签名>通过v-if结合v-e

ls

e-if、v-e

ls

e来控制不同元素的显示或隐藏<标签名v-if="条件A">展示A</标签名><标签名v-e

ls

e-if="条件B">展示B</标签名><标签名v-e

ls

e>展示C</标签名>步骤1演示v-if的使用方法创建s

rc\com

p

one

nts\VIf.vue文件。yx.ityxb

.co

m步骤2<

te

m

p

la

te

>小明的学习评定等级为：<p

v-if="typ

e==='A'">优秀</p><p

v-e

ls

e-if="typ

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

v-e

ls

e>差</p><b

utto

n

@

click="typ

e='A'">切换成优秀</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

条件渲染指令单击“切换成优秀”按钮后的页面效果如下图所示。2.3.5

条件渲染指令yx.ityxb

.co

m2

.

v-s

howyx.ityxb

.co

mv-s

how

与v-if都用来决定某一个元素是否在页面上显示出来。v-s

how的原理是通过为元素添加或移除dis

p

la

y:none样式来实现元素的显示或隐藏。当需要频繁切换某个元素的显示或隐藏时，使用v-s

ho

w会更节省性能开销；而当只需要切换一次显示或隐藏时，使用v-if更合理。2.3.5

条件渲染指令步骤2yx.ityxb

.co

m演示v-s

h

o

w的使用方法创建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掌握列表渲染指令，能够灵活运用v-for指令将数组、对象等中的数据渲染到页面中2.3.6

列表渲染指令yx.ityxb

.co

m先定一个小目标！在开发购物应用时，为了方便用户查找商品信息，通

常会以商品列表的形式展示商品信息。在商品列表中，每件商品的结构都是相同的，如果每件商品的结构都要手动定义，会非常麻烦。为此，Vu

e提供了列表渲染指令v-for。开发者只需在模板中定义一件商品的结构，v-for便会根据开发者提供的数据自动渲染商品列表中所有的商品。yx.ityxb

.co

m2.3.6

列表渲染指令2.3.6

列表渲染指令根据数组渲染列表根据对象渲染列表根据数字渲染列表使用v-for循环渲染列表根据字符串渲染列表<标签名v-fo

r="(ite

m,ind

e

x)in

a

rr"></标签名>yx.ityxb

.co

m<标签名v-fo

r="(ite

m,na

m

e,inde

x)in

o

b

j"></标签名><标签名v-fo

r="(ite

m,ind

e

x)in

num"></标签名><标签名v-fo

r="(ite

m,ind

e

x)in

s

t

r"></标签名><

d

iv

v-for=

"

ite

m

in

ite

m

s

"

:ke

y=

"

ite

m

.id

"

>

<

/

d

iv>yx.ityxb

.co

m使用v-for（根据lis

t数组中的元素）渲染列表后，当在lis

t数组中删除一个元素后，inde

x会发生变化，v-for会重新渲染列表，导致性能下降。为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，建议通过ke

y属性为列表中的每一项提供具有唯一性的值，示例代码如下。2.3.6

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

.co

m演示使用v-f

o

r根据一维数组渲染列表创建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}}---元素的内容是：{{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根据一维数组渲染列表修改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/，根据一维数组渲染列表的页面效果如下图所示。2.3.6

列表渲染指令yx.ityxb

.co

m步骤1演示使用v-f

o

r根据对象数组渲染列表创建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}}---元素的内容是：{{it

e

m.m