JavaScript+Vue.jsWeb开发实战教程课件 第七章 Vue 3模板与常用指令

Vue3模板与常用指令演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程07学习目标掌握单文件组件的使用方法掌握实现双向数据绑定的方法掌握指令的使用方法掌握事件对象的使用方法掌握事件修饰符的使用方法能够创建并使用单文件组件能够灵活使用双向数据绑定能够灵活使用事件对象能够熟练运用事件修饰符思维导图7.1单文件组件Vue是一个支持组件化开发的框架。在创建Vue项目后，项目目录包含一些扩展名为.vue的文件，每个.vue文件都可以用来定义一个单文件组件。Vue中的单文件组件是Vue组件的文件格式，每个单文件组件由模板、样式和逻辑3个部分构成。下面分别对这3个部分进行介绍。7.1单文件组件模板用于搭建当前组件的DOM结构，其代码写在<template>标签中。<template>标签是Vue提供的容器标签，只起到包裹作用，其不会被渲染为真正的DOM元素。每个单文件组件最多可以包含一个顶层<template>标签。模板01样式是通过CSS代码为当前组件设置的，其代码写在<style>标签中。每个单文件组件中可以包含多个<style>标签。如果当前组件不需要设置样式，则可以省略<style>标签。样式02逻辑是指通过JavaScript代码处理组件的数据与业务，其代码写在<script>标签中。每个单文件组件只能包含一个<script>标签。如果当前组件没有逻辑代码且存在<template>标签，则可以省略<script>标签。逻辑037.1单文件组件下面演示如何定义一个基本的单文件组件，代码如左下所示。<template>

<!--此处编写组件的模板--></template><script>

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

/*此处编写组件的样式*/</style>例如，首先创建src/components/DemoComponent.vue文件，具体代码右上（位置：单元6～单元9/vue-project/src/components/DemoComponent.vue）。<template>

<divclass="demo">Demo组件</div></template><stylescoped>

.demo{

font-size:22px;

font-weight:bold;

}</style>7.1单文件组件接着需要在App.vue中引入该组件，代码如下所示。<scriptsetup>

importDemoComponentfrom'./components/DemoComponent.vue'</script><template>

<demo-component/></template>保存上述代码，在浏览器中访问http://localhost:5173/，Demo组件的页面效果如图所示。图Demo组件的页面效果7.2.1初识数据绑定由于数据和页面是分离的，因此在实现数据显示之前，需要在<script>标签中定义组件所需的数据，具体语法格式如右则所示。为了让代码更简洁，Vue3提供了setup语法糖（syntacticsugar），使用它可以简化上述语法格式，提高开发效率。下面使用setup语法糖简化上述语法格式，简化后的语法格式如下所示。定义数据01<script>

import{ref}from'vue'

exportdefault{

//setup()是一个特殊的钩子，专门用于组合式API

setup(){

constcount=ref(0)

//将count中的数据暴露给组件

return{

count

}

}

}</script><scriptsetup>

import{ref}from'vue'

constcount=ref(0)</script>7.2.1初识数据绑定在<script>标签中定义了数据后，如何将数据输出到页面中呢？Vue

为开发者提供了

