项目六
使用 Vue 框架
开发企业门户网站
185
目录
186
任务 1 搭建 Vue 开发环境
任务 2 创建企业门户项目
任务 3 定义与使用 Vue 组件
任务 4 开发首页页面
任务 5 开发“产品介绍”页面
任务 6 开发“联系我们”页面
搭建 Vue 开发环境
任务 1
187
项目六 使用 Vue 框架开发企业门户网站
1. 了解前端框架的概念。
2. 了解 Vue 框架的特点。
3. 了解 MVVM 软件架构设计模式。
4. 能使用 Vue CLI 工具创建 Vue 项目。
188
项目六 使用 Vue 框架开发企业门户网站
本任务的内容主要是安装和配置 Vue 框架开发和运行所需的 环境，
安装 Vue CLI工具，为后期创建 Vue 项目做好准备。
189
项目六 使用 Vue 框架开发企业门户网站
一、前端框架
1. 前端框架的特点
前端框架是一种为了简化和加速前端开发而创建的工具、库和软件系统。
它提供了一套结构、规范和工具，用于组织、管理和展示 UI 元素，并协助开
发人员构建交互性高、可维护且具有良好用户体验的网页或应用程序。
190
项目六 使用 Vue 框架开发企业门户网站
前端框架主要包含以下组成部分。
（1）模板引擎（Template Engine）
模板引擎用于定义和渲染 UI 的布局和内容，它可以将数据动态地绑定到
界面上，实现数据与视图的同步更新。
（2）组件系统（Component System）
组件系统提供了一种组织、复用和分割 UI 的方法。将界面拆分成独立的
组件，可以更好地管理代码，提高代码的可维护性和重用性。组件系统包括路
由管理（Routing Management）、状态管理（State Management）、构建工具
（Build Tools）和响应式设计（Responsive Design）。
191
项目六 使用 Vue 框架开发企业门户网站
2. 前端框架的种类
（1）Vue 框架
Vue（发音为 /vju:/）框架是一款用于构建 UI 的 JavaScript 框架。它基于
标准 HTML、CSS和 JavaScript 构建，并提供了一套声明式的、组件化的编程
模型，能帮助开发人员高效地开发UI。无论是构建简单还是复杂的界面，Vue
框架都可以胜任。Vue 框架的官方网站为 框架的图标
如图所示。
192Vue 框架的图标
项目六 使用 Vue 框架开发企业门户网站
（2）React 框架
React 框架是用于构建 UI 的 JavaScript 库，其核心理念是将 UI 分解成一
系列可复用的组件，每个组件负责渲染页面上的某一部分，且各个组件可以独
立更新而不影响其他部分。这种模块化的结构使代码更易于理解和维护。React
框架使用 JSX（一种 JavaScript 的语法扩展）来编写组件，允许在同一个文件
中混合 HTML 标签和 JavaScript 代码，从而用更直观的方式来描述页面布局及
其行为。React 框架的官方网站为
193React 框架的图标
项目六 使用 Vue 框架开发企业门户网站
（3）AngularJS 框架
AngularJS 框架诞生于 2009 年，由 Misko Hevery 等人创建，是一款构建
UI 的前端框架，后为谷歌（Google）公司所收购。AngularJS 框架是一个应用
设计框架与开发的平台，用于创建高效、复杂、精致的单页面应用，通过新的
属性和表达式扩展 HTML，实现一套框架适用于多种平台、移动端和桌面端。
AngularJS 框架有着诸多特性，其中，最为核心的是 MVVM、模块化、自动化
双向数据绑定、语义化标签、依赖注入等。
Angular 框架的图标如图所示。
194Angular 框架的图标
项目六 使用 Vue 框架开发企业门户网站
二、MVVM 架构设计模式
MVVM（Model-View-ViewModel）是一种软件架构设计模式，也是一种
简化 UI 的事件驱动编程方式。其中，Model 为数据层，是各种业务逻辑处理和
数据操控的部分，包含 POJO 结构；View 为视图层，指前端 UI，主要由
HTML 和 CSS 构成；ViewModel 为视图数据层，是数据层与视图层的桥梁，
实现了数据与视图的分离。
195
项目六 使用 Vue 框架开发企业门户网站
在 MVVM 架构设计模式下，Model 和 View 之间没有直接的联系，而是
通过 ViewModel 进行交互，View 数据的变化会同步到 ViewModel 上，
ViewModel 对数据的操作也会立即反映到View 上。ViewModel 发起异步请求
通知 Model 对数据进行处理，Model 就将数据的处理结果回传给 ViewModel。
MVVM 模式的结构如图所示。
196MVVM 模式的结构
创建企业门户项目
任务 2
197
项目六 使用 Vue 框架开发企业门户网站
1. 了解单文件组件的特点。
2. 了解 Vue 项目目录结构。
3. 能创建自定义页面。
4. 能配置自定义路由。
198
项目六 使用 Vue 框架开发企业门户网站
本任务主要内容是使用 Vue CLI 工具创建项目，并使用 npm 命令启动
该项目，按项目 UI设计效果图的要求创建项目所需页面，并配置对应的路由。
199
项目六 使用 Vue 框架开发企业门户网站
一、Vue Router 的核心概念和功能
Vue Router 是 官方提供的路由器，用于在 Vue 应用中实现单页
面应用（Single Page Application，SPA）的路由功能，它允许开发人员通过定
义路由规则和组件映射来管理不同URL 路径的渲染。Vue Router 具有以下核
心概念和功能。
200
项目六 使用 Vue 框架开发企业门户网站
1. 路由器的实例
创建一个 Vue Router 实例可初始化路由器。路由器实例可以与 Vue 根实
例进行关联，并作为 Vue 应用的插件使用。
2. 路由的规则
路由规则由路径和对应的组件组成，使用路由规则可定义 URL 路径与组
件之间的关系。
201
项目六 使用 Vue 框架开发企业门户网站
3. 路由的视图
在 Vue 组件中定义路由视图的区域，可渲染与当前 URL 路径匹配的组件，
可使用标签来展示匹配到的组件。
4. 路由的导航
通过路由链接或编程式导航，可以在应用程序中的不同页面之间进行导航。
可以使用标签创建带有路由链接的导航菜单，也可以使用编程式导航函数进行
导航。
202
项目六 使用 Vue 框架开发企业门户网站
5. 路由的参数
在路由规则中定义动态参数，可以根据不同参数的值加载相应的组件。参
数可以通过路由 URL 的占位符来进行定义，其中“:id”为动态参数。
6. 路由的嵌套
创建嵌套的路由结构，可在父级路由组件内部定义子级路由规则和视图，
这种方式可以实现更复杂的应用程序导航和页面结构。
203
项目六 使用 Vue 框架开发企业门户网站
二、Vue Router 的模式
Vue Router 在创建路由器实例时，有 Hash（音译为哈希）模式和历史模
式两种模式。
1. Hash 模式
在 Hash 模式下，URL 看起来类似于“
其中，哈希标记“#”后面的部分被视为路由器的状态，“#/route”部分被称
为哈希路径。浏览器不会将哈希路径发送到服务器，因此可以在前端应用中进
行路由状态管理，而不会引起页面刷新。它适用于单页面应用程序、需要兼容
性和简单部署的场景。然而，它的 URL 友好性和对搜索引擎优化（Search
Engine Optimization，SEO）的影响在正式使用时是需要被考虑的，并且它无法
直接定位到页面的特定状态。 204
项目六 使用 Vue 框架开发企业门户网站
2. 历史模式
在历史模式下，URL 中不包含“#”符号。该模式使用浏览器的 History
API 来管理路由状态，这意味着 URL 看起来更加友好和清晰，类似于常规网站
的 URL 结构，支持 SEO 和服务端渲染。在使用历史模式时，需要服务器配置
来正确处理针对路由的请求，以便在服务器端正确地重定向到相应的页面。
205
项目六 使用 Vue 框架开发企业门户网站
三、单文件组件
Vue 组件是 框架中的核心概念之一，它允许将页面拆分成各个独立
的、可复用的模块，每个模块都有自己的模板、样式和逻辑。Vue 组件由三部
分组成，分别为模板（Template）、脚本（Script）和样式（Style）。
单文件组件（Single File Component，SFC） 是 框架中的一种组织
和编写 Vue 组件的方式，它将模板、脚本和样式组合在一个单独的文件中，以
提高组件的可读性和可维护性。
206
项目六 使用 Vue 框架开发企业门户网站
1. 模板
模板定义组件的结构和布局，是 HTML5 中的一个元素，用于在文档中定
义可复用的HTML 模板。
2. 脚本
脚本定义组件的行为和逻辑，用于组件的数据、计算属性、方法等的定义，
以及与组件相关的任何逻辑的定义。
207
项目六 使用 Vue 框架开发企业门户网站
3. 样式
样式定义组件的外观。可以在单文件组件中封装和管理组件的样式，使样
式与组件的结构和行为紧密相连，提高组件的可维护性和可复用性。除了直接
编写 CSS 规则，还可以使用预处理器进行样式的编写，并在单文件组件中引用
预处理器中的语法和功能。
<style> 标签中的样式默认为全局样式，可以使用 scoped 属性来限定该样
式仅作用于当前组件的模板部分，这个特性被称为样式作用域。
208
项目六 使用 Vue 框架开发企业门户网站
四、Vue 项目资源文件目录
在 项目中，“assets”目录和“public”目录为两个常用目录，
它们都可用于存放静态资源文件，但在使用方式和功能等方面有所区别，
“assets”目录和“public”目录的区别见下表。
209
“assets”目录和“public”目录的区别
项目六 使用 Vue 框架开发企业门户网站
210
“assets”目录和“public”目录的区别
在 Vue 项目开发时，需要使用哪个目录取决于静态资源是否需要经过构
建处理——若资源需要被打包、压缩和优化，可将其放在“assets”目录中；
若资源不需要被构建处理或需要保持原有目录结构，则可将其放在“public”
目录中。
定义与使用 Vue 组件
任务 3
211
项目六 使用 Vue 框架开发企业门户网站
1. 熟悉 Vue 组件。
2. 了解 Vue Setup 语法糖。
3. 能创建和使用自定义组件。
212
项目六 使用 Vue 框架开发企业门户网站
本任务主要内容是根据项目需求创建所有页面共用的页脚组件，并在根组
件“”文件中使用该组件。
213
项目六 使用 Vue 框架开发企业门户网站
一、Vue 组件
组件（component）是 Vue 框架最强大的功能之一。组件的作用是封装可
复用的代码，它允许人们将界面划分为独立的、可复用的部分，并且可以对每
部分进行单独的处理。通常一个组件就是一个功能体，可以很方便地在多个地
方调用这个功能体。
Vue 组件和嵌套 HTML 元素的方式类似，开发人员可以在每个组件内封
装自定义内容与逻辑，Vue 能很好地配合原生 WebComponent。
214
项目六 使用 Vue 框架开发企业门户网站
1. 组件的定义
一般情况下，Vue 组件会定义在一个单独的“*.vue”文件中，此文件被
称为单文件组件。
2. 组件的使用
若在父组件中导入上述例题中的计数器组件，这个组件将会以默认导出的
形式被暴露给外部，具体代码如下。
215
项目六 使用 Vue 框架开发企业门户网站
216
组件可以被复用任意次，具体代码如下。
在上述代码中，每当单击不同的按钮时，各个组件都维护着自己的状态，
是不同的counter，这是因为每使用一个组件就创建了一个新的实例。
项目六 使用 Vue 框架开发企业门户网站
3. Props 属性的传递
Props 是一种特别的属性，它可以在组件上声明注册。若要传递给博客文
章组件一个标题，则必须在组件的 Props 列表中声明它。这里要用到
defineProps 宏，其具体代码如下。
217
项目六 使用 Vue 框架开发企业门户网站
defineProps 是一个仅 <script setup> 语法中可用的编译宏命令，并不需要
被显式地导入。一个组件可以有任意多个 Props，在默认情况下，Props 都接受
任意类型的值，声明的 Props 会被自动暴露给模板。defineProps 宏会返回一个
对象，其中包含了可以传递给组件的所有 Props，具体代码如下。
218
项目六 使用 Vue 框架开发企业门户网站
当 Props 被注册后，可以按自定义属性的形式传递数据给它，具体代码如
下。
219
项目六 使用 Vue 框架开发企业门户网站
二、Setup 语法糖
Vue 框架中的 <script setup> 语法是在单文件组件中使用组合式 API 的编
译时语法糖（Syntactic sugar）。当同时使用单文件组件与组合式 API 时，默认
推荐该语法。相比于普通的<script> 语法，< script setup > 语法糖具有以下优势。
（1）更少的样板内容，更简洁的代码。
（2）能够使用纯 TypeScript 声明 Props 和自定义事件。
（3）更好的运行时性能（其模板会被编译成同一作用域内的渲染函数，
避免了上下文代理对象的渲染）。
（4）良好的 IDE 类型推导性能（减少服务器从代码中抽取类型的工作）。
220
项目六 使用 Vue 框架开发企业门户网站
1. 基本语法
要启用该语法，需要在 <script> 代码块上添加 setup 属性，具体代码如下。
221
项目六 使用 Vue 框架开发企业门户网站
2. 顶层绑定的使用
当使用 <script setup> 语法时，任何在 <script setup> 标签内声明的顶层绑
定（包括变量、函数声明，以及 import 导入的内容）都能在模板中直接被使用，
具体代码如下。
222
项目六 使用 Vue 框架开发企业门户网站
3. 响应式
响应式状态需要明确使用响应式 API 来创建。与 setup( ) 函数的返回值一
样，在模板中使用 ref 时会自动解包，具体代码如下。
223
项目六 使用 Vue 框架开发企业门户网站
4. 组件的使用
<script setup> 标签内的值也能被直接作为自定义组件的标签名使用，具体
代码如下。
224
开发首页页面
任务 4
225
项目六 使用 Vue 框架开发企业门户网站
1. 了解组件 Props 的属性。
2. 了解 v-bind 指令。
3. 能使用 Props 进行组件传值。
226
项目六 使用 Vue 框架开发企业门户网站
本任务主要内容是按照右图所示的首页
设计效果进行开发，完整的首页页面包括页
头、页脚、页面主体上方的 Banner、“特色
服务”“最新资讯”和“服务流程”模块等
部分。
227
首页的设计效果
项目六 使用 Vue 框架开发企业门户网站
一、组件的 Props 属性
Props 是一种特别的属性，可以在子组件上声明注册。父组件在调用子组
件时，可以通过Props 属性将需要的值传递给子组件。
1. Props 的声明
需要组件显式声明它所接受的 Props，Vue 才能确定在外部传入的参数中，
哪些是 Props，哪些是透传属性（如 class、style 或 id）。
228
项目六 使用 Vue 框架开发企业门户网站
在使用 <script setup> 标签的单文件组件中，Props 可以使用 defineProps( )
宏来进行声明，具体代码如下。
229
项目六 使用 Vue 框架开发企业门户网站
除了使用字符串数组来声明 Props 外，还可以使用对象的形式来声明，具
体代码如下。
在以对象形式声明的 Props 中，key 是 Prop 的名称，而值则是该 Prop 预
期类型的构造函数。
以对象形式声明的 Props 不仅可以在一定程度上作为组件的文档，如果其
他开发人员在使用组件时传递了错误的类型，它还会在浏览器控制台中抛出警
告信息。 230
项目六 使用 Vue 框架开发企业门户网站
2. 值的传递
任何类型的值都可以作为 Props 的值被传递，包括 Number、Boolean、
Array 和 Object 等。
3. 单向数据流
所有的 Props 都遵循单向绑定原则，Props 因父组件的更新而变化，自然
地将新的状态传递至子组件，而不会逆向传递。在每次父组件更新后，所有的
子组件中的 Props 都会被更新到最新值，这意味着不应在子组件中去更改一个
Prop，如果这么做，Vue 会在控制台上抛出警告信息。
231
项目六 使用 Vue 框架开发企业门户网站
二、v-bind 指令
v-bind 是 Vue 框架的内置指令之一，它的作用是动态地绑定一个或多个
属性，也可以绑定组件的 Prop。
v-bind 指令的常见用法是将 Vue 实例中的数据或计算属性绑定到 HTML
元素的属性上。通过这种方式，HTML 元素的属性值可以根据数据的变化而自
动更新，从而实现响应式的界面。
232
项目六 使用 Vue 框架开发企业门户网站
1. 指令的语法
由于 v-bind 指令可以绑定元素的各种属性，它在 Vue 项目中较为常用，
Vue 官方为v-bind:attribute 提供了特定的简写语法“:attribute”。
v-bind 指令可以加入修饰符，包括 .camel（将短横线命名的属性转变为驼
峰式命名）、.prop（强制绑定为 DOM property）、.attr（强制绑定为 DOM
attribute）等。
2. 指令的用途
当 v-bind 指令被用于绑定 class 或 style attribute 时，v-bind 指令支持额外
的类型；当 v-bind 指令被用于组件 Props 绑定时，被绑定的 Props 必须在子组
件中已被正确声明。
233
开发“产品介绍”页面
任务 5
234
项目六 使用 Vue 框架开发企业门户网站
1. 能使用 v-for 指令进行列表渲染。
2. 能熟练在脚本 <script> 中定义对象数组。
235
项目六 使用 Vue 框架开发企业门户网站
本任务主要内容是按照图所示的“产
品介绍”页面设计效果进行开发，定义一
个产品案例数组，并使用 v-for 指令实现动
态列表渲染。
236
“产品介绍”页面的设计效果
项目六 使用 Vue 框架开发企业门户网站
v-for 指令是 Vue 框架的内置指令之一，它的作用是基于原始数据多次渲
染元素或模板块。在 Vue 项目中，常常使用 v-for 指令基于一个数组来渲染一
个列表或遍历一个对象的所有属性。
237
项目六 使用 Vue 框架开发企业门户网站
一、v-for 指令的语法
v-for 指令的值需要使用 item in items 形式的特殊语法，其中，items 是源
数据的数组，而item 是正在迭代的元素别名。
使用 v-for 指令的示例代码如下。
238
项目六 使用 Vue 框架开发企业门户网站
运行以上代码，页面显示的运行结果如图所示。
v-for 指令的默认运行方式是尝试就地更新元素而不移动它们。若要强制
其重新排列元素，则需要用特殊属性 key 来提供一个排序提示，具体代码如下。
239
运行结果
项目六 使用 Vue 框架开发企业门户网站
二、v-for 指令的作用域
在 v-for 指令中，可以完整地访问父作用域内的属性和变量。v-for 指令
也支持使用可选的第二个参数来表示当前项的位置索引。
若在上述代码示例中，在脚本 <script> 标签中再定义一个变量
parentMessage，则具体代码如下。
240
项目六 使用 Vue 框架开发企业门户网站
运行以上代码，页面显示的运行结果如图所示。
241
运行结果
项目六 使用 Vue 框架开发企业门户网站
三、使用 v-for 指令遍历对象
可以使用 v-for 指令来遍历一个对象的所有属性，遍历的顺序会基于对该
对象调用 ( ) 函数的返回值来决定。
使用 v-for 指令遍历对象的具体代码如下。
242
项目六 使用 Vue 框架开发企业门户网站
243
开发“联系我们”页面
任务 6
244
项目六 使用 Vue 框架开发企业门户网站
1. 了解响应式系统。
2. 能使用 v-model 指令绑定数据。
3. 能使用 v-on 指令监听并处理 DOM 事件。
245
项目六 使用 Vue 框架开发企业门户网站
本任务主要内容是按照如图所示的 “联系我们”页面设计效果进行开
发。
246
“联系我们”页面的设计效果
项目六 使用 Vue 框架开发企业门户网站
一、响应式系统
Vue 最具标志性的功能就是其低侵入性的响应式系统，组件状态都是由
响应式 的JavaScript 对象组成的，当更改它们时，视图会随即自动更新。
Vue 的响应式系统基本是基于运行时的，追踪和触发都是在浏览器中运
行时进行的。运行时响应的优点是它可以在没有构建步骤的情况下工作，且
边界情况较少；缺点是这使它受到了 JavaScript 语法的制约，需要使用一些如
Vue ref 这样的值的容器。
247
项目六 使用 Vue 框架开发企业门户网站
1. ref( ) 函数
ref( ) 函数接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对
象只有一个指向其内部值的属性 .value。在组合式 API 中，推荐使用 ref( ) 函数
来声明响应式状态。
ref 对象是可更改的，即可以为 .value 赋予新的值，它也是响应式的，即
所有对 .value 的操作都将被追踪，且写操作会触发与之相关的响应。
248
项目六 使用 Vue 框架开发企业门户网站
2. 响应式示例代码
响应式系统的工作过程为：
在脚本 <script> 中先使用 import 导入 ref( ) 函数，然后分别定义两个变量
count（数值型）和 str（字符串型），变量通过 ref( ) 接收参数，并将其包裹在
一个带有 .value 属性的 ref 对象中返回，具体代码如下。
249
项目六 使用 Vue 框架开发企业门户网站
若是在模板 <template> 中，可以直接使用变量的值，具体代码如下。
测试并运行上述代码，两种类型的变量均可被正常调用和显示，显示内容
如图所示。
250
显示内容
项目六 使用 Vue 框架开发企业门户网站
若想在脚本 <script> 中引用 ref 变量的值，则需要使用 .value 来返回变量
的值，否则会直接返回 ref 对象本身。在脚本 <script> 中添加输出语句代码，
测试并调用两种类型的变量，具体代码如下。
251
项目六 使用 Vue 框架开发企业门户网站
运行以上代码，在浏览器控制台中输出的内容如图所示
由上图可以看出，若直接输出 count 或 str，其类型为对象（Object），且
都有一个 value属性，分别为数值 88 与字符串“Hello”；若输出
或 ，则可直接获得其value 属性的值。 252
在浏览器控制台中输出的内容
项目六 使用 Vue 框架开发企业门户网站
二、v-model 指令
在前端处理表单时，常常需要将表单输入框中的内容同步至 JavaScript 相
应的变量中。手动连接值绑定和更改事件监听器可能会很麻烦，Vue 框架提供
了 v-model 指令，它可以在组件上使用，以实现双向绑定。
1. v-model 指令的使用
在脚本 <script> 中定义一个响应式变量（如 userName），并将其通过 v-
model 指令绑定在元素上，就可以实现双向绑定，即无论在模板还是在脚本二
者任何一个上改变响应式变量的值，都将导致另一个被同步改变。
253
项目六 使用 Vue 框架开发企业门户网站
假设页面表单中需要用户提交用户名（userName）字段，示例代码如下。
在上述代码中，当用户在 input 输入框中输入内容时，响应式变量
userName 的 .value 属性值也会随之改变，同样，当使用脚本改变 userName 的
.value 属性值时，页面中对应的 input元素的显示值也会实时更新为最新的
.value 属性值。 254
项目六 使用 Vue 框架开发企业门户网站
2. v-model 指令的类型支持
v-model 指令还可以用于各种不同类型的输入。它会根据所使用的元素自
动使用对应的 DOM 属性和事件组合，具体形式如下。
（1）文本类型的 <input> 标签和 <textarea> 标签元素会绑定 value 属性并
侦听 input 事件。
（2）<input type="checkbox"> 和 <input type="radio"> 会绑定 checked 属性
并侦听 change 事件。
（3）<select> 标签会绑定 value property 并侦听 change 事件。
v-model 指令会忽略任何表单元素上初始的 value、checked 或 selected 等，
它始终将当前绑定的响应式变量视为数据的正确来源，所以应该在脚本
<script> 标签中定义该初始值。 255
项目六 使用 Vue 框架开发企业门户网站
三、v-on 指令
v-on 指令是 Vue 框架的内置指令之一，它的作用是为元素绑定事件监听
器。一般情况下，v-on 指令被用来监听 DOM 事件，并在事件触发时执行对应
的事件处理器（handler）。事件处理器包括内联事件处理器和方法事件处理器。
1. v-on 指令的语法
v-on 指令的语法为 v-on:click="handler"，可以将指令中的“v-on”去掉，
直接简写为 @click="handler"。
256
项目六 使用 Vue 框架开发企业门户网站
（1）内联事件处理器
内联事件处理器在事件被触发时执行内联 JavaScript 语句（与 onclick 类
似），示例代码如下。
257
项目六 使用 Vue 框架开发企业门户网站
上述代码在脚本 <script> 中定义了一个响应式变量 count，在模板
<template> 中包含一个段落（用于显示 count 变量的值），以及一个按钮。按
钮使用 @click 绑定了内联 JavaScript 语句“count++”，当按钮被单击时，会
将响应式变量 count 的值加 1，页面自动刷新显示 count最新的值。
258
项目六 使用 Vue 框架开发企业门户网站
（2）方法事件处理器
在上述代码中，也可将按钮单击事件修改为一个指向组件上定义的方法，
修改后的具体代码如下。
259
项目六 使用 Vue 框架开发企业门户网站
也可以向方法中传入自定义参数，具体代码如下。
260
项目六 使用 Vue 框架开发企业门户网站
2. 事件修饰符
Vue 为 v-on 指令提供了用“.”表示的指令后缀作为事件修饰符，主要包
含以下修饰符。
261
项目六 使用 Vue 框架开发企业门户网站
3. 按键修饰符
在监听键盘事件时，经常需要检查特定的按键，Vue 允许在 v-on（@）指
令监听按键事件时添加按键修饰符。仅在 key 为 enter 时才调用 submit 事件处
理的示例代码如下。
262
项目六 使用 Vue 框架开发企业门户网站
4. 系统按键修饰符
使用系统按键修饰符可以触发鼠标或键盘事件监听器，只有当按键被按下
时才会触发。系统按键修饰符包括 .ctrl、.alt、.shift 和 .meta。
5. 鼠标按键修饰符
鼠标按键修饰符包括 .left、.right 和 .middle，它们将处理程序限定为由特
定鼠标按键触发的事件。
263
