Vue.js前端开发实战（第2版）全套完整教学课件

第1章初识Vue.js《Vue.js前端开发实战（第2版）》第1章初识Vue.js第2章Vue.js开发基础第3章组件基础（上）第4章组件基础（下）第5章路由第6章常用UI组件库第7章网络请求和状态管理第8章项目实战——“微商城”前后台开发全套可编辑PPT课件学习目标/Target

了解前端技术的发展，能够说出使用框架开发项目的优势了解什么是Vue，能够说出Vue的基本概念了解Vue的特性，能够说出Vue的4个特性了解Vue的版本，能够说出Vue2和Vue3的区别学习目标/Target掌握VisualStudioCode编辑器的使用方法，能够使用VisualStudioCode编

辑器进行项目开发

掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装

掌握常见的包管理工具的使用方法，能够应用npm和yarn相关命令下载、升级、

卸载包掌握Vite的使用方法，能够使用Vite创建Vue3项目章节概述/Summary在前端开发中，一个优秀的框架可以帮助用户解决一些常见的问题，有助于高效地完成工作。Vue.js（简称Vue）作为前端开发常用的框架之一，不仅可以提高项目的开发效率，而且可以改善开发体验。为了帮助读者对Vue有一个初步的认识，本章将对Vue的基础知识进行详细讲解。目录/Contents1.11.21.3前端技术的发展Vue简介Vue开发环境1.4使用Vite创建Vue3项目前端技术的发展1.1了解前端技术的发展，能够说出使用框架开发项目的优势1.1前端技术的发展

先定一个小目标！前端开发的基础语言为HTML、CSS和JavaScript，其中，HTML用于搭建页面的内容结构；CSS用于美化页面的显示效果；JavaScript用于处理用户和页面之间的交互行为。1.1前端技术的发展当开发大型交互式项目时，开发者需要编写大量的JavaScript代码来操作文档对象模型（DocumentObjectModel，DOM）并处理浏览器的兼容性问题。为了简化DOM操作和减少开发过程中的浏览器兼容性问题，jQuery提供了一个选择器引擎，它比其他引擎查询速度更快，并为不同浏览器之间的JavaScript不兼容提供了隐式处理方法，因此jQuery深受开发人员的欢迎。jQuery的核心思想是使开发人员仅编写少量的代码就能实现更多的功能。1.1前端技术的发展在移动互联网时代，前端技术被应用于移动端开发中。为了使移动端网页的使用体验更接近用户习惯，移动端网页通常会做成单页Web应用（SinglePageWebApplication）的形式。单页Web应用在使用过程中只需要加载一个HTML页面，而传统的网页是用户每单击一个链接都需要加载相应的HTML页面。需要说明的是，单页Web应用并不是只能显示一个页面，所谓“单页”是对浏览器而言的，而开发者可以利用Ajax技术实现逻辑上的页面切换的效果。1.1前端技术的发展为了提高开发效率，市面上出现了基于MVVM模式的前端开发框架，例如Angular、React、Vue等。这些框架以数据为核心，使用户关注业务逻辑的处理，减少了手动的DOM操作。这些框架还为开发者提供了一套开发规则，控制权在框架本身，用户需要按照框架的规范进行开发。与jQuery相比，使用框架开发的项目具有更高的开发效率、更好的可维护性、更强的可扩展性和更高的性能。在Angular、React和Vue这3个框架中，Vue体积较小，在使用上更容易上手、更加灵活。1.1前端技术的发展多学一招：什么是单页Web应用单页Web应用将所有的功能局限于一个Web页面中，仅在该页面的初始化时加载相应的资源（必要的HTML、CSS和JavaScript代码）。在页面加载完成后，所有的操作都在这个页面上完成，且不会因用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态地变换页面的内容，从而实现页面与用户的交互。1.1前端技术的发展多学一招：什么是单页Web应用单页Web应用有以下3个优点。良好的交互体验。在单页Web应用中，内容的改变不需要重新加载整个页面，响应速度更快。良好的前后端分离开发模式。后端专注于提供API，更容易实现API的复用。减轻服务器的压力。单页Web应用中的数据是通过Ajax获取的，不需要重新加载，服务器的压力较小。1.1前端技术的发展多学一招：什么是单页Web应用任何一种技术都有局限性，对于单页Web应用来说，主要的问题有以下2个。①首屏加载慢，在首次加载时需要将页面中所用到的资源全部加载。②不利于搜索引擎优化（SearchEngineOptimization，SEO）。对于单页Web应用，搜索引擎请求到的HTML页面可能不是包含所有数据的最终渲染页面，这样就很不利于内容被搜索引擎搜索到。1.1前端技术的发展多学一招：什么是单页Web应用随着技术的进步，上述问题已经有了相应的解决方案。对于第1个问题，可以通过路由懒加载、代码压缩、网络传输压缩等方式解决；对于第2个问题，可以通过服务器端渲染（Server-SideRendering，SSR）技术解决。1.1前端技术的发展Vue简介1.2了解什么是Vue，能够说出Vue的基本概念

