Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第7章 Vue3.0基础

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第7章Vue3.0基础商品管理模块介绍背景知识商品管理模块的实现步骤本章小结01020304-了解Web框架的基本概念，掌握Vue的核心概念及其主要功能-学习MVVM架构模式及其在Vue中的作用-掌握Vue项目创建的流程，熟悉用VueCLI脚手架快速搭建Vue项目-学习Vue基础知识，掌握Vue的常用指令、计算属性、侦听属性等核

心概念01020304E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商品管理模块介绍01需求分析1.1商品管理功能的需求如下：

商品列表展示界面显示所有商品信息，包括编号、名称、价格、数量。商品信息后面显示“修改”和“删除”两个操作链接。2.添加商品用户能够输入新的商品编号、名称和价格。单击提交按钮可以将新添加的商品信息添加到商品列表中。3.修改商品信息用户能够修改商品的名称和价格，但不允许修改商品编号。4.删除商品用户能够删除商品。5.统计商品总量和总价能够实时统计并显示所有商品的总数量。能够根据商品的数量和价格，计算并显示出商品的总价。需求分析1.1商品管理页面运行截图：图7-1商品管理页面商品管理页面实现思路1.2商品管理模块的实现思路如下：1.创建Vue项目学习关于Web框架的基本概念，了解MVVM模式，然后使用开发工具创建Vue项目。2.学习Vue的指令和计算属性学习Vue的各种指令和计算属性等知识，了解指令和计算属性在开发中的应用。3.商品管理模块的开发在开发商品管理模块时，可以将功能划分为一个个子任务，然后逐步完成每个子任务，每完成一个子任务均需要及时测试验证，以确保每个子任务的正确性。知识导图1.3本章知识导图，如图7-2所示。图7-2知识导图E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3背景知识02Web框架的概念和机制2.1Web框架（Webframework）是一种用于构建Web应用程序的软件工具，它提供了一组预定义的工具、库、规则和约定，以简化Web应用程序的开发过程。框架的主要目标是帮助开发人员更快速、更有效地创建稳健、可维护和可扩展的Web应用程序。以下是Web框架的概念和机制：（1）抽象化和模板化

（2）路由和URL映射（3）数据库集成

（4）中间件（5）响应生成和渲染

（6）安全性（7）会话管理

（8）扩展性和可定制性（9）文档和社区支持选择框架通常取决于项目的需求、开发团队的技能和语言偏好。通过使用Web框架，开发人员可以更容易地构建功能强大的Web应用程序，同时避免了重复性工作。Vue3.0概念2.2Vue.js3.0是Vue.js前端JavaScript框架的最新主要版本，于2020年7月正式发布。它引入了许多重要的改进和新功能，旨在提升性能、增强可维护性，以及提升开发者体验。以下是Vue.js3.0的一些重要概念：（1）CompositionAPI（组合式API）

（2）响应性（3）Teleport（4）Fragments（5）全新的编译器

（6）TypeScript支持（7）更小的体积

（8）自定义渲染器Vue3.0官网2.2以下是Vue的官网地址，读者可以登录查看Vue的相关资料。/图7-3Vue3.0官网MVVM模式2.3MVVM（Model-View-ViewModel）是一种用于设计和组织前端应用程序的架构模式。它主要用于构建交互式和响应式的用户界面（UI）。MVVM模式将应用程序分为三个主要组件：（1）Model（模型）（2）View（视图）（3）ViewModel（视图模型）图7-4MVVM模型MVVM模式的关键概念和工作流程2.3（1）数据绑定：MVVM使用数据绑定来同步视图和模型之间的数据。当模型数据发生变化时，视图会自动更新，反之亦然。（2）命令绑定：

视图模型支持将用户交互（如点击按钮）绑定到模型中对应的方法上，从而使用户操作可以直接触发模型逻辑。（3）解耦：MVVM的设计目标之一是解耦UI逻辑和业务逻辑。这意味着开发人员可以更容易地维护和测试应用程序的不同部分。MVVM模式广泛用于前端开发框架，特别是在基于数据驱动的框架中，Vue.js框架提供了内置的MVVM支持，使开发人员能够更轻松地创建出复杂的前端应用程序，并保持代码的可维护性和可扩展性。Vue入门案例2.3先使用VSCode开发工具来快速开发一个Vue的入门案例。可以在Vue.js的官网上直接下载vue.js,并在.html文件中通过<script>标签引用。代码清单7-1hellovue.html创建Vue项目的实现步骤2.4VueCLI（VueCommandLineInterface）是一个由Vue.js官方提供的命令行工具，用于帮助开发者创建、配置和管理Vue.js项目。它是一个强大的工具，简化了Vue.js项目的开发过程，提供了一系列命令和功能，包括项目生成、开发服务器、构建生产版本、插件管理等。1.安装VueCLI首先，确保已经安装了Node.js和npm（Node.js的包管理工具）VueCLI需要在Node.js环境下运行。图7-5安装node.js创建Vue项目的实现步骤2.42.查看node.js版本打开终端（命令行界面）并运行以下命令检查node.js安装情况。图7-6查看node.js版本创建Vue项目的实现步骤2.43.配置淘宝镜像在默认情况下，npm会使用官方的npm仓库（registry）来下载包。但是，在一些情况下，访问官方npm仓库可能会受到网络限制或速度较慢的问题。为了解决这些问题，可以将npm的registry配置为其它可用的镜像源，例如淘宝镜像。找到目录C:\ProgramFiles\nodejs\node_modules\npm，然后在npmrc中添加registry=，将npm的registry配置为淘宝的npm镜像源。淘宝镜像是一个国内的npm镜像，通常在中国大陆地区使用，用以提高npm包的下载速度和可用性。淘宝镜像缓存了npm仓库中的包，使得下载npm包的速度更快。图7-7

