Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第8章 Vue组件和路由

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第8章Vue组件和基础购物车模块介绍Vue组件背景知识购物车模块实现步骤商城后台管理模块介绍01020304050607Vue路由背景知识商城后台管理模块实现步骤本章小结-掌握Vue组件基础-理解组件交互方式-掌握Vue路由基础-学习动态路由与参数传递-掌握编程式导航0102030405E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3购物车模块介绍01需求分析1.1购物车模块功能的需求如下：

1.商品展示与数量调整列出用户所选的商品，每个商品都拥有品牌和名称。用户可以点击“+”按钮增加商品数量，点击“-”按钮减少商品数量，还可以直接在输入框中输入商品数量。用户可以点击“×”按钮可以将对应商品从购物车中移除。2.计算总价与商品结算在页面底部显示当前购物车中所有商品的总价。用户可以点击“结算”按钮进行商品结算。需求分析1.1购物车模块运行截图：图8-1购物车模块购物车模块实现思路1.2购物车模块的实现思路如下：1.组件化布局使用Vue.js框架构建购物车布局。购物车可以拆分为以下组件：商品列表组件（每一行是一个单独的商品组件）、商品数量控制组件、商品删除组件、总价显示组件、结算按钮组件。2.完成标题和结算组件功能标题组件主要展示购物车标题和购物车中的商品数量。结算组件主要展示购物车中商品的总价。

3.完成列表组件删除商品功能商品每一行都有一个删除按钮。当用户点击删除按钮时，可以从购物车中移除该商品，并更新购物车的总价。使用Vue的事件绑定来捕获用户点击删除的行为，并通过事件传递删除商品ID到购物车主组件中，然后更新数据。4.完成列表组件更新商品数量每个商品都有一个数量控制组件，包括一个显示当前数量的输入框和增加/减少按钮。当用户点击增加或减少按钮时，商品的数量相应地增加或减少。当商品数量发生变化时，购物车的总价应该相应地变化。知识导图1.3本章知识导图，如图8-2所示。图8-2知识导图E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3Vue组件背景知识02组件概念和作用2.1Vue.js是一个渐进式框架，专为构建用户界面而设计。它允许开发者利用组件来构建应用。每个组件都是一个独立且可重用的Vue实例，拥有自己的状态、模板和逻辑。

任何一个页面中的元素都可以看成是一个组件，整个页面就是由多个组件构成的树状结构，如图8-3所示。

图8-3Vue组件组件概念和作用2.1组件的概念可以概括如下：（1）可重用性&组合:组件是可重用的Vue实例，这意味着可以在不同部分中多次使用相同的组件，同时每个组件实例都独立管理自己的状态和逻辑。

（2）局部或全局注册:可以注册一个全局组件，它可以在Vue应用的任何位置中使用，或者注册一个局部组件，它只能在被注册的实例或组件中使用。（3）Props和事件:父子组件间可以通过props传递数据，子组件可以使用自定义事件向父组件传递信息。（4）插槽:使用插槽能创建出更灵活的组件，它允许父组件在子组件的模板内部插入自己的标记。组件概念和作用2.1组件的作用：

（1）模块化和项目组织:组件允许开发者将大型应用分解为小部分，每个部分专注于一个单一的职责。这简化了开发过程，同时使代码更易于理解、维护和测试。

（2）代码重用和减少:通过使用组件，开发者可以重用UI和业务逻辑，这减少了代码冗余，保持了代码的DRY（不重复自己）原则。

（3）易于维护:如果需要更新或修复应用中的某个部分，只需要更新或修复相关组件。由于组件是隔离的，所以这种更新不会影响到其他部分。

（4）协作开发:因为组件是独立的，所以多个开发者可以同时开发自己的组件部分，提高了开发速度，也减少冲突的可能性。全局注册2.2在Vue.js中，"全局注册"是指在整个应用的全局级别注册组件、指令和插件。这样，这些元素就可以在应用中的任何组件里使用，无需进行单独的注册或导入。全局注册简化了开发流程，避免了重复的配置步骤。（1）Vponent(tagName,options)是Vue.js提供的一个全局API，用于创建和注册全局组件。它需要两个参数：第一个是组件的名称，第二个是组件的配置对象。（2）tagName是组件的名称，也是在HTML模板中使用该组件时自定义的标签名，它应该是一个包含小写字母和下划线的字符串，要符合W3C规则中关于自定义标签的命名要求。（3）options是一个对象，其中包含组件选项。这些选项可以包括像data,props,computed,methods,template,created、mounted等生命周期钩子，以及其他Vue组件选项。全局注册2.2下面用一个实例来了解Vue组件的全局注册，如代码清单8-1所示。代码清单8-1局部注册2.3在Vue.js中，除了全局注册组件外，还可以选择局部注册组件。局部注册的组件只能在注册它们的Vue实例（或组件）中使用。这种方法有助于优化应用的性能和减少打包体积，同时确保每个组件仅加载所需的资源。下面我们用一个实例来了解Vue组件的局部注册，如代码清单8-2代码清单8-2组件通信2.4在Vue.js中，组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要想让子组件使用父组件的数据，或者让父组件获取子组件的数据，需要使用特定的通信方式。以下是Vue.js中几种常见的组件间通信方式：