先定一个小目标！1.2.1什么是Vue什么是Vue呢？1.2.1什么是VueVue（读音：/Vjuː/）是一款用于构建用户界面的渐进式框架。其中，“渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。1.2.1什么是Vue使用Vue进行项目开发具有以下优势。轻量级。Vue是一个轻量级的前端开发框架，文件体积小。Vue项目基于JavaScript语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。Vue在使用上比较灵活，开发人员可以选择使用Vue开发一个全新项目，也可以将Vue引入现有项目。1.2.1什么是VueVue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应的数据绑定，可支持单向和双向数据绑定。Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。1.2.1什么是VueVue是基于MVVM模式的框架。MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。其中，Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。1.2.1什么是VueVue的基本工作原理如下图所示。1.2.1什么是VueView和Model不能直接通信，它们需要借助ViewModel才能进行通信。ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。ViewModel包含DOMListeners和

DataBindings。其中，DOMListeners用于监听View中DOM变化，并在DOM变化时通知Model做出相应的修改；DataBindings用于监听Model中的数据变化，并在数据变化时通知View做出相应的修改。1.2.1什么是Vue了解Vue的特性，能够说出Vue的4个特性

先定一个小目标！1.2.2Vue的特性Vue的4个特性。数据驱动视图双向数据绑定插件指令1.2.2Vue的特性在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。1.2.2Vue的特性1.数据驱动视图Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。1.2.2Vue的特性2.双向数据绑定指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。1.2.2Vue的特性3.指令Vue支持插件，通过加载插件可以实现更多的功能。常用的插件有VueRouter（路由）、Vuex（状态管理库）、Pinia（轻量级状态管理库）等，这些插件经过简单配置就可以使用。1.2.2Vue的特性4.插件了解Vue的版本，能够说出Vue2和Vue3的区别

先定一个小目标！1.2.3Vue的版本目前，Vue共有3个大版本，分别是Vue

1、Vue2和Vue3。其中，Vue1几乎被淘汰，不建议学习与使用；Vue2和Vue3目前被广泛应用，并且Vue3将会逐步替代Vue2。1.2.3Vue的版本Vue3支持Vue2中绝大多数的API与特性，同时Vue3还新增了一些特有的功能，并废弃了Vue2中的一些旧功能。Vue3新增的功能包括组合式（Composition）API、多根节点组件等；废弃的旧功能包括过滤器（Filter）以及$on()、$off()和$once()实例方法等。虽然从表面上看，Vue3和Vue2的使用方式没有太大的差异，但Vue3的底层代码发生了很大变化，包括渲染、数据监听、双向绑定、生命周期等。1.2.3Vue的版本Vue3的新特性如下。体积更小，采用按需编译的方式编译出来的文件体积比Vue2的小。性能提升，运行速度比Vue2快1.5倍左右。具有更好的TypeScript支持。暴露了更底层的API，可以通过多种方式组织代码，代码使用上更加灵活。提供了更先进的组件。Vue创建了一个虚拟的Fragment节点，允许组件中有多个根节点。提供组合式API，能够更好地组合逻辑、封装逻辑、复用逻辑。1.2.3Vue的版本为了提高开发效率，开发者可以在项目中添加UI组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体，使用它可以更快速地开发用户界面。目前，主流UI组件库都已经发布了支持Vue3的版本，常用的UI组件库如下。Element

Plus组件库：一款基于Vue3的桌面端组件库。Vant组件库：一款开源移动端组件库，它从3.0版本开始支持Vue3。Ant

Design

Vue组件库：一款用于开发和服务企业级后台产品的组件库，它从2.0版本开始支持Vue3。1.2.3Vue的版本Vue开发环境1.3掌握VisualStudioCode编辑器的使用方法，能够完成中文语言扩展、Volar扩展的安装，以及使用VisualStudioCode编辑器打开项目并在项目中创建一个HTML5文档1.3.1VisualStudioCode编辑器