配置npm仓库创建Vue项目的实现步骤2.44.安装VueCLI打开终端（命令行界面）并运行以下命令来全局安装VueCLI：npminstall-g@vue/cli这会将VueCLI安装到全局环境中，以便可以在任何地方使用它。图7-8安装VueCLI创建Vue项目的实现步骤2.45.创建Vue项目VueCLI安装完成，就可以使用它来创建新的Vue项目。在终端中执行以下命令：vuecreate项目名称为了操作方便，可以使用VSCode工具来创建Vue项目，打开一个新的终端NewTerminal.图7-9创建Vue项目创建Vue项目的实现步骤2.4例如，要创建一个名为"myproject"的项目，可以在终端中运行：vuecreatemyproject需要选择Vue3.0项目.图7-10选择Vue3.0创建Vue项目的实现步骤2.4打开项目所在目录图7-11打开项目创建Vue项目的实现步骤2.4创建的myproject项目如下。图7-12myproject项目创建Vue项目的实现步骤2.46.运行Vue项目npmrunserve，此时会启动一个本地开发服务器，并在终端提供一个地址（通常是http://localhost:8080/）以查看Vue应用程序。图7-13运行项目图7-14Vue项目运行界面E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商品管理模块的实现步骤03插值表达式3.1在Vue.js中，插值表达式用于将数据绑定到模板中，以便在模板中显示数据的值。Vue.js使用双大括号{{}}来表示插值表达式。代码清单7-2demo1.html插值表达式3.1运行结果：插值表达式{{message}}将显示"HelloVue!"，并将其渲染到页面中的对应位置。插值表达式{{number+1}}将显示number属性的值加1，即100+1，最终渲染为101虽然Vue.js的插值表达式非常强大，但在一些情况下，我们需要使用指令（如v-on、v-bind、v-model等）来处理更复杂的数据绑定和交互，插值表达式通常用于显示简单的文本内容。图7-15插值表达式运行结果v-on指令3.2v-on指令是Vue.js中的一个指令，用于在HTML元素上添加事件监听器，以便在特定事件发生时执行指定的JavaScript代码。它允许将Vue实例中的方法与DOM元素的事件进行绑定，从而实现交互性和动态行为。通过v-on，可以监听和响应用户的交互操作，例如鼠标点击、鼠标悬停、键盘输入等。这使得开发者可以创建响应式的用户界面，根据用户的行为来更新数据和视图.代码清单7-3demo2.htmlv-on指令3.2运行结果：初始时页面上文本显示"helloworld"，如图7-18所示。当用户点击按钮时，页面上的文本将变为"这是使用vue绑定的点击事件"，如图7-16所示，这是通过Vue.js的事件监听和数据绑定来实现的。图7-16v-on指令运行结果v-bind指令3.3v-bind指令用于在HTML元素上动态绑定一个或多个属性的值。允许将Vue实例中的数据绑定到DOM元素的属性，从而使数据的变化反映在页面上。通过v-bind，可以将Vue实例中的数据与HTML元素的属性进行关联，这样当数据变化时，相关属性的值也会自动更新。这在创建动态页面、处理用户输入和在页面中显示动态内容时非常有用。代码清单7-4demo3.htmlv-bind指令3.3运行结果：使用v-bind指令将数据动态地绑定到HTML元素的属性上，以便根据数据的变化动态的改变页面元素的外观和链接，如图7-17所示。图7-17v-bind指令运行结果v-model指令3.4v-model指令是Vue.js中用于实现双向数据绑定的指令。它将表单元素（如输入框、复选框、单选按钮等）的值与Vue实例中的数据属性进行双向绑定，这意味着当表单元素的值发生变化时，Vue实例中的数据也会相应地变化，反之亦然，这使得在表单输入和Vue数据同步变得非常容易。代码清单7-5demo4.htmlv-model指令3.4运行结果：由于输入框与user对象属性的双向绑定，因此在点击按钮后，输入框的值将更新为相应的值，即用户名输入框的值变为"tom"，密码输入框的值变为"456"。图7-18v-model指令运行结果v-for指令3.5v-for是Vue.js中用于循环渲染元素的指令，通常用于操作数组或对象，允许在模板中迭代数据并生成对应的HTML元素。（1）操作数组代码清单7-6demo5.html运行结果：最终的渲染结果是一个包含四个列表项的无序列表（<ul>），每个列表项中都显示了数组元素的值和索引，如图7-19所示。