Mustache语法（又称为双花括号语法），该语法需要写在<template>标签中，其功能相当于在模板中放入占位符。其语法格式：{{数据名}}当页面渲染时，模板中的{{数据名}}会被替换为实际的数据。注意：如果给定的数据是一个包含HTML标签的字符串，则这些HTML标签会被当成纯文本输出。在Mustache语法中，还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等，示例如下。输出数据02{{'HelloVue.js'}}{{number+1}]{{}}{{ok?'YES':"NO'}}{{"<div>HTML标签</div>"}}7.2.1初识数据绑定在<script>标签中定义了数据后，如何将数据输出到页面中呢？Vue

为开发者提供了

Mustache语法（又称为双花括号语法），该语法需要写在<template>标签中，其功能相当于在模板中放入占位符。其语法格式：{{数据名}}当页面渲染时，模板中的{{数据名}}会被替换为实际的数据。注意：如果给定的数据是一个包含HTML标签的字符串，则这些HTML标签会被当成纯文本输出。在Mustache语法中，还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等，示例如下。输出数据02{{'HelloVue.js'}}{{number+1}]{{}}{{ok?'YES':"NO'}}{{"<div>HTML标签</div>"}}7.2.1初识数据绑定接下来通过实际操作演示数据绑定的实现方法，具体步骤如下。<template>

{{message}}</template><scriptsetup>

constmessage='不积跬步，无以至千里；不积小流，无以成江海'</script>创建src/components/MessageComponent.vue，代码如下所示。<scriptsetup>

importMessageComponentfrom'./components/MessageComponent.vue'</script><template>

<message-component/></template>在App.vue中引入MessageComponent组件，切换页面中显示的组件，代码如下所示。图

数据绑定页面效果7.2.2响应式数据绑定

在7.2.1小节中，将数据定义并显示在页面中后，如果后续修改了数据，页面中显示的数据不会同步更新。例如，修改src/components/MessageComponent.vue文件，代码如下所示。<template>

{{message}}</template><scriptsetup>

letmessage='不积跬步，无以至千里；不积小流，无以成江海'

setTimeout(()=>{

console.log('更新前的message：'+message)

message='长风破浪会有时，直挂云帆济沧海'

console.log('更新后的message：'+message)

},3000)</script>图

页面效果和控制台输出效果7.2.2响应式数据绑定ref()函数用于将数据转换成响应式数据，其参数为数据，返回值为转换后的响应式数据。使用ref()函数定义响应式数据的语法格式：响应式数据=ref(数据)如果需要更改响应式数据的值，可以使用如下语法格式进行修改：响应式数据.value=新值接下来通过实际操作演示ref()函数的使用方法，具体步骤如下。ref()函数01<template>

{{message}}</template><scriptsetup>

import{ref}from'vue'

letmessage=ref('会当凌绝顶，一览众山小')

setTimeout(()=>{

message.value='锲而不舍，金石可镂'

},3000)</script>创建src/components/RefComponent.vue文件，代码如下所示。7.2.2响应式数据绑定<scriptsetup>

importRefComponentfrom'./components/RefComponent.vue'</script><template>

<ref-component/></template>在App.vue中引入RefComponent组件，切换页面中显示的组件，代码如下所示。保存上述代码后，在浏览器中访问http://localhost:5173，初始页面效果如图所示。图

初始页面效果等待3s，页面效果如图所示，页面中展示的数据发生了变化，说明通过ref()函数可以定义响应式数据。图

等待3s后的页面效果7.2.2响应式数据绑定reactive()函数用于创建一个响应式对象或数组，使用时只需将普通的对象或数组作为参数传给该函数即可。使用reactive()函数定义响应式数据的语法格式如下所示。响应式对象或数组=reactive(普通对象或数组)接下来通过实际操作演示reactive()函数的使用方法，具体步骤如下。reactive()函数02<template>

{{obj.message}}</template><scriptsetup>

import{reactive}from'vue'

letobj=reactive({message:'不畏浮云遮望眼，自缘身在最高层'})

setTimeout(()=>{

obj.message='欲穷千里目，更上一层楼'

},3000)</script>创建src/components/ReactiveComponent.vue文件，代码如下所示。7.2.2响应式数据绑定<scriptsetup>

importReactiveComponentfrom'./components/ReactiveComponent.vue'</script><template>

<reactive-component/></template>在App.vue中引入ReactiveComponent组件，切换页面中显示的组件，代码如下所示。保存上述代码后，在浏览器中访问http://localhost:5173，初始页面效果如图所示。图

初始页面效果等待3s，页面效果如图7.7所示，页面中展示的数据发生了变化，说明通过reactive()函数可以定义响应式数据。图

等待3s后的页面效果7.2.2响应式数据绑定toRef()函数用于将响应式对象中的单个属性转换为响应式数据。使用toRef()函数定义响应式数据的语法格式如下所示。响应式数据=toRef(响应式对象,’属性名’)接下来通过实际操作演示toRef()函数的使用方法，具体步骤如下。toRef()函数03<template>

<div>message的值：{{message}}</div>

<div>obj.message的值：{{obj.message}}</div></template><scriptsetup>

import{reactive,toRef}from'vue'

letobj=reactive({message:'黑发不知勤学早，白首方悔读书迟'})

constmessage=toRef(obj,'message')

setTimeout(()=>{

message.value='少壮不努力，老大徒伤悲'

},3000)</script>创建src/components/ToBeRefComponent.vue文件，代码如下所示。7.2.2响应式数据绑定<scriptsetup>

importToRefComponentfrom'./components/ToBeRefComponent.vue'</script><template>

<to-ref-component/></template>在App.vue中引入ToBeRefComponent组件，切换页面中显示的组件，代码如下所示。保存上述代码后，在浏览器中访问http://localhost:5173，初始页面效果如图所示。图

初始页面效果等待3s，页面效果如图所示，页面中展示的数据发生了变化，说明通过toRef()函数可以将响应式对象中的message属性的值转换为响应式数据。图

等待3s后的页面效果7.2.2响应式数据绑定toRefs()函数用于将响应式对象中的属性的值转换为响应式数据。使用toRefs()函数定义响应式数据的语法格式如下。所有属性组成的对象=toRefs(响应式对象)接下来通过实际操作演示toRefs()函数的使用方法，具体步骤如下。toRefs()函数04<template>

<div>message的值：{{message}}</div>

<div>obj.message的值：{{obj.message}}</div></template><scriptsetup>

import{reactive,toRefs}from'vue'

letobj=reactive({message:'床前明月光，疑是地上霜'})

const{message}=toRefs(obj)

setTimeout(()=>{

message.value='举头望明月，低头思故乡'

},3000)</script>创建src/components/ToBeRefsComponent.vue文件，代码如下所示。7.2.2响应式数据绑定<scriptsetup>

importToRefsComponentfrom'./components/ToBeRefsComponent.vue'</script><template>

<to-refs-component/></template>在App.vue中引入ToBeRefsComponent组件，切换页面中显示的组件，代码如下所示。保存上述代码后，在浏览器中访问http://localhost:5173，初始页面效果如图所示。图

初始页面效果等待3s，页面效果如图7.11所示，页面中展示的数据发生了变化，说明通过toRefs()函数可以将响应式对象中的message属性的值转换为响应式数据。图

等待3s后的页面效果7.3指令指令是一种在模板中使用的带有“v-”前缀的特殊属性。指令可以辅助开发者定义页面结构，使用简洁的代码实现复杂的功能。Vue3中的指令按照不同的用途可以分为6类，分别是内容渲染指令、属性绑定指令、事件绑定指令、双向数据绑定指令、条件渲染指令、列表渲染指令等。7.3.1内容渲染指令常见的内容渲染指令有v-text和v-html，下面分别进行讲解。01v-text指令v-text指令用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对其进行解析。v-text指令的语法格式如下所示。<标签名v-text="数据名"></标签名>上述语法格式表示将标签对应的DOM元素的文本内容渲染为指定名称的数据，该数据需要在<script>标签中定义。02v-html指令使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，则可以使用v-html指令。v-html指令的语法格式如下所示。<标签名v-html="数据名"></标签名>上述语法格式表示将标签对应的DOM元素的HTML内容渲染为指定名称的数据，该数据需要在<script>标签中定义。7.3.1内容渲染指令接下来通过实际操作演示v-text指令的使用方法，具体步骤如下。创建src/components/VTextComponent.vue文件，代码如下所示。<template>

<divv-text="message"></div></template><scriptsetup>

constmessage='<span>咬定青山不放松，立根原在破岩中</span>'</script>在App.vue中引入VTextComponent组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importVTextComponentfrom'./components/VText.vue'</script><template>

<v-text-component/></template>在浏览器中访问http://localhost:5173，渲染效果如图所示。图

利用v-text实现的渲染效果7.3.1内容渲染指令接下来通过实际操作演示v-html指令的使用方法，具体步骤如下。创建src/components/VHtmlComponent.vue文件，代码如下所示。<template>

<divv-html="message"></div></template><scriptsetup>

constmessage='<strong>千磨万击还坚劲，任尔东西南北风</strong>'</script>在App.vue中引入VHtmlComponent组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importVHtmlComponentfrom'./components/VHtmlComponent.vue'</script><template>

<v-html-component/></template>在浏览器中访问http://localhost:5173，渲染效果如图7.13所示。图

利用v-html指令实现的渲染效果7.3.2属性绑定指令v-bind指令的语法格式如下。<标签名v-bind:属性名="数据名"></标签名>v-bind指令还支持将属性与字符串拼接表达式绑定，示例代码如下所示。<div:id="'list'+index"></标签名>接下来通过实际操作演示v-bind指令的使用方法，具体步骤如下。创建src/components/VBindComponent.vue文件，代码如下所示。<template>

<p><inputtype="text"v-bind:placeholder="username"/></p>

<p><inputtype="text"v-bind:placeholder="password"/></p></template><scriptsetup>

constusername='请输入用户名'

constpassword='请输入密码'</script>7.3.2属性绑定指令在App.vue中引入VBindComponent组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importVBindComponentfrom'./components/VBindComponent.vue'</script><template>

<v-bind-component/></template>在浏览器中访问http://localhost:5173。如图所示。图

使用v-bind指令绑定了placeholder属性7.3.3事件绑定指令v-on指令的语法格式如下。<标签名v-on:事件名="事件处理程序"></标签名>v-on指令的语法格式可以简化，即将“v-on:事件名”简化为“@事件名”。接下来通过实际操作演示v-on指令的使用方法，具体步骤如下。创建src/components/VOnComponent.vue文件，代码如下所示。<template>

<button@click="showInfo">输出信息</button></template><scriptsetup>

constshowInfo=()=>{

console.log('欢迎来到Vue.js')

}</script>在App.vue中引入VOnComponent组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importVOnComponentfrom'./components/VOnComponent.vue'</script><template>

<v-on-component/></template>在浏览器中访问http://localhost:5173并打开控制台，单击“输出信息”按钮，在控制台输出信息，效果如图所示。图

单击“输出信息”按钮后在控制台输出信息的效果7.3.4双向数据绑定指令Vue3为开发者提供了v-model指令，以实现双向数据绑定。v-model指令的语法格式如下所示。v-model指令基本用法01<标签名v-model="数据名"></标签名>textarea元素和text类型的input元素会绑定value属性和input事件。checkbox类型的input元素和radio类型的input元素会绑定checked属性和change事件。select元素会绑定value属性和change事件。v-model指令内部会为不同的元素绑定不同的属性和事件，具体如下。例如，使用v-model指令实现输入框的值与变量的值保持同步，代码如下所示。<inputv-model="info">需要说明：v-model指令会忽略所有表单元素的value、checked、selected属性的初始值而使用v-model指令绑定的数据。接下来通过实际操作演示v-model指令的使用方法，具体步骤如下。7.3.4双向数据绑定指令<template>

<div>请输入姓名：<inputtype="text"v-model="username"/></div>

<div>姓名是：{{username}}</div></template><scriptsetup>

import{ref}from'vue'

constusername=ref('张三')</script>创建src/components/VModelComponent.vue文件，代码如下所示。<scriptsetup>

importVModelComponentfrom'./components/VModelComponent.vue'</script><template>

<v-model-component/></template>在App.vue中引入VModelComponent组件，切换页面中显示的组件，代码如下所示。在浏览器中访问http://localhost:5173，利用v-model指令实现的初始页面效果如图所示。图

利用v-model指令实现的初始页面效果图

在输入框中输入“李四”的页面效果7.3.4双向数据绑定指令为了方便对用户输入的内容进行处理，v-model指令提供了3个修饰符，如表所示。v-model修饰符02修饰符作用.number自动将用户输入的值转换成Number类型的值.trim自动过滤用户输入的首尾空白字符.lazy在change事件而非input事件触发时更新数据接下来通过实际操作演示.number修饰符的使用方法，具体步骤如下。constn1=ref(1)constn2=ref(2)在src/components/VModelComponent.vue文件的<script>标签中添加代码，定义响应式数据n1和n2，代码如下所示。<inputtype="text"v-model="n1"/>+<inputtype="text"v-model="n2"/>={{n1+n2}}在src/components/VModelComponent.vue文件的<template>标签中添加代码，通过v-model指令实现双向数据绑定，代码如下所示。7.3.4双向数据绑定指令在浏览器中访问http://localhost:5173，未使用.number修饰符的页面效果如图所示。<inputtype="text"v-model.number="n1"/>+<inputtype="text"v-model.number="n2"/>={{n1+n2}}修改输入框的代码，通过添加.number修饰符实现将用户输入的数字自动转换成Number类型，代码如下所示。图

使用.number修饰符的页面效果在浏览器中访问http://localhost:5173，使用.number修饰符的页面效果如图所示。图

未使用.number修饰符的页面效果7.3.5条件渲染指令v-if指令根据布尔值切换元素的显示或隐藏状态，本质是通过DOM元素切换显示或隐藏状态。当给定的布尔值为true时，元素存在于DOM树中；当给定的布尔值是false时，元素从DOM树中移除。v-if指令01通过v-if指令结合v-else-if指令、v-else指令来控制不同元素的显示或隐藏，语法格式如下。<标签名v-if="条件A">展示a</标签名><标签名v-else-if="条件B">展示b</标签名><标签名v-else="条件C">展示c</标签名>直接给定一个条件，控制单个元素的显示或隐藏，语法格式如下。<标签名v-if="条件"></标签名>v-if指令有两种使用方式注意：v-else-if指令、v-else指令必须配合v-if指令一起使用，且v-else指令必须写在v-if指令或v-else-if指令的后面，否则其将不会被识别。7.3.5条件渲染指令<template>

小明的评定成绩为：

<pv-if="type==='A'">优秀</p>

<pv-else-if="type==='B'">良好</p>

<pv-else="type==='C'">一般</p>

<button@click="type='A'">切换成优秀</button>

<button@click="type='B'">切换成良好</button>

<button@click="type='C'">切换成一般</button></template><scriptsetup>

import{ref}from'vue'

consttype=ref('B')</script>创建src/components/VIfComponent.vue文件，代码如下所示。<scriptsetup>

importVIfComponentfrom'./components/VIfComponent.vue'</script><template>

<v-if-component/></template>在App.vue中引入VIfComponent组件，切换页面中显示的组件，代码如下所示。在浏览器中访问http://localhost:5173，利用v-if指令实现的初始页面效果如图所示。图

利用v-if指令实现的初始页面效果图

单击“切换成优秀”按钮后的页面效果接下来通过实际操作演示v-if指令的使用方法，具体步骤如下。7.3.5条件渲染指令v-show指令与v-if指令都用来决定某一个元素是否在页面上显示，但v-show指令的原理是通过为元素添加或移除display:none样式来实现元素的显示或隐藏。接下来通过实际操作演示v-show指令的使用方法，具体步骤如下。v-show指令02<template>

<pv-if="flag">通过v-if控制的元素</p>

<pv-show="flag">通过v-show控制的元素</p>

<button@click="flag=!flag">显示/隐藏</button></template><scriptsetup>

import{ref}from'vue'

constflag=ref(true)</script>创建src/components/VshowComponent.vue文件，代码如下所示。<scriptsetup>

importVIfComponentfrom'./components/VShowComponent.vue'</script><template>

<v-if-component/></template>在App.vue中引入VShowComponent组件，切换页面中显示的组件，代码如下所示。7.3.5条件渲染指令在浏览器中访问http://localhost:5173并打开控制台，初始页面效果如图所示。图

单击“显示/隐藏”按钮后的页面效果和控制台效果单击“显示/隐藏”按钮，页面效果和控制台效果如图所示。图

初始页面效果7.3.6列表渲染指令Vue3提供了列表渲染指令v-for。开发者只需在模板中定义一件商品的结构，v-for指令便会根据开发者提供的数据自动渲染商品列表中的所有商品。v-for

指令可以辅助开发者基于一个数组、对象、数字或字符串来循环渲染一个列表，下面分别进行讲解。使用v-for指令根据数组渲染列表，语法格式如下。<标签名v-for="(item,index)inarr"></标签名>使用v-for指令根据对象渲染列表，语法格式如下。<标签名v-for="(item,name,index)inobj"></标签名>使用v-for指令根据数字渲染列表，语法格式如下。<标签名v-for="(item,index)innum"></标签名>使用v-for指令根据字符串渲染列表，语法格式如下。<标签名v-for="(item,index)instr"></标签名>在使用v-for指令渲染列表后，若在列表中删除一个元素，列表的index会发生变化，v-for指令会重新渲染列表，导致性能下降。为了优化性能，可以通过key属性列表中的每一项提供一个唯一标识，以便v-for指令能够跟踪每个节点的身份，从而复用和重新排序现有元素。示例：<divv-for="iteminitems":key="item.id"></div>注意：key属性值只能是String或Number类型，且必须具有唯一性，即key属性值不能重复。7.3.6列表渲染指令创建src/components/VFor1Component.vue文件，代码如下所示。根据一维数组渲染列表01<template>

<divv-for="(item,index)inlist":key="index">索引是{{index}}，内容是

{{item}}</div></template><scriptsetup>

import{reactive}from'vue'

constlist=reactive(['html','css','javascript'])</script>在App.vue中引入VFor1Component组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importVFor1Component'./components/VFor1Component.vue'</script><template>

<v-for1-component/></template>在浏览器中访问http://localhost:5173，根据一维数组渲染列表的效果如图所示。图

根据一维数组渲染列表的效果7.3.6列表渲染指令创建src/components/VFor2Component.vue文件，代码如下所示。根据对象数组渲染列表02<template>

<divv-for="iteminlist":key="item.id">id是{{item.id}}，内容是{{item.message}}</div></template><scriptsetup>

import{reactive}from'vue'

constlist=reactive([

{id:1,message:'梅'},

{id:2,message:'兰'},

{id:3,message:'竹'},

{id:4,message:'菊'}

])</script>在App.vue中引入VFor2Component组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importVFor2Component'./components/VFor2Component.vue'</script><template>

<v-for2-component/></template>在浏览器中访问http://localhost:5173，根据对象数组渲染列表的效果如图所示。图

根据对象数组渲染列表的效果7.3.6列表渲染指令创建src/components/VFor3Component.vue文件，代码如下所示。根据对象渲染列表03<template>

<divv-for="(value,name)inuser":key="name">属性名是{{name}}，属性值是

{{value}}</div></template><scriptsetup>

import{reactive}from'vue'

constuser=reactive({id:1,name:'张三',gender:'男'})</script>在App.vue中引入VFor3Component组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importVFor3Component'./components/VFor3Component.vue'</script><template>

<v-for3-component/></template>在浏览器中访问http://localhost:5173，根据对象渲染列表的效果如图所示。图

根据对象渲染列表的效果7.4事件对象1．通过事件处理方法的参数获取事件对象v-on指令绑定的用于处理事件的方法可以接收一个参数，该参数就是事件对象。示例如下。<template>

<button@click="greet">Greet</button></template><scriptsetup>

constgreet=(event)=>console.log(event)</script>接下来通过实际操作演示事件对象的使用方法，实现随着count值的变化更改按钮边框样式的效果，具体步骤如下。创建src/components/EventObject.vue文件，代码如下所示。<template>

<div>count的值为：{{count}}</div>

<button@click="addCount">count+1</button></template>7.4事件对象<scriptsetup>

import{ref}from'vue'

constcount=ref(1)

constaddCount=(event)=>{

count.value++

if(count.value%2===0){

event.target.style.border='3pxdotted'

}else{

event.target.style.border='3pxsolid'

}

}</script>在App.vue中引入EventObject组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importEventObjectfrom'./components/EventObject.vue'</script><template>

<event-object/></template>在浏览器中访问http://localhost:5173，通过事件处理方法的参数获取事件对象的初始页面效果如图所示。图

通过事件处理方法的参数获取事件对象的初始页面效果图

单击“count+1”按钮后的页面效果图

再次单击“count+1”按钮后的页面效果7.4事件对象2．通过$event获取事件对象$event是Vue提供的内置变量，使用它可以获取事件对象。示例如下。<template>

<button@click="change($event)">Greet</button></template><scriptsetup>

constchange=(event)=>console.log(event)</script>接下来修改src\components\EventObject.vue文件，演示通过$event获取事件对象的方式，具体步骤如下。编写addN()方法，代码如下所示。constaddN=(n,event)=>{

count.value+=n;

if(count.value%2===0){

event.target.style.border='3pxdotted'

}else{

event.target.style.border='3pxsolid'

}}7.4事件对象修改页面结构代码，增加一个按钮，代码如下所示。<button@click="addN(3,$event)">count+n</button>在浏览器中访问http://localhost:5173，通过$event获取事件对象的初始页面效果如右侧的效果图。图

通过$evnet获取事件对象的初始页面效果图

单击“count+n”按钮后的页面效果图

再次单击“count+n”按钮后的页面效果7.5事件修饰符01阻止默认事件行为.prevent事件修饰符可以实现阻止默认事件行为的功能。示例如下：02阻止事件冒泡.stop事件修饰符可以实现阻止事件冒泡的功能。默认情况下，浏览器会进行事件冒泡，其现象如下：当用户单击子元素时，会向上触发父元素、祖先元素的click事件。事件冒泡在DOM树中的方向是自底向上。示例如下。<ahref="test.html"v-on:click.prevent>阻止默认事件行为</a>上述代码阻止了<a>标签的默认事件行为。阻止后，当用户单击“阻止默认事件行为”链接时，页面不会发生跳转。<template>

<divv-on:click="show("我是父元素的事件'}">

<buttonv-on:click="show("我是子元素的事件')">事件冒泡</button>

<buttonv-on:click.stop="show("我是子元素的事件')">阻止事件冒泡</button>

</div>

</template><scriptsetup>

letshow=message=>console.log(message)</script>7.5事件修饰符03事件捕获.capture

事件修饰符可以实现事件捕获的功能。事件捕获的顺序与事件冒泡的顺序相反，在DOM树中的方向是自顶向下。.capture事件修饰符改变了事件的默认执行顺序，从事件冒泡的顺序更改为事件捕获的顺序。<template>

<divv-on:click.capture="show('我是父元素的事件')">

<buttonv-on:click="show('我是子元素的事件')">事件捕获</button>

</div></template><scriptsetup>

letshow=message=>console.log(message)</script>04使事件只触发一次.once事件修饰符可以实现使事件只触发一次的功能。示例如下。<template>

<buttonv-on:click.once="show("我是当前元素的click事件且只执行一次')">只执行

一次</button></template><scriptsetup>

letshow=message=>console.loq(message)</script>7.5事件修饰符05使DOM元素只有自身触发事件时才执行事件处理方法.self事件修饰符可以实现使DOM元素只有自身触发事件时才执行事件处理方法的功能。.stop事件修饰符和.self事件修饰符都可以阻止事件冒泡，二者的区别在于：<template>

<divv-on:click="show("我是祖先元素的事件')">祖先元素

<divv-on:click.self="show("我是父元素的事件')">父元素

<divv-on:click="show('我是子元素的事件')">子元素</div>

</div>

</div></template><scriptsetup>

letshow=message=>console.log(message)</script>.stop事件修饰符是阻止事件向上冒泡，当在子元素中添加.stop事件修饰符后，子元素的事件就不会冒泡到父元素；.self事件修饰符是使DOM元素只有自身触发事件时才执行事件处理方法，其他情况下不会执行事件处理方法（即使子元素的事件冒泡到该元素，也不会执行事件处理方法，但是子元素的事件会冒泡到祖先元素）。需要注意的是，当多个事件修饰符串联使用时，串联的顺序很重要，不同的顺序会产生不同的结果。7.5事件修饰符06监听scroll事件.passive事件修饰符可以实现监听scroll事件的功能。.passive事件修饰符主要用于优化移动端设备的滚屏性能。添加.passive事件修饰符后，会优先响应scroll事件而不是scroll事件的回调函数，从而提升性能。示例如下。<divv-on:scroll.passive="onScroll"></div>07捕获键盘特定按键常用的修饰键盘事件的修饰符如下。.enter：捕获“Enter”键。.esc：捕获“Esc”键。.tab：捕获“Tab”键。.delete：捕获“Delete”键和“BackSpace”键。.ctrl：捕获“Ctrl”键。.alt：捕获“Alt”键。.shift：捕获“Shift”键。.meta：在macOS操作系统的键盘上捕获“Command”键；在Windows操作系统的键盘上捕获“Windows”键。7.5事件修饰符接下来以捕获“Enter”键为例，演示.enter事件修饰符的使用方法。示例如下。<template>

<inputtype="text"v-on:keyup.enter="submit"></template><scriptsetup>

letsubmit=()=>console.log('捕获到“Enter”键’);</script>08捕获鼠标按键Vue3常用的修饰符如下。.left：捕获按鼠标左键。.middle：捕获按鼠标中键。.right：捕获按鼠标右键。如果想实现只有按“Enter”键时才能触发事件，可以通过.exact修饰符来实现，该修饰符允许控制由精确的系统修饰符组合触发的事件。修改input元素，实现仅当按“Enter”键时才触发事件。示例如下。<inputtype="text"v-on:keyup.enter.exact="submit">接下来以捕获按鼠标左键为例，演示捕获鼠标按键事件修饰符的使用方法。示例如上。<template>

<buttonv-on:click.left="show('捕获到按鼠标左键')">按钮</button></template><scriptsetup>

letshow=message=>console.log(message)</script>【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能任务1构建学生信息列表单元6中对组件进行了拆分，学生信息展示功能主要在MainComponent组件中实现，分页功能在FooterComponent组件中实现，最外层的组件是IndexComponent。为了方便不同组件之间的数据通信，先将学生信息的数据定义在IndexComponent中，然后传递给不同的子组件。在IndexComponent中使用reactive()函数创建一个响应式变量students，用来存储所有学生的信息。该变量是一个数组，数组中每个对象代表一位学生的信息，主要包含id、No、name、college、major、grade、className和age等字段，分别表示学生的序号、学号、姓名、学院、专业、年级、班级和年龄信息。代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/IndexComponent.vue）。<template>

<divclass="wrapperBox">

<header-component@delete="deleteStudent"@add="handleModal"showModal="handleModal"/><main-component

@changeSelectedStudent="changeSelectedStudent"

:selected="selectedStudent"

@showModal="handleModal"

:data="currentStudentList"

/><footer-component:data="students"@changePage="changePage"/>

</div></template><scriptsetup>

importHeaderComponentfrom'./HeaderComponent.vue'

importMainComponentfrom'./MainComponent.vue'

importFooterComponentfrom'./FooterComponent.vue'

importModalComponentfrom'./ModalComponent.vue'

import{computed,ref,reactive}from'vue'

conststudents=reactive([

{

id:'1',

No:2023001001,

name:'李明',

college:'计算机科学与工程学院',

major:'人工智能',

grade:'2023',

className:'1',

age:19,

},

{

id:'2',

No:2023001002,

name:'王芳',

college:'经济管理学院',

major:'会计学',

grade:'2022',

className:'2',

age:20,

},【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能

{

id:'3',

No:2023001003,

name:'张伟',

college:'外国语学院',

major:'英语',

grade:'2021',

className:'3',

age:21,

},

{

id:'4',

No:2023001004,

name:'赵静',

college:'法学院',

major:'法学',

grade:'2020',

className:'1',

age:22,

},{

id:'5',

No:2023001005,

name:'孙强',

college:'机械工程学院',

major:'机械设计制造及其自动化',

grade:'2023',

className:'2',

age:19,

},{

id:'6',

No:2023001006,

name:'周婷',

college:'教育科学学院',

major:'学前教育',

grade:'2022',

className:'1',

age:20,

},

{

id:'7',

No:2023001007,

name:'吴昊',

college:'理学院',

major:'数学与应用数学',

grade:'2021',

className:'2',

age:21,

},

{

id:'8',

No:2023001008,

name:'郑丽',

college:'艺术学院',

major:'视觉传达设计',

grade:'2020',

className:'3',

age:22,

},【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能

{

id:'9',

No:2023001009,

name:'冯凯',

college:'信息工程学院',

major:'通信工程',

grade:'2023',

className:'1',

age:19,

},{

id:'10',

No:2023001010,

name:'钱雪',

college:'生命科学学院',

major:'生物科学',

grade:'2022',

className:'2',

age:20,

},

{

id:'11',

No:11503080210,

name:'王大大',

college:'应用技术学院',

major:'修路',

grade:'2020',

className:'2',

age:21,

},

])</script>【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能在MainComponent组件中使用defineProps()函数接收父组件传递过来的学生信息，在props中定义data变量表示接收的数据，并在<template>中使用v-for指令对propx中的data变量进行遍历，将学生信息数据依次展示出来，每条学生信息使用<tr>标签独占一行，每个字段使用<td>标签作为单元格信息。代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/MainComponent.vue）。<template>

<divclass="container">

<tableid="containerTable">

<theadclass="tableHeader">

<tr>

<th><inputtype="checkbox"/></th>

<th>序号</th>

<th>学号</th>

<th>姓名</th>

<th>学院</th>

<th>专业</th>

<th>年级</th>

<th>班级</th>

<th>年龄</th>

<th>操作</th>

</tr>

</thead>

<tbodyid="tdata">

<tr

class="trHover"

v-for="{id,No,name,college,major,grade,className,age}

inprops.data"

:key="id"

>

<td><inputtype="checkbox"/></td>

<td>{{id}}</td>

<td>{{No}}</td>

<td>{{name}}</td>

<td>{{college}}</td>

<td>{{major}}</td>

<td>{{grade}}</td>

<td>{{className}}</td>

<td>{{age}}</td>

<td>

<aclass="viewInf">查看</a>

<aclass="updateInf">修改</a>

</td>

</tr>

</tbody>

</table>