先定一个小目标！VisualStudioCode（简称VSCode）是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于前端开发人员来说，一个强大的编辑器可以使开发变得简单、便捷、高效。1.3.1VisualStudioCode编辑器VSCode编辑器具有以下特点。轻巧、极速，占用系统资源较少。具备代码智能补全、语法高亮显示、自定义快捷键和代码匹配等功能。跨平台，可用于macOS、Windows和Linux操作系统。主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色，以及可以快速查看已打开的项目文件和项目文件结构。提供丰富的扩展，用户可根据需要自行下载和安装扩展。1.3.1VisualStudioCode编辑器1.3.1VisualStudioCode编辑器下面讲解如何下载和安装VSCode编辑器、如何安装中文语言扩展、如何安装Volar扩展，以及如何使用VSCode编辑器。打开浏览器，登录VSCode编辑器的官方网站，如右图所示。1.3.1VisualStudioCode编辑器1.下载和安装VSCode编辑器在VSCode编辑器的官方网站中，单击“DownloadforWindows”按钮，该页面会自动识别当前的操作系统并下载相应的安装包。如果需要下载其他系统的安装包，可以单击按钮右侧的小箭头“”打开下拉菜单，就会看到其他系统的安装包对应的下载图标，如右图所示。1.3.1VisualStudioCode编辑器下载VSCode编辑器的安装包后，在下载目录中找到该安装包，如下图所示。1.3.1VisualStudioCode编辑器双击上图所示的图标，启动安装程序，然后按照程序的提示一步一步进行操作，直到安装完成。将VSCode编辑器安装成功后，启动该编辑器，即可进入VSCode编辑器的初始界面，如下图所示。1.3.1VisualStudioCode编辑器将VSCode编辑器安装完成后，该编辑器的默认语言是英文。如果想要切换为中文，首先单击VSCode编辑器的初始界面左侧边栏中的“”图标按钮进入扩展界面，然后在搜索框中输入关键词“chinese”找到中文语言扩展，单击“Install”按钮进行安装，如下图所示。1.3.1VisualStudioCode编辑器2.安装中文语言扩展安装成功后，需要重新启动VSCode编辑器，中文语言扩展才可以生效。重新启动VSCode编辑器后，VSCode编辑器的中文界面如下图所示。1.3.1VisualStudioCode编辑器1.3.1VisualStudioCode编辑器Volar扩展专门用于为“.vue”单文件组件（Single-FileComponent，SFC）提供代码高亮显示和语法支持。该扩展仅适用于Vue3项目，不仅提供了语法高亮显示、智能提示、错误提示、格式化等功能，而且支持多根节点组件，例如支持将一个Vue文件中的<template>、<script>、<style>拆分成3个窗口，每个窗口负责各自的功能。3.安装Volar扩展Volar扩展的安装方法与中文语言扩展的安装方法类似。如果想要安装Volar扩展，可以在扩展界面的搜索框中输入关键词“Volar”，搜索到“VueLanguageFeatures(Volar)”扩展后进行安装。需要注意的是，Vue3的组件代码与Vue2不同，使用的语法提示和高亮插件也不同。在Vue2中不能使用Volar扩展，而是使用Vetur扩展，可以在扩展界面的搜索框中输入关键词“Vetur”，搜索到“Vetur”扩展后进行安装。1.3.1VisualStudioCode编辑器在实际开发中，开发一个项目需要先创建项目文件夹，以便于保存项目中的文件。接下来演示如何创建项目文件夹，如何使用VSCode编辑器打开项目文件夹，以及如何创建一个HTML5文档，具体步骤如下。1.3.1VisualStudioCode编辑器4.使用VSCode编辑器在D:\vue目录下创建一个项目文件夹chapter01。创建项目文件夹1.3.1VisualStudioCode编辑器步骤1步骤3步骤2在VSCode编辑器的菜单栏中选择“文件”→“打开文件夹”命令，然后选择chapter01文件夹。打开文件夹后的界面效果如下图所示。打开文件夹1.3.1VisualStudioCode编辑器步骤1步骤3步骤2单击按钮①，输入要创建的文件名称index.html，即可创建该文件。此时创建的index.html文件是一个空白的文档，在该文档中，输入“html:5”，VSCode会给出智能提示，然后按“Enter”

键会自动生成一个HTML5文档结构。创建HTML5文档1.3.1VisualStudioCode编辑器步骤1步骤3步骤2创建HTML5文档1.3.1VisualStudioCode编辑器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body>

</body></html>>>接上页步骤1步骤3步骤2掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装1.3.2

Node.js环境

先定一个小目标！Node.js是一个基于V8引擎的JavaScript运行环境，提供了一些功能性的API，例如文件操作API、网络通信API等。1.3.2

Node.js环境打开Node.js官网，找到Node.js下载地址，如下图所示。1.3.2

Node.js环境从Node.js官方网站可以看出，Node.js有两个版本，分别是16.17.0LTS和18.9.0Current。其中，LTS（LongTermSupport）表示提供长期支持的版本，只进行Bug修复且版本稳定，因此有很多用户在使用；Current表示当前发布的新版本，增加了一些新特性，有利于进行新技术的开发使用。这里选择下载16.17.0LTS版本。下载完成后会得到一个名称为node-v16.17.0-x64.msi的安装包文件。1.3.2

Node.js环境双击node-v16.17.0-x64.msi安装包图标，会弹出安装向导窗口，如下图所示。安装过程全部使用默认值。1.3.2

Node.js环境安装完成后，测试一下Node.js是否安装成功，具体步骤如下。1.3.2

Node.js环境按“Windows+R”组合键，打开“运行”对话框，输入“cmd”。在“运行”对话框中输入“cmd”后的效果如下图所示。打开“运行”对话框1.3.2

Node.js环境步骤1步骤3步骤2单击“确定”按钮或者直接按“Enter”键，会打开命令提示符，如下图所示。打开命令提示符1.3.2

Node.js环境步骤1步骤3步骤2在命令提示符中，输入命令“node-v”，其中v是version的简写，表示版本。命令输入完成后，按“Enter”键，查看当前安装的Node.js版本，如下图所示。查看Node.js版本若想要退出命令提示符，可以输入“exit”并按“Enter”键，或者单击右上角的“×”关闭按钮退出。1.3.2

Node.js环境步骤1步骤3步骤2掌握常见的包管理工具的使用方法，能够应用npm和yarn相关命令下载、升级、卸载包1.3.3常见的包管理工具