（1）父组件向子组件传值

（2）子组件向父组件传值

（3）兄弟组件之间数据交互组件通信2.4（1）父组件向子组件传值

父组件向子组件传值是通过props来实现的。这是Vue中一个非常重要的概念，因为它涉及到组件之间的通信。以下是实现父组件向子组件传值的步骤。①

定义子组件并声明props语法如下：Vponent('child-component',{//声明接收的propsprops:['myMessage'],//在子组件的模板中可以使用propstemplate:'<div>{{myMessage}}</div>'})组件通信2.4（1）父组件向子组件传值②

在父组件中使用子组件并传值。在父组件的模板中使用子组件的标签。父组件向子组件传值示例，如代码清单8-3所示。代码清单8-3组件通信2.4（2）子组件向父组件传值

在Vue.js中，子组件无法直接修改父组件的状态，因为这会让组件的数据流难以理解和维护。但是，Vue可以使用自定义事件实现子组件向父组件的传值。这是通过在子组件中触发事件，在父组件中监听事件来实现的。以下是实现的详细步骤：①

子组件中触发事件在子组件中，可以使用Vue实例的$emit方法来触发一个事件，并传递数据。这将在该组件实例上触发指定的事件，并可选地将参数传递给监听该事件的处理程序。②

父组件中监听事件在父组件中，可以在子组件标签上用v-on指令（或简写为@）来监听子组件触发的事件，并指定一个方法在事件被触发时执行。组件通信2.4（3）兄弟组件之间数据交互在Vue.js中，兄弟组件之间的数据交互通常不会直接进行，因为组件应该是解耦的，这有助于维护和代码管理。可以通过事件中心间接地实现兄弟组件之间的数据交互图8-8兄弟组件之间数据交互组件插槽2.5Vue组件插槽（Slot）是Vue.js中一种非常灵活的内容分发方式，允许用户在使用组件时自定义一些内容，并在组件内的指定位置显示这些内容。这提供了一种低耦合的方法来组合组件，使得组件更具有可重用性和可扩展性。简单来说，插槽就像是一个占位符，它在组件模板中指定了一个“插口”，用户可以在这个“插口”中填充自己的内容或模板。（1）默认插槽在子组件中，如果不为插槽指定名字，那么它就是一个默认插槽。（2）具名插槽可以给<slot>元素一个特殊的属性name，这样就可以定义多个插槽，并通过名字将特定的内容插入到模板中指定的位置。E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3购物车模块的实现步骤03实现步骤3.11.组件化布局使用Vue.js框架构建购物车布局。2.完成标题和结算组件功能标题组件：主要展示购物车标题和购物车中的商品数量。结算组件：展示购物车中商品的总价。3.完成删除列表组件中商品的功能商品每一行都有一个删除按钮。当用户点击删除按钮时，将从购物车中移除该商品，并更新购物车的总价。4.完成列表组件更新商品数量每个商品都有一个数量控制组件，包括一个显示当前数量的输入框和增加/减少数量的按钮。当用户点击增加或减少按钮时，商品的数量相应地增加或减少。当商品数量发生变化时，购物车的总价随之发生变化。E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商城后台管理模块介绍04需求分析4.1商城后台管理模块的主要功能是实现主导航功能、用户管理区域功能和路由导航跳转功能。商城注册页面功能的需求如下：

主导航添加主导航条，包含用户管理、权限管理、商品管理、订单管理、系统设置2.用户管理区域以表格方式呈现，表格的列标题为编号、姓名、年龄和操作。3.导航功能主导航条上的每个分类都可以跳转至对应的管理区域。需求分析4.1商城后台管理模块运行截图：图8-17商城后台管理模块商城后台管理模块实现思路4.21.设计HTML结构与样式HTML结构主要包含一个被Vue实例控制的<divid="app">区域。内部使用<router-view></router-view>作为路由内容的占位符。为系统设置基本的样式，例如头部、底部、左侧导航和右侧内容区域的样式。2.Vue组件定义App组件作为应用的根组件，其中包含整个系统的主要布局，如头部、尾部和主内容区域。左侧导航使用<router-link>定义导航链接，允许用户点击导航项时，通过VueRouter自动切换到对应的内容区域。3.创建各管理区域组件Users组件定义了用户管理界面，显示用户信息列表并允许点击查看详情。UserInfo组件定义了用户详细信息页面，可以根据传入的id展示对应的用户详情。Rights,Goods,Orders,Settings组件目前仅展示了标题文字。4.路由配置与Vue实例化使用VueRouter定义路由配置。主路径/映射到App组件，并默认重定向到用户管理界面。为各个管理区域定义子路由路径，如/users,/rights等。知识导图4.3本章知识导图，如图1-2所示。图8-18路由知识导图E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3Vue路由背景知识05路由基本概念5.1路由基本概念Vue路由（通常指的是VueRouter

）是Vue.js的一个插件库，它可以实现单页面应用（SPA）的路由功能。简单来说，路由是根据不同的网址来显示不同网页或网页的不同部分。在传统的网页中，这通常意味着用户访问不同URL时会跳转到不同的页面。而在单页面应用中，尽管用户看似访问了不同的“页面”，实际上他们始终停留在同一个HTML页面中，只是所展示的视图（即Vue组件）不同而已。Vue路由的核心功能包括：（1）路由配置：可以定义路径和组件之间的映射。当用户访问一个路径时，就会展示对应的组件。（2）嵌套路由：可以创建嵌套的路由，从而使一个组件内部能够包含其它视图。（3）动态路由匹配：可以创建动态路径参数，从而能够捕获多种路径，并使单个路由能够匹配多个URL。（4）命名路由和命名视图：通过为路由命名，可以更容易地进行导航，而不是依赖URL，命名视图允许在同一路径下展示多个视图。路由基本概念5.1（5）编程式的导航

除了使用模板内的<router-link>组件进行导航外，还可以在组件的逻辑内部使用路由的API进行导航（例如this.$router.push）。要使用vue-router，需要先通过npm或yarn等包管理工具将其安装到项目中，然后在Vue应用中导入和使用vue-router。路由基本使用5.2路由基本使用：首先需要安装路由，可以通过npminstallvue-router命令安装路由。创建VueRouter实例，并在其中定义了路由规则。每条路由规则映射一个路由路径到一个组件，当路径匹配时，对应的组件就会被渲染到<router-view>的位置。<router-link>是VueRouter

提供的组件，它会被渲染成<a>标签。这里定义了两个链接，分别指向“/user”和“/register”两个路由地址。定义了两个组件User和Register，每个组件都只包含一个简单的模板。<router-view>是路由的占位符，根据当前的路由，不同的组件会在这个位置被渲染。嵌套路由5.3在Vue.js中，嵌套路由可用于添加更复杂的路由结构，从而能够在一个页面中展示多个视图。比如说，一个页面有侧边栏和主区域，当路由变化时，主区域的内容可能发生变化，但侧边栏始终保持不变。动态路由5.4在Vue.js中，动态路由是指路由的某一部分是可变的，它可以匹配多个URL。这种路由对于根据唯一标识符（如ID）来显示具体内容的情况特别有用，例如展示不同的用户信息或文章内容等。这是通过在路由路径中指定一个或多个参数实现的。命名路由5.5在Vue.js中，命名路由是指给特定的路由一个名字，这样在链接到该路由或者在代码中引用它时，就可以使用这个名字而不是写出它的URL或路径。这使得代码更易于理解和维护，特别是在大型项目中，可以一目了然地知道这个路由对应着哪个页面或功能。User组件接受三个props：id，uname，和age，并在模板中显示它们。命名路由'user'，其路径是'/user/:id'。这是一个动态路径，':id'是一个动态段，会匹配任何在'/user/'之后的路径。这个路由规则定义了props，它是一个函数返回一个对象，该对象包含传递给User组件的props。

路由编程式导航5.6（1）声明式导航这种导航类型通过Vue模板的HTML部分实现，主要通过使用<router-link>组件来完成。<router-link>允许用户点击链接来改变路由，类似于传统的<a>标签在多页面网站中的作用。这是一种基于用户交互的导航方式，它不需要编写脚本代码。（2）编程式导航与声明式导航不同，编程式导航允许通过JavaScript代码来改变路由，而不仅仅是基于用户的点击交互。编程式导航应用较广，比如表单提交后重定向，按钮点击，或者在应用的特定阶段自动跳转到不同视图。在Vue组件内部，可以使用this.$router.push('/profile')来编程式地导航到新的路由。也可以使用this.$router.replace('/profile')来替换当前历史记录或this.$router.go(-1)来后退等。这提供了更灵活的控制，允许根据应用的逻辑和条件来控制导航。E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商城后台管理模块的实现步骤06主导航6.1

主导航：在页面左侧添加主导航条，包含用户管理、权限管理、商品管理、订单管理、系统设置五个导航项。下面是主导航的代码清单。用户管理区域6.2

用