图7-19v-for指令操作数组运行结果运行结果：最终的渲染结果是一个包含四个列表项的无序列表（<ul>），每个列表项中都显示了数组元素的值和索引，如图7-23所示。图7-23v-for指令操作数组运行结果v-for指令3.5（2）操作对象代码清单7-7demo6.html运行结果：在这个示例中，product对象包含了三个属性：id、name和price，所以页面上会显示三个列表项，如图7-20所示。

图7-20v-for指令操作对象运行结果v-for指令3.5（3）操作对象数组使用v-for指令遍历了名为products的对象数组。v-for的语法是(p,index)inproducts，它为数组中的每个对象元素创建一个<tr>行，然后在每个<tr>中显示对象的属性。在表格中的每个<tr>行中，使用{{index+1}}显示序号，使用{{p.id}}、{{}}和{{p.price}}显示对象的属性。运行结果：在这个示例中，products数组包含了两个产品对象，表格中会显示两行数据，每行包含序号、编号、名称和价格，如图7-21所示。图7-21v-for指令操作对象数组运行结果计算属性3.6在Vue.js中，计算属性（ComputedProperties）是一种用于声明基于已有数据计算的属性的方式，会根据依赖的数据自动更新。计算属性的值会被缓存，只有在依赖的数据发生变化时才会重新计算。这有助于优化性能，避免不必要的计算，如代码清单7-9demo8.html所示。计算属性3.6运行结果：在模板中直接引用了price和discountedPrice，Vue会自动计算这两个属性的值，无需手动更新，如图7-22所示。计算属性在以下情况下非常有用：（1）当需要根据其他数据属性计算出一个新的值时，而这个计算过程可能会依赖于多个数据属性。（2）当希望对计算出的值进行缓存，以避免不必要的重复计算，特别是在复杂的计算场景下，可以提高性能。（3）当希望将计算的值当作普通属性在模板中使用，而不必在模板中调用函数时。图7-22计算属性运行结果侦听属性3.7在Vue.js中，可以使用侦听器（Watchers）来监听数据属性的变化并执行相应的操作。侦听器允许在数据变化时执行异步或开销较大的操作，以响应数据的变化。要定义一个侦听器，可以在Vue实例的watch选项中添加一个属性，该属性的名称对应要监听的数据属性，其值是一个函数，用于定义在数据变化时要执行的操作。代码清单7-10demo9.html侦听属性3.7运行结果：点击按钮之前，如图7-27所示：点击“点我”按钮后，counter数据属性的值发生变化，会触发vm.$watch中的函数，弹出一个包含计数器值变化信息的警告框，如图7-23和7-24所示。最终效果，如图7-25所示.图7-23监听属性运行前图7-24

计数器值变化信息的警告框图7-25

监听属性运行结果商品管理模块的实现步骤3.8在软件开发过程中，合理的功能规划和开发顺序至关重要。为了提高开发效率和确保功能按照预期的方式推进，我们使用以下步骤完成商品管理模块功能的开发。1.商品列表展示首先要实现商品列表的展示功能，确保列表显示正确，并在列表页面提供商品的修改、删除功能。代码清单7-11demo10.html图7-26

商品列表展示实现具体步骤3.82.添加商品添加商品功能是核心功能，用户能够轻松地添加新商品。代码清单7-12demo11.html图7-27添加商品前图7-28

添加商品后实现具体步骤3.83.修改商品信息允许用户修改商品信息是增强交互性的重要环节。可以确保用户能够更新商品的属性，例如名称、价格等。代码清单7-13demo12.html图7-29

修改商品前图7-30

修改商品后实现具体步骤3.84.删除商品允许用户删除商品，确保数据的完整性和用户界面的友好性。在以上修改商品信息代码的基础上添加删除商品的代码。代码清单7-14demo13.html<td><ahref=""@click.prevent="deleteProduct(item.id)">删除</a></td>…省略重复代码………//删除

deleteProduct:function(id){

//id所对应索引下标

varindex=ducts.findIndex(function(item){

returnitem.id==id;