先定一个小目标！什么是包呢？1.3.3常见的包管理工具在Vue项目开发中，经常需要通过各种第三方的包（package）来扩展项目的功能。“包”可以理解为将一系列模块化的代码打包起来，形成一个包，以便于使用。项目中所用到的包称为项目的依赖（dependency）。1.3.3常见的包管理工具什么是包管理工具呢？1.3.3常见的包管理工具为了方便管理第三方的包，需要用到包管理工具。包管理工具可以让开发人员轻松地下载、升级、卸载包。假设在项目开发时，没有包管理工具，若想使用第三方包，则每次都需要下载、解压后才可以使用，非常烦琐。而使用包管理工具，只需通过一条命令即可下载并安装第三方包，非常方便，而且还可以指定下载的版本等。1.3.3常见的包管理工具1.3.3常见的包管理工具npm是Node.js默认的包管理工具，它可以安装、共享、分发代码，还可以管理项目的依赖关系。npmyarn是Node.js的包管理工具，它是一个高效、安全和可靠的包管理工具，yarn能够提高包的安装效率，节约安装时间。yarn常见的包管理工具在安装Node.js时会自动安装相应版本的npm，不需要单独安装，使用“npm-v”命令可以查看npm的版本，如下图所示。1.3.3常见的包管理工具1.npm使用npm包管理工具可以解决以下场景的需求。从npm服务器下载别人编写的第三方包到本地使用。从npm服务器下载并安装别人编写的命令行程序到本地来使用。将自己编写的包或命令行程序上传到npm服务器供别人使用。1.3.3常见的包管理工具npm提供了快速操作包的命令，只需要执行简单的命令就可以很方便地对第三方包进行管理。npm中常用的命令如下。npminstall包名：可简写为“npmi包名”，用于为项目安装指定名称的包。如果加上-g选项，则会把包安装为全局包，否则只安装到本项目中。如果省略包名，则npm会根据当前目录下的package.json文件中保存的依赖信息为项目安装所有的包。npmuninstall包名：用于卸载指定名称的包。npmupdate包名：用于更新指定名称的包。1.3.3常见的包管理工具在下载npm安装包时，下载速度可能会比较慢，这是因为提供包的服务器在国外。为了加快包的下载速度，建议将下载源切换成国内镜像服务器。为npm设置镜像地址的具体命令如下。1.3.3常见的包管理工具npmconfigsetregistry为了验证镜像地址是否设置成功，可以通过如下命令进行验证。npmconfiggetregistry执行上述命令后，若输出了设置的镜像地址，则表示设置成功。1.3.3常见的包管理工具在使用yarn之前，需要先确保计算机中已经安装了Node.js环境，再使用npm命令安装yarn，安装命令如下。npminstallyarn-g为了验证yarn是否安装成功，可以通过“yarn-v”命令查看yarn的版本信息，如下图所示。2.yarn为了提高下载yarn安装包的速度，也可以将yarn的下载源切换成国内镜像服务器。为yarn设置镜像地址的具体命令如下。1.3.3常见的包管理工具yarnconfigsetregistry为了验证镜像地址是否设置成功，可以通过如下命令进行验证。yarnconfiggetregistry执行上述命令后，若输出了设置的镜像地址，则表示设置成功。下面列举yarn中一些常用的命令。yarninstall：可简写为yarn，用于为项目安装所有包。如果提供了-g选项，则会把包安装为全局包，否则只安装到本项目中。yarnremove包名：用于卸载指定名称的包。yarnup包名：用于更新指定名称的包。yarnadd包名：用于添加指定名称的包。1.3.3常见的包管理工具1.3.3常见的包管理工具yarn与npm包管理工具的区别使用npm安装同一个包时，每次安装都需要重新下载，而yarn会缓存每个下载过的包，再次使用时无须重复下载。npm按照队列安装每个包，也就是说，必须要等到当前包安装完成后，才能继续安装后面的包，而yarn可以利用并行下载的方式提高资源利用率，安装速度更快。npm的输出信息比较冗长，在执行npminstall命令时，命令提示符里会输出所有被安装的包的信息。相比之下，yarn的输出信息比较简洁，只输出必要的信息，同时也提供了一些命令供开发者查询额外的安装信息。使用Vite创建Vue3项目1.4了解什么是Vite，能够说出Vite的基本概念1.4.1

什么是Vite

先定一个小目标！1.4.1

什么是Vite什么是Vite？1.4.1

什么是ViteVite（读音：/vit/）是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（HotModuleReplacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。在Vue3出现前，Vue2一般使用Vue

CLI创建。Vue

CLI基于Webpack构建并配置项目，在项目启动时，Webpack需要从入口文件索引整个项目的文件，编译成一个或多个单独的.js文件。虽然Webpack对代码进行了拆分，但是仍可能一次生成所有路由下的编译后的文件，导致服务启动时间随着项目的复杂度增加而呈指数式的增长。而Vite改进了这一点，在项目启动时，Vite会对模块代码进行按需加载，启动速度更快。因此，当使用Vue3开发新项目时，推荐使用Vite进行创建。1.4.1

什么是ViteVite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。需要注意的是，Node.js必须为14.18及以上版本时才可以使用Vite，并且Vite中的部分模板可能需要更高的Node.js版本才能正常运行。另外，Node.js的14、16等更新版本不再支持Windows7操作系统，推荐使用Windows10等新版操作系统。1.4.1

什么是Vite掌握Vue3项目的创建方法，能够使用Vite创建Vue3项目1.4.2

创建Vue3项目

先定一个小目标！Vite提供了两种创建项目的命令。手动创建项目的命令通过模板自动创建项目的命令1.4.2

创建Vue3项目使用npm或yarn包管理工具都可以搭配Vite手动创建项目，具体命令如下。#使用npmcreate命令创建项目npmcreatevite@latest#使用yarncreate命令创建项目yarncreatevite上述命令展示了两种包管理工具用于创建Vite项目，在使用时任选其一即可。npmcreate和yarn

create命令后跟一个vite包名，表示初始化Vite。vite@latest表示在npm中安装最新版本的Vite。1.4.2

创建Vue3项目1.手动创建项目的命令打开命令提示符，切换到D:\vue\chapter01目录，执行如下命令。yarncreatevite执行上述命令后，Vite会提示填写项目名称，如下图所示。1.4.2

创建Vue3项目STEP01步骤1步骤3步骤4步骤2手动创建Vue项目使用vite-project作为项目名称后，Vite会提示选择创建项目所使用的框架，如下图所示。1.4.2

创建Vue3项目手动创建Vue项目步骤1步骤3步骤4步骤2选择好框架后，Vite会提示选择一个变体，如下图所示。1.4.2

创建Vue3项目STEP03手动创建Vue项目步骤3步骤4步骤2步骤1选择好变体后，Vite会提示项目创建完成，如下图所示。1.4.2

创建Vue3项目手动创建Vue项目步骤3步骤4步骤2步骤11.4.2

创建Vue3项目项目创建完成后的提示命令，具体命令解释如下。cdvite-project #切换到项目目录yarn #安装项目的全部依赖yarndev #启动服务上述命令中，yarndev命令是Vue3项目中package.json文件里面scripts节点配置的命令。除了yarndev命令外，还有2个常用命令yarnbuild和yarn

preview，它们分别表示构建生产环境项目和构建本地预览环境项目。这3个命令实际上都是别名，是为了便于开发人员记忆。当执行这3个命令时，yarn会读取当前项目的package.json文件中的命令配置，找到真正的命令并执行。1.4.2

创建Vue3项目Vue3项目的package.json文件中的命令配置如下。"scripts":{"dev":"vite","build":"vitebuild","preview":"vitepreview"},上述配置中，dev是vite的别名，build是vite

build的别名，preview是vitepreview的别名。也就是说，当执行yarndev时，实际执行的命令是yarnvite。别名可以自定义，如果修改了别名，在执行命令时需要使用修改后的别名。1.4.2

创建Vue3项目项目启动后，会默认开启一个本地服务，具体如下。VITEv4.1.4readyin441ms➜Local::5173/1.4.2

创建Vue3项目在浏览器中打开:5173/，如下图所示。通过模板自动创建项目的方式相对简单，它通过附加的命令行选项直接指定项目名称和模板，省去了填写项目名称、选择框架和变体等环节。Vite提供了许多模板预设，可以创建Vite+React+TS、Vite+Vue、Vite+Svelte等类型的项目。通过附加的命令行选项直接指定项目名称和模板的基本语法格式如下。#使用npm6或更低版本创建项目npmcreatevite@latest<项目名称>--template<模板名称>#使用npm7或更高版本创建项目npmcreatevite@latest<项目名称>----template<模板名称>#使用yarncreate命令创建项目yarncreatevite<项目名称>--template<模板名称>1.4.2

创建Vue3项目2.通过模板自动创建项目的命令打开命令提示符，切换到D:\vue\chapter01目录，使用yarn创建一个基于Vite+Vue模板且项目名称为hello-vite的项目。yarncreatevitehello-vite--templatevue1.4.2

创建Vue3项目STEP01执行上述命令后，hello-vite项目创建完成的效果如下图所示。1.4.2

创建Vue3项目在项目创建完成后，给出了一些提示命令，需要执行这些命令才能完成项目启动，具体命令如下。cdhello-vite #切换到项目目录yarn #安装项目的全部依赖yarndev #启动服务1.4.2

创建Vue3项目项目启动后，会默认开启一个本地服务，具体如下。VITEv4.1.4readyin441ms➜Local::5173/在浏览器中打开:5173/，页面效果与手动创建Vue3项目的页面效果相同。熟悉Vue3项目的目录结构，能够归纳常用的目录和文件的作用1.4.3 Vue3项目的目录结构

先定一个小目标！Vue3项目创建成功后，使用VSCode编辑器打开项目目录，可以看到一个默认生成的项目目录结构，如右图所示。1.4.3 Vue3项目的目录结构下面简要介绍Vue3项目的目录结构中各个目录和文件的作用，具体如下。.vscode：存放VSCode编辑器的相关配置。node_modules：存放项目的各种依赖和安装的插件。public：存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。src：源代码目录，保存开发人员编写的项目源代码。src\assets：存放可编译的静态资源文件，例如图片、样式文件等。该目录下的文件需要使用相对路径访问。1.4.3 Vue3项目的目录结构src\components：存放单文件组件，即.vue文件。src\components\HelloWorld.vue：一个名称为HelloWorld的单文件组件。src\App.vue：项目的根组件。src\main.js：项目的入口文件，用于创建Vue应用实例。src\style.css：项目的全局样式表文件。.gitignore：向Git仓库上传代码时需要忽略的文件列表。index.html：默认的主渲染页面文件，同时也是页面的入口文件。1.4.3 Vue3项目的目录结构package.json：包配置文件。README.md：项目使用说明文件。vite.config.js：存放Vite的相关配置。yarn.lock：存储每一个依赖项的安装版本，在使用yarn安装、升级、卸载依赖时，会自动更新yarn.lock文件。此外，当执行了yarnbuild命令后，在项目目录中会出现dist目录，该目录中保存的是项目构建后的文件。1.4.3 Vue3项目的目录结构了解Vue3项目的运行过程，能够说出Vue3项目的运行过程1.4.4 Vue3项目的运行过程

先定一个小目标！使用Vite构建Vue3项目后，当执行yarndev命令启动服务时，项目就会运行起来，该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。1.4.4 Vue3项目的运行过程1.4.4 Vue3项目的运行过程010203123Vue3项目是由各种组件组成的，src\App.vue文件是项目的根组件。在根组件中可以引用其他组件，从而显示其他组件的内容。src\App.vue文件index.html文件是页面的入口文件，该文件中预留了用于被src\main.js文件中的Vue应用实例所控制的区域。index.html文件src\main.js文件是项目的入口文件，该文件创建了Vue应用实例。Vue应用实例是Vue项目工作的基础，每个Vue项目都是从创建Vue应用实例开始的。src\main.js文件本章小结本章首先介绍了前端技术的发展，接着对Vue的相关概念进行了简要介绍；然后讲解了Vue开发环境，包括VisualStudioCode编辑器、Node.js环境以及常见的包管理工具；最后分别讲解了如何使用Vite创建Vue

3项目。通过本章的学习，读者应对Vue有一个整体的认识，能够创建Vue3项目。本章小结第2章Vue.js开发基础《Vue.js前端开发实战（第2版）》学习目标/Target掌握单文件组件，能够创建并使用单文件组件掌握数据绑定，能够定义数据并将数据渲染到页面中掌握属性绑定指令，能够灵活运用v-bind指令给目标元素的属性动态绑定值掌握内容渲染指令，能够灵活运用v-text和v-html指令将字符串渲染到页面中掌握事件绑定指令，能够灵活运用v-on指令给目标元素绑定事件学习目标/Target掌握双向数据绑定指令，能够灵活运用v-model指令在表单元素上实现数据的

双向绑定掌握条件渲染指令，能够灵活运用v-if、v-show指令根据不同的条件渲染不同

的标签掌握列表渲染指令，能够灵活运用v-for指令将数组、对象等中的数据渲染到页面中掌握事件对象，能够灵活运用事件对象获取和修改DOM元素的属性学习目标/Target掌握计算属性，能够灵活运用计算属性实时监听数据的变化，当所依赖的数据

发生变化时重新计算值掌握样式绑定，能够灵活运用v-bind绑定class和style属性实现元素样式的设置熟悉事件修饰符，能够阐述常见的事件修饰符掌握侦听器，能够灵活运用侦听器监听数据的变化并进行相应的操作章节概述/Summary在搭建好Vue开发环境后，要想使用Vue开发实际项目，必须先学习Vue基础知识。只有掌握Vue框架的基础知识后，才能根据实际需求游刃有余地进行项目开发。本章将详细讲解Vue开发基础。目录/Contents2.12.22.3单文件组件数据绑定指令2.4事件对象2.5事件修饰符目录/Contents2.62.72.8计算属性侦听器样式绑定2.9阶段案例——学习计划表单文件组件2.1掌握单文件组件，能够创建并使用单文件组件2.1单文件组件

先定一个小目标！什么是单文件组件？2.1单文件组件在第1章中使用Vite创建Vue项目后，目录结构中包含一些扩展名为.vue的文件，每个.vue文件都可用来定义一个单文件组件。Vue中的单文件组件是Vue组件的文件格式。2.1单文件组件010203123模板用于搭建当前组件的DOM结构，其代码写在<template>标签中。模板样式是指通过CSS代码为当前组件设置样式，其代码写在<style>标签中。样式逻辑是指通过JavaScript代码处理组件的数据与业务，其代码写在<script>标签中。逻辑每个单文件组件由模板、样式和逻辑3个部分构成。2.1单文件组件<template><!--此处编写组件的结构--></template><script>/*此处编写组件的逻辑*/</script><style>/*此处编写组件的样式*/</style>2.1单文件组件演示如何定义一个基本的单文件组件。步骤1打开命令提示符，切换到D:\vue\chapter02目录，在该目录下执行如下命令，创建项目。步骤3步骤4步骤2步骤5演示单文件组件的使用方法yarncreatevitevue-demo--templatevue项目创建完成后，执行如下命令进入项目目录，启动项目。cdvue-demoyarnyarndev项目启动后，可以使用URL地址:5173/进行访问。2.1单文件组件演示单文件组件的使用方法步骤1步骤3步骤4步骤2步骤5使用VSCode编辑器打开D:\vue\chapter02\vue-demo目录。2.1单文件组件演示单文件组件的使用方法步骤3步骤4步骤2步骤5步骤1将src\style.css文件中的样式代码全部删除，从而避免项目创建时自带的样式代码影响本案例的实现效果。2.1单文件组件演示单文件组件的使用方法步骤3步骤4步骤2步骤5步骤1创建src\components\Demo.vue文件，该文件是Demo组件。<template><divclass="demo">Demo组件</div></template><style>.demo{font-size:22px;font-weight:bold;}</style>2.1单文件组件演示单文件组件的使用方法步骤3步骤4步骤2步骤5步骤1修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/Demo.vue'2.1单文件组件保存上述代码后，在浏览器中访问:5173/，Demo组件的页面效果如下图所示。2.1单文件组件数据绑定2.2掌握数据绑定，能够定义数据并将数据渲染到页面中2.2.1初识数据绑定

先定一个小目标！2.2.1初识数据绑定什么是数据绑定？2.2.1初识数据绑定Vue通过数据绑定实现了数据与页面相分离，从而实现了数据驱动视图的效果。即将页面中的数据分离出来，放到组件的<script>标签中，通过程序操作数据，并且当数据改变时，页面会自动发生改变。2.2.1初识数据绑定数据绑定分为定义数据和输出数据。

由于数据和页面是分离的，在实现数据显示之前，需要先在<script>标签中定义组件所需的数据。定义数据输出数据Vue为开发者提供了Mustache语法（又称为双大括号语法），将数据输出到页面中。2.2.1初识数据绑定定义数据的语法格式如下。1.定义数据<script>exportdefault{setup(){return{

数据名:数据值,……}}}</script>2.2.1初识数据绑定为了让代码更简洁，Vue3提供了setup语法糖（SyntacticSugar），使用它可以简化上述语法，提高开发效率。使用setup语法糖来定义数据的语法格式如下。<scriptsetup>const数据名=数据值</script>2.2.1初识数据绑定Vue为开发者提供了Mustache语法（又称为双大括号语法），使用该语法时相当于在模板中放入占位符，其语法格式如下。2.输出数据{{数据名

}}当页面渲染时，模板中的{{数据名}}会被替换为实际的数据2.2.1初识数据绑定在Mustache语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型，示例代码如下。{{'HelloVue.js'}}{{number+1}}{{}}{{ok?'YES':'NO'}}{{'<div>HTML标签</div>'}}2.2.1初识数据绑定步骤1演示数据绑定的实现步骤2创建src\components\Message.vue文件。<template>{{message}}</template><scriptsetup>constmessage='不积跬步，无以至千里'</script>用于在模板中输出message2.2.1初识数据绑定演示数据绑定的实现步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/Message.vue'保存上述代码后，在浏览器中访问:5173/，数据绑定的页面效果如下图所示。2.2.1初识数据绑定2.2.1初识数据绑定多学一招：将Vue引入HTML页面中前面学习的方式是通过Vite创建一个新的项目，这个项目中不仅有Vue，而且整合了一系列辅助开发的工具。其实Vue的使用方式非常灵活，它还提供了另一种使用方式，就是将Vue引入HTML页面中。但这种方式只能使用Vue的核心功能，所以只适合开发一些简单的页面，在实际开发中一般不用这种方式。2.2.1初识数据绑定步骤1演示如何将Vue引入HTML页面中创建D:\vue\chapter02\helloworld.html文件，在该文件中通过<script>标签引入Vue。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>HelloWorld案例</title><scriptsrc="/vue@3/dist/vue.global.js"></script></head><body></body></html>步骤3步骤22.2.1初识数据绑定在页面中定义一个用于被Vue应用实例控制的DOM区域，使开发者可以将数据填充到该DOM区域中。<divid="app"><p>{{message}}</p></div>步骤1步骤3步骤2演示如何将Vue引入HTML页面中2.2.1初识数据绑定演示如何将Vue引入HTML页面中在</body>结束标签前编写代码，创建Vue应用实例。<script>constvm=Vue.createApp({setup(){return{message:'HelloWorld!'}}})vm.mount('#app')</script>步骤1步骤3步骤22.2.1初识数据绑定通过浏览器访问helloworld.html，将Vue引入HTML页面的效果如下图所示。掌握响应式数据绑定，能够定义数据并将数据渲染到页面中2.2.2响应式数据绑定

先定一个小目标！2.2.2响应式数据绑定如果想要实现页面中数据的更新，则需要进行响应式数据绑定，也就是将数据定义成响应式数据。Vue为开发者提供了如下函数用于定义响应式数据。ref()函数reactive()函数toRef()函数toRefs()函数2.2.2响应式数据绑定响应式数据=ref(数据)1.ref()函数ref()函数用于将数据转换成响应式数据，其参数为数据，返回值为转换后的响应式数据。使用ref()函数定义响应式数据的语法格式如下。响应式数据.value=新值如果需要更改响应式数据的值，可以使用如下语法格式进行修改。步骤1演示ref()函数的使用方法步骤2创建src\components\Ref.vue文件。<template>{{message}}</template><scriptsetup>import{ref}from'vue'constmessage=ref('会当凌绝顶，一览众山小')setTimeout(()=>{message.value='锲而不舍，金石可镂'},2000)</script>2.2.2响应式数据绑定演示ref()函数的使用方法步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/Ref.vue'2.2.2响应式数据绑定保存上述代码后，在浏览器中访问:5173/，初始页面效果如下图所示。2.2.2响应式数据绑定等待2秒后的页面效果如下图所示。2.2.2响应式数据绑定2.2.2响应式数据绑定2.reactive()函数reactive()函数用于创建一个响应式对象或数组，将普通的对象或数组作为参数传给该函数即可。使用reactive()函数定义响应式数据的语法格式如下。响应式对象或数组=reactive(普通的对象或数组)步骤1演示reactive()函数的使用方法步骤2创建src\components\Reactive.vue文件。<template>{{obj.message}}</template><scriptsetup>import{reactive}from'vue'constobj=reactive({message:'不畏浮云遮望眼，自缘身在最高层'})setTimeout(()=>{obj.message='欲穷千里目，更上一层楼'},2000)</script>2.2.2响应式数据绑定步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/Reactive.vue'2.2.2响应式数据绑定演示reactive()函数的使用方法保存上述代码后，在浏览器中访问:5173/，初始页面效果如下图所示。2.2.2响应式数据绑定等待2秒后的页面效果如下图所示。2.2.2响应式数据绑定2.2.2响应式数据绑定3.toRef()函数toRef()函数用于将响应式对象中的单个属性转换为响应式数据。使用toRef()函数定义响应式数据的语法格式如下。响应式数据=toRef(响应式对象,'属性名')toRef()函数的第1个参数是响应式对象，第2个参数是待转换的属性名，返回值为转换后的响应式数据。步骤1演示toRef()函数的使用方法步骤2创建src\components\ToRef.vue文件。<template><div>message的值：{{message}}</div><div>obj.message的值：{{obj.message}}</div></template><scriptsetup>import{reactive,toRef}from'vue'constobj=reactive({message:'黑发不知勤学早，白首方悔读书迟'})constmessage=toRef(obj,'message')setTimeout(()=>{message.value='少壮不努力，老大徒伤悲'},2000)</script>2.2.2响应式数据绑定步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/ToRef.vue'2.2.2响应式数据绑定演示toRef()函数的使用方法保存上述代码后，在浏览器中访问:5173/，初始页面效果如下图所示。2.2.2响应式数据绑定等待2秒后的页面效果如下图所示。2.2.2响应式数据绑定2.2.2响应式数据绑定4.toRefs()函数toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。使用toRefs()函数定义响应式数据的语法格式如下。所有属性组成的对象=toRefs(响应式对象)步骤1演示toRefs()函数的使用方法步骤2创建src\components\ToRefs.vue文件。<template><div>message的值：{{message}}</div><div>obj.message的值：{{obj.message}}</div></template><scriptsetup>import{reactive,toRefs}from'vue'constobj=reactive({message:'盛年不重来，一日难再晨'})let{message}=toRefs(obj)setTimeout(()=>{message.value='及时当勉励，岁月不待人'},2000)</script>2.2.2响应式数据绑定步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/ToRefs.vue'2.2.2响应式数据绑定演示toRefs()函数的使用方法保存上述代码后，在浏览器中访问:5173/，初始页面效果如下图所示。2.2.2响应式数据绑定等待2秒后的页面效果如下图所示。2.2.2响应式数据绑定指令2.3掌握内容渲染指令，能够灵活运用v-text和v-html指令将字符串渲染到页面中2.3.1内容渲染指令

先定一个小目标！内容渲染指令用于渲染DOM元素的内容。常见的内容渲染指令如下。v-textv-html2.3.1内容渲染指令<标签名v-text="数据名"></标签名>1.v-textv-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对其进行解析。v-text的语法格式如下。2.3.1内容渲染指令步骤1演示v-text的使用方法步骤2创建src\components\VText.vue文件。<template><divv-text="message"></div></template><scriptsetup>constmessage='<span>咬定青山不放松，立根原在破岩中</span>'</script>2.3.1内容渲染指令步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/VText.vue'2.3.1内容渲染指令演示v-text的使用方法保存上述代码后，在浏览器中访问:5173/，v-text的运行结果如下图所示。2.3.1内容渲染指令<标签名v-html="数据名"></标签名>2.v-html在使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，则可以使用v-html。v-html用于渲染DOM元素的HTML内容，其用法与v-text相似。v-html的语法格式如下。2.3.1内容渲染指令步骤1演示v-html的使用方法步骤2创建src\components\VHtml.vue文件。<template><divv-html="html"></div></template><scriptsetup>consthtml='<strong>千磨万击还坚劲，任尔东西南北风</strong>'</script>2.3.1内容渲染指令步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/VHtml.vue'2.3.1内容渲染指令演示v-html的使用方法保存上述代码后，在浏览器中访问:5173/，v-html的运行结果如下图所示。2.3.1内容渲染指令掌握属性绑定指令，能够灵活运用v-bind指令给目标元素的属性动态绑定值2.3.2

属性绑定指令

先定一个小目标！<标签名v-bind:属性名="数据名"></标签名>在Vue开发中，有时需要绑定DOM元素的属性，从而更好地控制属性的值，此时可以使用属性绑定指令v-bind来实现。v-bind的语法格式如下。2.3.2

属性绑定指令<div:id="'list'+index"></div>v-bind还支持将属性与字符串拼接表达式绑定，示例代码如下。步骤1演示v-bind的使用方法步骤2创建src\components\VBind.vue文件。<template><p><inputtype="text"v-bind:placeholder="username"></p><p><inputtype="password":placeholder="password"></p></template><scriptsetup>constusername='请输入用户名'constpassword='请输入密码'</script>2.3.2

属性绑定指令步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/VBind.vue'2.3.2

属性绑定指令演示v-bind的使用方法保存上述代码后，在浏览器中访问:5173/，v-bind的运行结果如下图所示。2.3.2

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

先定一个小目标！<标签名v-on:事件名="事件处理器"></标签名>在Vue开发中，有时需要给DOM元素绑定事件