Vue.js 超詳細(xì)入門(mén)與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件全套 李永亮 第01-19章 前端框架發(fā)展-個(gè)人中心頁(yè)開(kāi)發(fā)

課件V1.0第1章前端框架發(fā)展教學(xué)內(nèi)容第一節(jié)

什么是前端技術(shù)第二節(jié)為什么要學(xué)習(xí)前端技術(shù)第三節(jié)如何學(xué)好前端技術(shù)第四節(jié)前后端分離概念第五節(jié)單面應(yīng)用不足和優(yōu)化知識(shí)目標(biāo)教學(xué)目標(biāo)理解前端技術(shù)的發(fā)展和學(xué)習(xí)目的掌握學(xué)習(xí)前端技術(shù)的方法理解前后端分離的概念和優(yōu)化方式知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用1C01-01什么是前端技術(shù)1、Web技術(shù)1.0時(shí)代

2、Web技術(shù)2.0時(shí)代C01-02為什么要學(xué)習(xí)前端技術(shù)1、代表Web開(kāi)發(fā)方向2、崗位需求缺口大C01-03如何學(xué)好前端技術(shù)1、打牢理論根基2、掌握前沿技術(shù)3、結(jié)合案例實(shí)戰(zhàn)知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用1C01-04前后端分離概念1、誕生背景

2、誕生原因3、解決方案4、重點(diǎn)說(shuō)明C01-05單面應(yīng)用不足和優(yōu)化1、單頁(yè)應(yīng)用不足2、中間層的使用3、應(yīng)用結(jié)構(gòu)優(yōu)化

在90年代中后期，用戶通過(guò)網(wǎng)絡(luò)瀏覽圖片和文字，不能跟服務(wù)器進(jìn)行數(shù)據(jù)交互。這種頁(yè)面稱之為“靜態(tài)頁(yè)”。Web技術(shù)1.0時(shí)代

Web技術(shù)2.0中，用戶不僅可以瀏覽數(shù)據(jù)信息，還能直接參與信息的制作，是由“靜態(tài)頁(yè)”向“動(dòng)態(tài)頁(yè)”的轉(zhuǎn)變。這對(duì)于頁(yè)面開(kāi)發(fā)者來(lái)說(shuō)，也提出了更高的要求，需要學(xué)習(xí)更多的技術(shù)才能勝任這項(xiàng)工作，而這些專門(mén)用于頁(yè)面開(kāi)發(fā)的技術(shù)稱之為前端技術(shù)。Web技術(shù)2.0時(shí)代

HTML5是前端技術(shù)的核心，它代表了Web開(kāi)發(fā)的方向，無(wú)論是基于移動(dòng)端的應(yīng)用，還是駐足在PC端的頁(yè)面，都是基于該技術(shù)打造的框架和平臺(tái)。代表Web開(kāi)發(fā)方向

在互聯(lián)網(wǎng)行業(yè)中，對(duì)前端開(kāi)發(fā)技術(shù)人才的崗位需求一直都是與日俱增，同時(shí)，前端技術(shù)開(kāi)發(fā)，相比其他技術(shù)而言，也是較容易進(jìn)入互聯(lián)網(wǎng)行業(yè)的崗位。前端技術(shù)所學(xué)內(nèi)容多而雜，技術(shù)更新非?？?。前端所學(xué)習(xí)的內(nèi)容下圖所示。崗位需求缺口大

HTML5是標(biāo)記語(yǔ)言最新的版本。是前端開(kāi)發(fā)核心。打牢理論根基

JavaScript是一種編程語(yǔ)言，是前端語(yǔ)言核心。

CSS3是樣式表的一個(gè)更新版本。是前端樣式表。

理論根基是指前端技術(shù)需要開(kāi)發(fā)語(yǔ)言的支撐，理論就是指語(yǔ)言的語(yǔ)法。前端的開(kāi)發(fā)必須打牢以下三種語(yǔ)言的根基。框架開(kāi)發(fā)前端項(xiàng)目

主流的包括Vue.js、Angular.js、React.js，Vue.js又是前端開(kāi)發(fā)人員必須要掌握的重點(diǎn)框架。掌握前沿技術(shù)ES6成為主流開(kāi)發(fā)語(yǔ)言

目前主流的框架為了更加發(fā)揮JavaScript的功能，都使用ES6作為開(kāi)發(fā)語(yǔ)言

Node開(kāi)發(fā)日漸重要

是一個(gè)可以在瀏覽器中運(yùn)行JavaScript代碼的工具，基于JavaScript的語(yǔ)法，又可以通過(guò)依賴的工具庫(kù)，開(kāi)發(fā)許多服務(wù)端語(yǔ)言才能實(shí)現(xiàn)的功能。

所謂的前沿技術(shù)，它是一種動(dòng)態(tài)的技術(shù)體系，就是當(dāng)下名企與行業(yè)內(nèi)使用和關(guān)注的前端技術(shù)。前沿技術(shù)是動(dòng)態(tài)的，變化的，要時(shí)刻關(guān)注和注意行業(yè)內(nèi)的技術(shù)動(dòng)態(tài)，從目前前端技術(shù)技術(shù)的發(fā)展來(lái)看，必須掌握的前沿技術(shù)包含下面幾方向：結(jié)合案例實(shí)戰(zhàn)

實(shí)戰(zhàn)運(yùn)用注重一個(gè)“精”字，要有選擇性的做一些案例具體來(lái)說(shuō)，做案例應(yīng)從以下幾個(gè)方向考慮：多做功能單一不重復(fù)的應(yīng)用多做流行新穎的企業(yè)級(jí)應(yīng)用多總結(jié)安全開(kāi)發(fā)心得

互聯(lián)網(wǎng)早期，頁(yè)面展示的內(nèi)容全部由后端進(jìn)行控制，一切以后端為中心。具體流程如下圖所示。誕生背景瀏覽器渲染服務(wù)端頁(yè)面數(shù)據(jù)庫(kù)

由于服務(wù)端無(wú)法像控制頁(yè)面一樣，控制移動(dòng)端的應(yīng)用布局和數(shù)據(jù)顯示，因此，服務(wù)端需要專門(mén)針對(duì)移動(dòng)端提供相應(yīng)的數(shù)據(jù)接口，具體流程如下圖所示。誕生原因移動(dòng)端應(yīng)用服務(wù)端接口數(shù)據(jù)庫(kù)服務(wù)端

由于移動(dòng)互聯(lián)網(wǎng)的誕生，之前的方式既不利于項(xiàng)目推進(jìn)的效率，也不利于代碼的后續(xù)維護(hù)，之后改變?yōu)椋?wù)端僅保留一套數(shù)據(jù)接口，頁(yè)面、移動(dòng)端和其他終端應(yīng)用全部歸納為內(nèi)容輸出端，頁(yè)面內(nèi)容、邏輯和數(shù)據(jù)均由前端負(fù)責(zé)處理，具體流程如下圖所示。解決方案前端瀏覽器渲染移動(dòng)端應(yīng)用單面應(yīng)用

服務(wù)端靜態(tài)頁(yè)面文件服務(wù)端接口數(shù)據(jù)庫(kù)

在上圖中，服務(wù)端只提供了一套接口，所有的內(nèi)容輸出應(yīng)用，包括單面應(yīng)用和移動(dòng)端應(yīng)用。因此，對(duì)于服務(wù)端開(kāi)發(fā)人員來(lái)說(shuō)，有助于提升項(xiàng)目開(kāi)發(fā)的速度，有利于提高代碼的后期維護(hù)，從而提升開(kāi)發(fā)效率。重點(diǎn)說(shuō)明單頁(yè)應(yīng)用不足

前后端分離后的前端單頁(yè)應(yīng)用，由于框架結(jié)構(gòu)和分離的原因，存在下面幾個(gè)問(wèn)題：首屏加載時(shí)間過(guò)長(zhǎng)處理嵌套請(qǐng)求效果不好需要后端介入邏輯層處理

只將應(yīng)用的開(kāi)發(fā)從結(jié)構(gòu)上分為前端和服務(wù)端是遠(yuǎn)遠(yuǎn)不夠的，通過(guò)使用中間層是大家公認(rèn)的優(yōu)化方案。中間層的作用帶中間層的前后端分離流程中間層的使用前端瀏覽器渲染移動(dòng)端應(yīng)用單面應(yīng)用

服務(wù)端靜態(tài)頁(yè)面文件服務(wù)端接口數(shù)據(jù)庫(kù)中間層A中間層B應(yīng)用結(jié)構(gòu)優(yōu)化

優(yōu)化方案（一）中間層向頁(yè)面推送數(shù)據(jù)前端服務(wù)端接收渲染單頁(yè)應(yīng)用中間層ANode環(huán)境推送應(yīng)用結(jié)構(gòu)優(yōu)化

優(yōu)化方案（二）中間層處理嵌套請(qǐng)求前端服務(wù)端單面應(yīng)用中間層A處理請(qǐng)求后的數(shù)據(jù)Node環(huán)境數(shù)據(jù)庫(kù)應(yīng)用結(jié)構(gòu)優(yōu)化

優(yōu)化方案（三）中間件處理數(shù)據(jù)邏輯前端服務(wù)端數(shù)據(jù)庫(kù)PC端應(yīng)用H5端應(yīng)用平板端應(yīng)用H5端中間層PC端中間層平板中間層層注意事項(xiàng)前后端分離是目前Web項(xiàng)目開(kāi)發(fā)的主流結(jié)構(gòu)，結(jié)構(gòu)的分離并不等于性能的優(yōu)化，分離的目的是使用項(xiàng)目的流程和結(jié)構(gòu)更加科學(xué)和高效，因此，只有在分離后，優(yōu)化它的業(yè)務(wù)流程，如添加中間層，才是真正實(shí)踐前后端分離的意圖，同時(shí)，中間層的處理是動(dòng)態(tài)和多樣的，可以多種方式交織在一起，并不拘泥于上述三種使用的方式。應(yīng)用結(jié)構(gòu)優(yōu)化第2章Vue腳手架功能課件V1.0

教學(xué)內(nèi)容第一節(jié)

腳手架核心功能第二節(jié)安裝腳手架過(guò)程第三節(jié)使用腳手架創(chuàng)建項(xiàng)目知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握最新版本VueCLI的功能掌握VueCLI的安裝方式和常用指令掌握VueCLI編譯和發(fā)布的方式知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用2C02-01腳手架核心功能

C02-02安裝腳手架過(guò)程1、安裝VueCLI2、常用VueCLI指令C02-03使用腳手架創(chuàng)建項(xiàng)目1、創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目2、修改組件代碼3、項(xiàng)目發(fā)布“腳手架”是指幫助搭建工程的工具的通俗說(shuō)法，Vue框架對(duì)應(yīng)的工具就是VueCLI。

VueCLI是一個(gè)基于Vue.js快速開(kāi)發(fā)的系統(tǒng)，新版的VueCLI由@vue/cli模塊實(shí)現(xiàn)交互式的項(xiàng)目開(kāi)發(fā)，通過(guò)@vue/cli-service-global模塊實(shí)現(xiàn)零配置原型開(kāi)發(fā)，運(yùn)行時(shí)依賴@vue/cli-service模塊實(shí)現(xiàn)更新、升級(jí)和擴(kuò)展功能，它包含下列幾個(gè)核心功能。CLI包CLI服務(wù)CLI插件腳手架核心功能

安裝VueCLI之前，先必須安裝最新版本的Node.js，推薦V10以上的版本，可以進(jìn)入Node.js官網(wǎng)/en/，下載相應(yīng)的安裝包文件。如圖所示。安裝VueCLI

圖中，create指令用于創(chuàng)建一個(gè)新的基于VueCLI的項(xiàng)目，add指令用于向已創(chuàng)建的項(xiàng)目中加入插件，serve指令用于在瀏覽器下以開(kāi)發(fā)者模式啟動(dòng)配置完成的項(xiàng)目，build指令則用于在瀏覽器下以生產(chǎn)模塊編譯配置完成的項(xiàng)目。常用VueCLI指令使用指令創(chuàng)建項(xiàng)目

打開(kāi)提示符窗口，在光標(biāo)閃爍處，輸入指令：vuecreateshop再按回車(chē)鍵，就會(huì)通過(guò)VueCLI工具，自動(dòng)創(chuàng)建一個(gè)名稱為shop的項(xiàng)目，如圖所示。創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目執(zhí)行項(xiàng)目

項(xiàng)目創(chuàng)建后，可以在命令提示符窗口中，輸入指令，先進(jìn)入項(xiàng)目文件夾中，再在瀏覽器中啟動(dòng)該項(xiàng)目，如圖所示。創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目分析項(xiàng)目結(jié)構(gòu)

使用VisualStudio打開(kāi)項(xiàng)目文件夾shop后，它的結(jié)構(gòu)相對(duì)于Vue2之前的版本來(lái)說(shuō)，更加簡(jiǎn)單，包含三個(gè)重要的文件夾，如圖所示。創(chuàng)建第一個(gè)簡(jiǎn)單項(xiàng)目node_modules文件夾用于保存各類依賴的包文件和模塊src文件夾用于保存項(xiàng)目中全部的組件和各類加載的文件public文件夾用于保存公共圖標(biāo)和全局文件

在項(xiàng)目中，默認(rèn)生成的代碼可以進(jìn)行任意修改，接下來(lái)通過(guò)一個(gè)簡(jiǎn)單的實(shí)例，加深對(duì)文件和代碼結(jié)構(gòu)的理解能力。效果如圖所示。修改組件代碼

創(chuàng)建項(xiàng)目的最終目標(biāo)是為了發(fā)布項(xiàng)目，即將項(xiàng)目部署到服務(wù)器上，通過(guò)外網(wǎng)訪問(wèn)這些編譯后的項(xiàng)目頁(yè)面，最終實(shí)現(xiàn)項(xiàng)目發(fā)布的功能；使用VueCLI4相比之前的版本而言，更加抽象和簡(jiǎn)潔，只要簡(jiǎn)單的兩個(gè)步驟就可以完成項(xiàng)目的發(fā)布工具。修改編譯后公共資源文件路徑使用指令完成項(xiàng)目編譯項(xiàng)目發(fā)布第3章Vue數(shù)據(jù)綁定課件V1.0

教學(xué)內(nèi)容第一節(jié)

Vue中數(shù)據(jù)綁定原理第二節(jié)單向數(shù)據(jù)綁定第三節(jié)

雙向數(shù)據(jù)綁定第四節(jié)數(shù)據(jù)綁定方法知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握Vue中數(shù)據(jù)綁定原理理解單向和雙向數(shù)據(jù)綁定工作過(guò)程和原理掌握綁定文本和指令綁定數(shù)據(jù)的方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用３C0３-01Vue中數(shù)據(jù)綁定原理1、Vue中數(shù)據(jù)鏈

2、數(shù)據(jù)綁定視圖C0３-02單向數(shù)據(jù)綁定1、MVC框架演變過(guò)程2、單向綁定C0３-03雙向數(shù)據(jù)綁定1、指令v-model2、v-model與修飾符C0３-0４

數(shù)據(jù)綁定方法1、文本插值2、JavaScript表達(dá)式和HTML插值

所謂數(shù)據(jù)鏈，它是一種數(shù)據(jù)關(guān)聯(lián)的形式，在這種形式中，有一到多個(gè)的起始數(shù)據(jù)點(diǎn)，稱之為元數(shù)據(jù)，而由這些元數(shù)據(jù)因某種關(guān)系衍生出的數(shù)據(jù)，稱之為衍生數(shù)據(jù)。元數(shù)據(jù)與衍生數(shù)據(jù)通過(guò)數(shù)據(jù)節(jié)點(diǎn)交織在一起，形成數(shù)據(jù)結(jié)構(gòu)網(wǎng)，而這種結(jié)構(gòu)網(wǎng)，我們稱之為數(shù)據(jù)鏈。

Vue中數(shù)據(jù)鏈

一般而言，一個(gè)對(duì)象是由多個(gè)key/value值對(duì)組成的無(wú)序集合，并且對(duì)象中的每個(gè)屬性值可以是任意類型的，向?qū)ο筇砑訉傩詴r(shí)，可以是字面量或構(gòu)建函數(shù)，如下代碼：varobj=newObject;//等價(jià)于obj={}="張三";//添加描述obj.say=function(){};//添加行為除上述方式之外，還可以使用Object.defineProperty方法定義新屬性或修改原有的屬性值；在設(shè)置和獲取屬性時(shí)，可以使用setter和getter方法，前者用于設(shè)置對(duì)象的屬性值，后者用于獲取對(duì)象的屬性值。數(shù)據(jù)綁定方法

嚴(yán)格來(lái)說(shuō)，MVC框架是一種設(shè)計(jì)思想。它的結(jié)構(gòu)與后端語(yǔ)言的MVC一樣，由Model、View、Controller三部分組成，它們?nèi)叩年P(guān)系如圖所示。MVC框架演變過(guò)程ViewControllerModeluseractionupdatenotifyupdate

但隨著業(yè)務(wù)邏輯越來(lái)越復(fù)雜，使得Controller層代碼量也越來(lái)越多。這時(shí)，就從Controller層抽離出ViewModel對(duì)象進(jìn)行管理和維護(hù)。ViewModel負(fù)責(zé)處理視圖和數(shù)據(jù)邏輯關(guān)系，并雙向綁定View和Model，使得ViewModel對(duì)象更象一座橋梁，用于銜接View和Model層兩端，它們的關(guān)系如圖所示。MVC框架演變過(guò)程ViewControllerModeluseractionupdatenotifyupdateData

所謂“單向”是針對(duì)“雙向”而言的，也就是一個(gè)方向。即從數(shù)據(jù)源獲取數(shù)據(jù)，到視圖層中顯示數(shù)據(jù)一個(gè)方向，在顯示時(shí)并不會(huì)改變?cè)磾?shù)據(jù)，這種單向綁定的方式常用于綁定視圖層中元素固定顯示的內(nèi)容、元素屬性中。單向綁定

在Vue中，v-model指令常用于表單的各元素中，它可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定效果。即指令中元素的值綁定于數(shù)據(jù)源，數(shù)據(jù)源變化后，元素的值也會(huì)跟隨變化。但同時(shí)，如果元素的值發(fā)生變化，綁定的數(shù)據(jù)源也會(huì)同步變化的值，實(shí)現(xiàn)雙向同步數(shù)據(jù)的效果。指令v-model

當(dāng)表單中的元素與v-model指令綁定時(shí)，還可以通過(guò)“.”語(yǔ)法的方式添加修飾符，如lazy、number和trim。lazy用于延遲元素值與屬性值更新的時(shí)機(jī)。number用于將更新的元素值轉(zhuǎn)成數(shù)字型。trim用于刪除元素值的首尾空格，使字符長(zhǎng)度就是字符的內(nèi)容。v-model與修飾符所謂的“文本插值”是指使用Mustache語(yǔ)法綁定元素中顯示的內(nèi)容，如下代碼：

<div>{{name}}</div>使用這種方式插值后，如果name值發(fā)生了改變，插值處元素的內(nèi)容也會(huì)隨之改變，也可以在這個(gè)元素上添加一個(gè)v-once指令不讓它改變，如下代碼：

<divv-once>{{name}}</div>如果想綁定元素的屬性，必須使用v-bind指令，并使用冒號(hào)“：”，指定綁定屬性的名稱，如下代碼所示：

<divv-bind:class="red">{{name}}</div>上述代碼也等價(jià)于代碼：<div:class="red">{{name}}</div>上述兩行代碼在瀏覽器中編譯后，最終都為相同的一行代碼，如下所示：

<divclass="red"data-v-160690f0="">123</div>文本插值Mustache語(yǔ)法不僅可以向元素內(nèi)容插入文本字符，同時(shí)，還可以在語(yǔ)法中插入簡(jiǎn)單的JavaScript表達(dá)式，如算術(shù)運(yùn)算、三元運(yùn)算和簡(jiǎn)單的函數(shù)調(diào)用，但只能執(zhí)行單個(gè)表達(dá)式，不能執(zhí)行語(yǔ)句。此外，通過(guò)向元素添加v-html指令，又可以向元素中插入HTML格式內(nèi)容。JavaScript表達(dá)式和HTML插值第4章元素事件綁定課件V1.0

教學(xué)內(nèi)容第一節(jié)

事件定義第二節(jié)事件綁定方式第三節(jié)事件傳參知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握Vue中定義事件方法理解Vue中事件綁定方式掌握Vue中傳參過(guò)程和參數(shù)對(duì)象知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用4C04-01事件定義

C04-02事件綁定方式1、指令v-on或@2、常見(jiàn)修飾符C04-03事件傳參1、方法參數(shù)2、事件對(duì)象參數(shù)在Vue中，當(dāng)一個(gè)元素通過(guò)使用v-on或語(yǔ)法糖@指令綁定某個(gè)事件后，則完成了事件被定義的過(guò)程，事件定義的過(guò)程，實(shí)質(zhì)是事件被元素綁定的過(guò)程。Vue中元素綁定事件的過(guò)程其實(shí)與頁(yè)面中元素使用addEventListener方法綁定事件是一致的。如下圖所示。事件定義templateASTrenderVNodeVNodeDOMaddEventListenerevent

指令v-on專門(mén)用于元素事件的綁定，添加時(shí)通過(guò)“:”冒號(hào)將指令與事件名稱隔開(kāi)，冒號(hào)右側(cè)為需要綁定的事件名稱；@是指令綁定事件的一種簡(jiǎn)寫(xiě)方式，也是一種語(yǔ)法糖寫(xiě)法。指令v-on或@

在Vue中，當(dāng)事件綁定時(shí)，允許在事件名稱后面通過(guò)點(diǎn)語(yǔ)法的形式添加一個(gè)事件修飾符，來(lái)處理DOM事件本身默認(rèn)的現(xiàn)象。

常見(jiàn)的修飾符有下面幾種，名稱和用法如下。

<!--單擊事件時(shí)阻止冒泡現(xiàn)象--><av-on:click.stop="todo"></a><!--表單提交事件時(shí)阻止頁(yè)面重載--><formv-on:submit.prevent="onSubmit"></form><!--單擊事件的元素只有是自身時(shí)才會(huì)觸發(fā)--><av-on:click.self="todo"></a><!--單擊事件時(shí)只會(huì)觸發(fā)一次--><av-on:click.once="todo"></a>常見(jiàn)修飾符

在事件方法中，可以不傳參數(shù)，或傳入一個(gè)或多個(gè)參數(shù)，方法中默認(rèn)有一個(gè)事件對(duì)象，這個(gè)對(duì)象在方法不傳入?yún)?shù)時(shí)，可以通過(guò)聲明的方式直接獲取。方法參數(shù)

在執(zhí)行事件處理方法中，有時(shí)需要傳入事件對(duì)象這個(gè)參數(shù)，一種是方法中不傳任何參數(shù)，定義聲明后直接獲取，另外一種是向方法中傳入一個(gè)特殊的變量$event，也可以獲取事件對(duì)象。在Vue中，可以使用以下三種方法解決事件冒泡現(xiàn)象。第3種是Vue中特有的寫(xiě)法，既簡(jiǎn)單，又高效，建議大家使用。第1種todo(event){event.stopPropagation();Num++;}第2種<divclass="a-child"@click="todo($event)"></div>第3種<divclass="a-child"@click.stop="todo"></div>事件對(duì)象參數(shù)第5章元素動(dòng)畫(huà)效果課件V1.0

教學(xué)內(nèi)容第一節(jié)

過(guò)渡動(dòng)畫(huà)第二節(jié)自定義動(dòng)畫(huà)第三節(jié)第三方動(dòng)畫(huà)庫(kù)第四節(jié)列表動(dòng)畫(huà)知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn)的方法和流程理解自定義動(dòng)畫(huà)的工作過(guò)程和原理掌握第三方動(dòng)畫(huà)庫(kù)和列表動(dòng)畫(huà)實(shí)現(xiàn)的方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用5C05-01過(guò)渡動(dòng)畫(huà)

C05-02自定義動(dòng)畫(huà)1、自定義動(dòng)畫(huà)2、自定義動(dòng)畫(huà)樣式C05-03第三方動(dòng)畫(huà)庫(kù)1、animate.css2、gsap動(dòng)畫(huà)庫(kù)C05-04列表動(dòng)畫(huà)1、transition-group組件基本功能2、交錯(cuò)過(guò)渡動(dòng)畫(huà)效果

在Vue中，專門(mén)提供了一個(gè)名稱為transition的內(nèi)置組件，該組件本身和它的頂層并不渲染動(dòng)畫(huà)效果，而只是將動(dòng)畫(huà)效果應(yīng)用到被組件包裹的DOM元素上，代碼如下所示。

<transition><div>動(dòng)畫(huà)元素</div></transition>

transition組件可以實(shí)現(xiàn)的動(dòng)畫(huà)包括過(guò)渡和自定義兩種，底層都是由CSS3中的樣式來(lái)完成的，在動(dòng)畫(huà)執(zhí)行時(shí)，組件自動(dòng)生成CSS3動(dòng)畫(huà)類名屬性，格式為：name-string過(guò)渡動(dòng)畫(huà)效果過(guò)渡動(dòng)畫(huà)

在Vue中，不僅可以實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果，還可以給元素添加自定義的動(dòng)畫(huà)。區(qū)別是，自定義動(dòng)畫(huà)中名稱為v-enter-from樣式類別在animationend事件被觸發(fā)時(shí)才移除；除可以自定義動(dòng)畫(huà)外，還可以自定義動(dòng)畫(huà)的樣式類別名稱。自定義動(dòng)畫(huà)效果過(guò)渡動(dòng)畫(huà)

在動(dòng)畫(huà)組件transition中，可以接收自定義類別樣式的屬性有6個(gè)，名稱分別為：enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class和leave-to-class，它們的功能與動(dòng)畫(huà)組件默認(rèn)6個(gè)類別樣式一致。自定義動(dòng)畫(huà)樣式效果過(guò)渡動(dòng)畫(huà)

animate.css是一個(gè)使用CSS樣式實(shí)現(xiàn)動(dòng)畫(huà)效果的第三方庫(kù)文件，它包含各類動(dòng)畫(huà)效果，如強(qiáng)調(diào)、切換和引導(dǎo)等，同時(shí)，它能很好地兼容各大瀏覽器，可以很方便地快速運(yùn)用到各個(gè)Web項(xiàng)目中。在使用animate.css動(dòng)畫(huà)庫(kù)之前，需要先在在項(xiàng)目文件夾下，輸入如下指令。npminstallanimate安裝成功后，在需要使用該動(dòng)畫(huà)效果的組件中導(dǎo)入該庫(kù)文件，代碼如下。import"animate.css";導(dǎo)入成功后，就可以在組件的模板元素中，使用動(dòng)畫(huà)庫(kù)的類別樣式了。animate.css效果過(guò)渡動(dòng)畫(huà)

gsap它的全稱是GreenSockAnimationPlatform，它是一個(gè)功能非常強(qiáng)大的動(dòng)畫(huà)平臺(tái)，它可以對(duì)JavaScript操作的所有內(nèi)容實(shí)現(xiàn)動(dòng)畫(huà)效果，同時(shí)，還解決了不同瀏覽器中存在的兼容性問(wèn)題，而且速度和效率都非?？?。在使用gsap平臺(tái)提供的動(dòng)畫(huà)之前，首先需要在項(xiàng)目文件夾下，通過(guò)下列指令來(lái)安裝gsap框架，指令如下所示。npminstallgsap安裝成功后，在需要使用該動(dòng)畫(huà)效果的組件中導(dǎo)入該庫(kù)文件，代碼如下。importgsapfrom'gsap';

導(dǎo)入成功后，就可以在組件的模板元素中，使用平臺(tái)框庫(kù)中的動(dòng)畫(huà)效果了。

gsap動(dòng)畫(huà)庫(kù)效果過(guò)渡動(dòng)畫(huà)

動(dòng)畫(huà)不僅可以作用于一個(gè)節(jié)點(diǎn)或一個(gè)組件上，而且還可以作用于多個(gè)節(jié)點(diǎn)和組件中。transition-group是新增的一個(gè)動(dòng)畫(huà)組件，它可以在多個(gè)元素中應(yīng)用動(dòng)畫(huà)，具有以下特征：

默認(rèn)情況下，它不會(huì)渲染組件包裹中某個(gè)元素，除非單獨(dú)指定某一個(gè)元素。過(guò)渡的模式不可使用，因?yàn)樗辉傧嗷デ袚Q元素的特有效果。元素內(nèi)部需要提供唯一的屬性key值，用于標(biāo)識(shí)動(dòng)畫(huà)作用的是哪個(gè)元素。CSS過(guò)渡樣式僅作用于包裹的內(nèi)部元素，不會(huì)應(yīng)用于動(dòng)畫(huà)組件本身。transition-group組件不僅可以在列表中實(shí)現(xiàn)基礎(chǔ)的動(dòng)畫(huà)效果，還可以在列表中實(shí)現(xiàn)交錯(cuò)過(guò)渡的效果。

transition-group組件基本功能效果過(guò)渡動(dòng)畫(huà)

通過(guò)自定義CSS樣式實(shí)現(xiàn)的動(dòng)畫(huà)效果非常有限，還面臨瀏覽器的兼容性問(wèn)題。gsap動(dòng)畫(huà)平臺(tái)則是一個(gè)非常不錯(cuò)的選擇，該平臺(tái)不僅支持簡(jiǎn)單的動(dòng)畫(huà)效果，而且還能實(shí)現(xiàn)復(fù)雜的列表動(dòng)畫(huà)?？梢葬槍?duì)所有的JavaScript操作實(shí)現(xiàn)動(dòng)畫(huà)效果，在transition-group組件中，為了監(jiān)聽(tīng)動(dòng)畫(huà)執(zhí)行的過(guò)程，提供了許多鉤子函數(shù)。

transition-group組件基本功能效果過(guò)渡動(dòng)畫(huà)第6章組件課件V1.0

教學(xué)內(nèi)容第一節(jié)

什么是組件第二節(jié)組件使用第三節(jié)組件屬性第四節(jié)組件事件知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握定義組件的方法和流程理解組件中屬性的定義和使用原理掌握組件中事件驗(yàn)證和傳參的方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用6C06-01什么是組件1、單文件組件

2、JavaScript對(duì)象C06-02組件使用1、全局注冊(cè)2、局部注冊(cè)3、組件命名格式C06-03組件屬性1、屬性定義2、屬性驗(yàn)證3、屬性值傳遞C06-04組件事件1、事件定義2、事件驗(yàn)證3、事件監(jiān)聽(tīng)和傳參 單文件組件簡(jiǎn)稱為（SFC），它是指在使用腳手架構(gòu)建項(xiàng)目時(shí)，自動(dòng)生成的一個(gè)擴(kuò)展名為.vue的單獨(dú)文件，而在這個(gè)文件中，就是一個(gè)定義好的Vue組件。<template><div>{{tip}}</div></template><script>exportdefault{name:"Base",data(){return{tip:"今天的天氣非常不錯(cuò)！"}}}</script>

單文件組件

在js文件中定義一個(gè)包含Vue特定選項(xiàng)的JavaScript對(duì)象，這也是定義了一個(gè)Vue組件。exportdefault{data(){return{tip:"今天的天氣非常不錯(cuò)！"}},template:`<div>{{tip}}</div>`}

在上述js文件的代碼中，定義的組件默認(rèn)是使用exportdefault方法導(dǎo)出自己，模板是一個(gè)內(nèi)聯(lián)的JavaScript字符串變量，Vue在執(zhí)行時(shí)會(huì)自動(dòng)編譯它，成為組件的模板部分。JavaScript對(duì)象

全局注冊(cè)組件的方式非常簡(jiǎn)單，只需要調(diào)用Vue應(yīng)用實(shí)例中的component()方法，就可以注冊(cè)一個(gè)在當(dāng)前Vue應(yīng)用實(shí)例中都可以使用的全局組件，具體實(shí)現(xiàn)步驟如下：1、先定義一個(gè)名稱為Global.vue，用于全局注冊(cè)的組件2、在main.js文件中，調(diào)用component()方法將定義的組件注冊(cè)為全局組件3、在任意一個(gè)組件，如App.vue中，直接調(diào)用注冊(cè)成功的全局組件

在第2個(gè)步驟中，調(diào)用Vue應(yīng)用實(shí)例化對(duì)象的component()方法時(shí)，需傳入兩個(gè)參數(shù)，第一個(gè)是指這個(gè)全局組件的名稱，第二個(gè)是指這個(gè)全局組件所對(duì)應(yīng)的目標(biāo)組件，通常是已定義完成的組件。component()方法可以采用鏈?zhǔn)椒绞骄帉?xiě)，注冊(cè)多個(gè)全局組件。最后，各個(gè)被注冊(cè)的全局組件之間也可以相互調(diào)用，因此，上述代碼中的三個(gè)被注冊(cè)的全局組件內(nèi)部是可以相互訪問(wèn)的。全局注冊(cè)

相比于全局注冊(cè)的組件，局部組件必須在父組件中顯式聲明，組件間的依賴關(guān)系更加清晰，對(duì)打包文件的優(yōu)化更加友好，注冊(cè)方式也更加簡(jiǎn)單，只需要以下兩個(gè)步驟。1、先定義一個(gè)名稱為L(zhǎng)ocal.vue，用于局部注冊(cè)的組件2、在任意一個(gè)組件，如App.vue中，導(dǎo)入新建的組件，并使用components選項(xiàng)，聲明導(dǎo)入的組件，完成局部組件注冊(cè)的功能

此外，局部注冊(cè)的組件只能在注冊(cè)的父組件中使用，并不能運(yùn)用到它的子組件或后代組件，即局部組件只對(duì)顯式的注冊(cè)有效，而對(duì)后代組件無(wú)效。局部組件在注冊(cè)組件時(shí)，有下列二種命名格式。1、短橫線分隔（kebab-case）ponent('custom-component-name',{/*...*/})2、首字母大寫(xiě)（PascalCase）ponent('CustomComponentName',{/*...*/})官方提倡使用首字母大寫(xiě)格式，因?yàn)樗且粋€(gè)合法的JavaScript標(biāo)識(shí)符，可以很容易地導(dǎo)入和注冊(cè)到組件中，將系統(tǒng)自帶的Vue組件和自定義元素區(qū)分開(kāi)。組件命名格式

組件屬性的定義需要使用props選項(xiàng)來(lái)完成，選項(xiàng)的值可以是一個(gè)字符型數(shù)組，也可以是一個(gè)對(duì)象的形式。除了數(shù)組形式定義屬性外，還可以使用對(duì)象的方式來(lái)定義組件的屬性。官方建議使用對(duì)象的形式去定義一個(gè)組件的屬性，因?yàn)檫@種形式定義組件屬性時(shí)，對(duì)象中的key表示屬性名稱，屬性值就是屬性名聲明類型的構(gòu)造函數(shù)；此外，這種形式定義屬性時(shí)，還可以設(shè)置該屬性是否需要驗(yàn)證。屬性定義

屬性驗(yàn)證是指在聲明組件屬性時(shí)，如果屬性不滿足聲明時(shí)定義的規(guī)則，將會(huì)在控制臺(tái)輸出相應(yīng)的錯(cuò)誤提示信息，這種驗(yàn)證功能有助于組件開(kāi)發(fā)人員查看屬性值傳入的是否符合規(guī)范，進(jìn)一步跟蹤傳入組件的數(shù)據(jù)。

屬性驗(yàn)證

組件所有屬性默認(rèn)都是可選的，除非將屬性的require選項(xiàng)設(shè)置為true，一個(gè)可選項(xiàng)的屬性默認(rèn)未傳遞的值是undefined，如果是布爾型，則默認(rèn)為false。如果想強(qiáng)化未傳遞時(shí)的默認(rèn)值，則可以在屬性中添加default選項(xiàng)來(lái)設(shè)置。如果需要修改傳入的屬性值，則可以將該屬性值保存到另外一個(gè)變量中，保存后，則可以任意操作這個(gè)保存的變量，以實(shí)現(xiàn)修改的功能。

組件的命名官方推薦使用首字母大寫(xiě)的格式，因?yàn)檫@種格式有利于提高模板的可讀性，而組件屬性的命名官方建議使用短橫線分隔的格式，因?yàn)檫@樣的格式更加貼近HTML元素書(shū)寫(xiě)的風(fēng)格。屬性值傳遞

如果需要給組件添加事件，可以使用emits選項(xiàng)進(jìn)行顯示聲明。聲明的方式有兩種，一種是數(shù)組格式，一種是對(duì)象格式。

事件名官方推薦使用駝峰語(yǔ)法（camelCase）來(lái)聲明，以便于在父組件調(diào)用時(shí)，可以使用短橫線分隔格式監(jiān)聽(tīng)組件的事件，父組件使用v-on或@來(lái)監(jiān)聽(tīng)子組件的事件，如下所示。<template><myComponent@my-clk="fn"v-on:myFocus="fn2"></myComponent></template>事件定義

與驗(yàn)證屬性相同，驗(yàn)證事件必須在組件定義時(shí)，以對(duì)象的形式來(lái)描述；在對(duì)象中，事件被賦值給一個(gè)函數(shù)，函數(shù)的參數(shù)作為執(zhí)行事件時(shí)的實(shí)參，通過(guò)驗(yàn)證傳入實(shí)參的有效性，來(lái)決定函數(shù)返回true或false，從而完成事件執(zhí)行時(shí)合法性的驗(yàn)證。事件驗(yàn)證

組件事件的監(jiān)聽(tīng)是指當(dāng)子組件聲明的事件被執(zhí)行時(shí)，調(diào)用它的父組件就捕獲取到了它的執(zhí)行動(dòng)作和事件數(shù)據(jù)，而要實(shí)現(xiàn)這種監(jiān)聽(tīng)的效果，父組件必須綁定子組件中聲明的事件，才能完成事件監(jiān)聽(tīng)的效果。

父組件可以使用@或v-on方式監(jiān)聽(tīng)子組件聲明的事件，當(dāng)事件觸發(fā)時(shí)，可以通過(guò)自定義的事件函數(shù)，獲取觸發(fā)時(shí)傳入的數(shù)據(jù)。事件監(jiān)聽(tīng)和傳參第7章組件傳參課件V1.0

教學(xué)內(nèi)容第一節(jié)

父組件向子組件傳參第二節(jié)子組件向父組件傳參第三節(jié)組件之間傳參第四節(jié)slot傳參知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握父與子組件之間相互傳參的方法掌握兩個(gè)獨(dú)立組件之間相互傳參的流程和方法理解父子間組件slot方式傳參的過(guò)程和原理知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用7C07-01父組件向子組件傳參1、父向子組件傳參說(shuō)明

2、父向子組件傳參實(shí)例C07-02子組件向父組件傳參1、子組件自定義事件傳參2、訪問(wèn)子組件對(duì)象中數(shù)據(jù)C07-03組件之間傳參1、全局事件總線2、組件之間傳參C07-04slot傳參1、作用域插槽2、動(dòng)態(tài)插槽

在Vue中，如果父組件向子組件傳遞數(shù)據(jù)，可以借助子組件的屬性（prop），攜帶父組件傳入的數(shù)據(jù)；如果子組件向父組件傳遞數(shù)據(jù)，則可以借助子組件的自定義事件（event）向父組件發(fā)送子組件的數(shù)據(jù)。。父向子組件傳參說(shuō)明如圖所示事件發(fā)送子組件屬性傳遞父組件

當(dāng)父組件在視圖中添加子組件時(shí)，通過(guò)動(dòng)態(tài)綁定的方式向自定義的“inputName”屬性傳入文本框中的動(dòng)態(tài)值，子組件的屬性接收該值后，直接顯示在該組件的視圖元素中，從而最終實(shí)現(xiàn)父組件通過(guò)子組件自定義的屬性傳入?yún)?shù)的過(guò)程。父向子組件傳參實(shí)例

父組件通過(guò)綁定子組件中自定義的事件，在觸發(fā)的事件中，獲取傳入的數(shù)據(jù)，這種方式是子組件向父組件傳參的重要方式。子組件自定義事件傳參

父組件除了綁定子組件的自定義事件獲取傳入的參數(shù)外，還可以直接訪問(wèn)通過(guò)ref屬性命名后的子組件，并獲取到子組件中的數(shù)據(jù)。訪問(wèn)子組件對(duì)象中數(shù)據(jù)全局事件總線，又簡(jiǎn)稱為“EventBus”，是用于全局范圍內(nèi)通訊的一種常用方案，它的特點(diǎn)是簡(jiǎn)單、靈活和輕量級(jí)，在中小型方案中，優(yōu)先推薦該方案；在Vue2和Vue3中，EventBus的實(shí)現(xiàn)結(jié)構(gòu)不同：1、在Vue2中，通常在項(xiàng)目中添加一個(gè)名稱為Bus.js的文件，在文件中導(dǎo)出一個(gè)新的Vue實(shí)例即可，然后在各個(gè)組件中，引入Bus.js文件，通過(guò)$emit定義傳遞的事件和參數(shù)，使用$on傳監(jiān)聽(tīng)事件，并獲取修傳入的參數(shù)。2、由于在Vue3中移除了$emit、$on這幾個(gè)事件API，因此無(wú)法像Vue2一樣導(dǎo)出一個(gè)Vue實(shí)例化對(duì)象，根據(jù)官方推薦，可以借助第三方插件mitt來(lái)實(shí)現(xiàn)。

全局事件總線

使用安裝好的第三方插件mitt，結(jié)合一個(gè)完整的實(shí)例，來(lái)演示任意組件之間如何實(shí)現(xiàn)參數(shù)傳遞的過(guò)程。

組件之間傳參

插槽分為三種，分別為匿名插槽、具名插槽和作用域插槽，與前兩種只能各自訪問(wèn)自己組件的內(nèi)容不同，作用域插槽可以在父組件中訪問(wèn)到子組件的內(nèi)容，使用非常靈活。接下來(lái)，結(jié)合一個(gè)完整的實(shí)例需求，來(lái)演示在作用域插槽中，父組件如何訪問(wèn)和過(guò)濾子組件傳入的參數(shù)。

作用域插槽

不僅父組件可以通過(guò)插槽方式訪問(wèn)并控制子組件傳入的數(shù)據(jù)，而且可以控制傳入父組件時(shí)插槽的名稱，從而使不同的插槽根據(jù)名稱的不同，使用場(chǎng)景也不同，例如在一個(gè)小區(qū)詳細(xì)頁(yè)中，可以根據(jù)小區(qū)類型，調(diào)用不同名稱的詳細(xì)頁(yè)插槽，這種插槽就是動(dòng)態(tài)插槽。接下來(lái)，結(jié)合一個(gè)完整的實(shí)例，來(lái)演示使用動(dòng)態(tài)插槽，實(shí)現(xiàn)一個(gè)tab選項(xiàng)卡的功能。

動(dòng)態(tài)插槽第8章路由課件V1.0

教學(xué)內(nèi)容第一節(jié)

路由介紹第二節(jié)路由傳參第三節(jié)

路由其他配置知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握路由基本配置的方法和過(guò)程掌握路由間傳參和接收參數(shù)的方法理解路由重定向和守衛(wèi)配置方法和過(guò)程知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用8C08-01路由介紹1、基本配置

2、路由樹(shù)配置C08-02路由傳參1、路由跳轉(zhuǎn)2、帶參數(shù)跳轉(zhuǎn)3、接收跳轉(zhuǎn)參數(shù)C08-03路由其他配置1、重定向配置2、404配置3、路由守衛(wèi)配置

在Vue3中，配置路由之前需要先安裝路由，并且安裝的版本必須是4.0以上，因此，在vue-cli中，通過(guò)下列命令來(lái)安裝路由模塊，-g表示全局安裝，@可以指定安裝模塊的版本號(hào)。npminstall-gvue-router@4.1.6

路由模塊安裝成功后，就可以配置路由，方法是先在項(xiàng)目的src文件夾下添加一個(gè)名稱為router的新文件夾，并在該文件夾中添加一個(gè)名稱為index的js文件，作為路由模塊的配置文件?；九渲?/p>

一個(gè)配置路由的文件由導(dǎo)入路由模塊、創(chuàng)建路由對(duì)象和導(dǎo)出路由對(duì)象三個(gè)部分組成，在創(chuàng)建路由對(duì)象時(shí)，需要構(gòu)建路由數(shù)組，路由數(shù)組中包括一級(jí)、二級(jí)和多級(jí)路由結(jié)構(gòu)，因此，這種結(jié)構(gòu)的路由配置，又稱為路由樹(shù)配置。一級(jí)路由結(jié)構(gòu)是指在路由地址中，只有一個(gè)路徑，則稱為一級(jí)路由。多級(jí)路由結(jié)構(gòu)

在Vue路由數(shù)組中，允許配置多級(jí)的路由對(duì)象結(jié)構(gòu)，可以是二級(jí)、三級(jí)或者更多級(jí)別，最大級(jí)別原則上沒(méi)有限制，但通常最大的是三或四級(jí)，這種路由結(jié)構(gòu)，稱之為多級(jí)路由。路由樹(shù)配置多級(jí)路由配置效果路由樹(shù)配置

除了通過(guò)a標(biāo)簽進(jìn)行路由跳轉(zhuǎn)之外，還可以使用router-link標(biāo)簽實(shí)現(xiàn)跳轉(zhuǎn)功能，它是一個(gè)全局的組件，可以直接在template中使用，無(wú)需導(dǎo)入，編譯后自動(dòng)轉(zhuǎn)成一個(gè)a標(biāo)簽，但它的功能比a標(biāo)簽更加靈活，直接在當(dāng)前頁(yè)中進(jìn)行路由跳轉(zhuǎn)，不會(huì)刷新頁(yè)面。還可以在代碼中，通過(guò)路由對(duì)象router進(jìn)行頁(yè)面之前的相互跳轉(zhuǎn)。注意：從路由模塊中導(dǎo)入的必須是useRouter方法，只有在調(diào)用這個(gè)方法之后的router對(duì)象中才可以使用push方法，push方法的本質(zhì)是向當(dāng)前的路由棧中再添加一個(gè)新的路由記錄，并根據(jù)這個(gè)記錄進(jìn)行路由切換，從而實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的功能。路由跳轉(zhuǎn)

在路由跳轉(zhuǎn)時(shí)，還可以攜帶參數(shù)進(jìn)入目標(biāo)頁(yè)，跳轉(zhuǎn)標(biāo)簽和方式不同，攜帶參數(shù)的格式也不一樣，如果是一個(gè)a標(biāo)簽攜帶參數(shù)跳轉(zhuǎn)，如下代碼所示：

<ahref="/list?gradeId=1001">一年級(jí)</a>還可以在路徑中使用配置項(xiàng)指定的格式攜帶參數(shù)，如下代碼所示：<ahref="/list/1001">一年級(jí)</a>還可以使用router-link和其他標(biāo)簽攜帶參數(shù)跳轉(zhuǎn)。

帶參數(shù)跳轉(zhuǎn)

路由攜帶參數(shù)跳轉(zhuǎn)到目標(biāo)頁(yè)面后，頁(yè)面組件可以接收到攜帶傳入的參數(shù)，接收的方式與攜帶的方式相關(guān)，如果是采用查詢字符串方式攜帶，那么可以通過(guò)路由中的query對(duì)象獲取到參數(shù)，如果是其他方式，通常都是通過(guò)路由中的params對(duì)象獲取。接收跳轉(zhuǎn)參數(shù)效果接收跳轉(zhuǎn)參數(shù)

為了避免已下線的頁(yè)面和錯(cuò)誤的地址，直接訪問(wèn)會(huì)出現(xiàn)404錯(cuò)誤異?，F(xiàn)象，通常會(huì)通過(guò)重定向配置，指向一個(gè)新的頁(yè)面地址，或者跳轉(zhuǎn)到首頁(yè)，代碼如下所示。{path:'/error',redirect:'/list',}

重定向配置通常只需要配置兩個(gè)屬性就可以，一個(gè)是path，表示原有訪問(wèn)的路徑，另一個(gè)是redirect，表示重新指定的路徑，這個(gè)屬性接收三種類型的值，第一種是字符串型，第二種是router對(duì)象型，第三種是函數(shù)型。

重定向配置

并不是所有的錯(cuò)誤訪問(wèn)地址都需要重定向，有時(shí)僅是針對(duì)原有的，已下架的頁(yè)面地址做重定向，因?yàn)檫@些地址有可能是從收藏夾中直接訪問(wèn)的。針對(duì)那些沒(méi)有重定向的地址，可以添加一個(gè)公用的404頁(yè)面，如果訪問(wèn)出錯(cuò)，就直接跳轉(zhuǎn)到該頁(yè)面，代碼如下所示。{path:'/:pathMatch(.*)*',name:'404',component:()=>import('../views/404.vue'),}

404配置

雖然可以通過(guò)路由重定向，根據(jù)用戶角色進(jìn)入不同的頁(yè)面，但有的頁(yè)面在進(jìn)入時(shí)，需要再次檢測(cè)用戶的登錄狀態(tài)，如果沒(méi)有登錄，則返回登錄頁(yè)重新再登錄，如果已經(jīng)登錄，則可以進(jìn)入下一頁(yè)，這種狀態(tài)的檢測(cè)需要配置路由守衛(wèi)。

路由守衛(wèi)的配置依賴于路由對(duì)象router在生命周期中的鉤子函數(shù)，router在整個(gè)執(zhí)行過(guò)程中有三個(gè)鉤子函數(shù)，它們的功能和執(zhí)行時(shí)機(jī)如下表8-1所示：路由守衛(wèi)配置

router鉤子函數(shù)路由守衛(wèi)配置函數(shù)名稱功能說(shuō)明執(zhí)行時(shí)機(jī)beforeEach全局前置守衛(wèi)在路由跳轉(zhuǎn)前觸發(fā)beforeResolve全局解析守衛(wèi)在導(dǎo)航被確認(rèn)之前，同時(shí)在組件內(nèi)守衛(wèi)和異步路由組件被解析之后afterEach全局后置守衛(wèi)在路由跳轉(zhuǎn)完成后觸發(fā)第9章接口課件V1.0

教學(xué)內(nèi)容第一節(jié)

接口介紹第二節(jié)全局配置第三節(jié)

數(shù)據(jù)緩存知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握axios對(duì)象安裝的方法掌握axios對(duì)象實(shí)例創(chuàng)建和配置的過(guò)程理解掌握使用axios對(duì)象請(qǐng)求數(shù)據(jù)的方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用9C09-01接口介紹1、初識(shí)和安裝Axios模塊

2、使用Axios模塊C09-02全局配置1、創(chuàng)建axios實(shí)例2、配置對(duì)象結(jié)構(gòu)3、默認(rèn)配置和響應(yīng)結(jié)構(gòu)4、全局配置axiosC09-03數(shù)據(jù)緩存1、請(qǐng)求數(shù)據(jù)2、緩存數(shù)據(jù)3、緩存優(yōu)化

Axios模塊可以用于瀏覽器和node框架中，在瀏覽器中，它創(chuàng)建XHR對(duì)象，在node中它創(chuàng)建http請(qǐng)求；它支持Promise對(duì)象中的API，可參攔截、轉(zhuǎn)換、響應(yīng)和取消請(qǐng)求，并自動(dòng)轉(zhuǎn)成JSON格式數(shù)據(jù)，也支持跨站請(qǐng)求偽造簡(jiǎn)稱“XSRF”。

在Vue3中，如果需要發(fā)送異步請(qǐng)求獲取數(shù)據(jù)，通常使用Axios模塊，使用之前必須先安裝該模塊，可以在指定項(xiàng)目的根目錄下局部安裝。初識(shí)和安裝Axios模塊

安裝axios模塊的目的是使用該模塊發(fā)送請(qǐng)求，獲取請(qǐng)求返回的數(shù)據(jù)，使用該模塊時(shí)，可以傳遞相關(guān)配置項(xiàng)來(lái)創(chuàng)建請(qǐng)求，格式有以下幾種：axios(config)上述方法中，只有一個(gè)config配置對(duì)象，請(qǐng)求時(shí)的全部配置項(xiàng)都可以通過(guò)該對(duì)象進(jìn)行配置，包括url，data，method等axios(url[,config])上述方法是一種簡(jiǎn)寫(xiě)的格式，使用這種格式時(shí)，默認(rèn)method是GET方式，通常只用于以GET方式快速請(qǐng)求數(shù)據(jù)時(shí)使用別名請(qǐng)求為了更加方便開(kāi)發(fā)者的使用，可以直接使用請(qǐng)求的別名來(lái)完成請(qǐng)求，在axios中，所有支持的請(qǐng)求方法都提供了別名使用Axios模塊雖然在Vue3項(xiàng)目中安裝了axios模塊后，就可以在任意的組件中導(dǎo)入它，并使用它請(qǐng)求數(shù)據(jù)，但考慮到代碼的復(fù)用性和后期維護(hù)的方便，通常自己會(huì)創(chuàng)建一個(gè)axios實(shí)例，并配置這個(gè)實(shí)例，用于整個(gè)項(xiàng)目中的全部數(shù)據(jù)請(qǐng)求，如下所示。//根據(jù)配置對(duì)象創(chuàng)建一個(gè)axios實(shí)例axios.create([config])上述格式代碼中，config是一個(gè)可選項(xiàng)的配置對(duì)象，如果在使用這個(gè)實(shí)例時(shí)，還有指定的配置對(duì)象，那么，指定的配置對(duì)象將會(huì)與實(shí)例的配置對(duì)象進(jìn)行合并，并按照配置的優(yōu)先級(jí)來(lái)執(zhí)行，配置對(duì)象的優(yōu)先級(jí)執(zhí)行順序如下圖所示：創(chuàng)建axios實(shí)例請(qǐng)求的config實(shí)例的defaults模塊庫(kù)的默認(rèn)值

無(wú)論是創(chuàng)建實(shí)例化對(duì)象，還是發(fā)送請(qǐng)求，配置對(duì)象都是必須要考慮的內(nèi)容，在整個(gè)axios配置對(duì)象中，url屬性是必須要填寫(xiě)的，method屬性默認(rèn)值為GET方式。

配置對(duì)象結(jié)構(gòu)

配置對(duì)象可以在發(fā)送請(qǐng)求和實(shí)例化axios對(duì)象時(shí)進(jìn)行配置，也可以通過(guò)defaults對(duì)象，設(shè)置默認(rèn)的配置值，該配置值的優(yōu)先級(jí)高于模塊庫(kù)的默認(rèn)值，將會(huì)作用于每一個(gè)請(qǐng)求，除非在請(qǐng)求時(shí)，通過(guò)config對(duì)象進(jìn)行變更。

創(chuàng)建一個(gè)axios實(shí)例后，也可以修改設(shè)置的默認(rèn)配置。

除了設(shè)置和修改默認(rèn)配置之外，發(fā)送一次請(qǐng)求后，無(wú)論成功與失敗，都將會(huì)返回響應(yīng)的數(shù)據(jù)，并通過(guò)then或catch函數(shù)來(lái)獲取。默認(rèn)配置和響應(yīng)結(jié)構(gòu)

在vue3中，可以使用app.config.globalProperties來(lái)注冊(cè)全局屬性的對(duì)象，其中app是通過(guò)createApp()方法創(chuàng)建后的Vue實(shí)例化對(duì)象，它替代了Vue2中的Vtotype方式，無(wú)論是Vue3中的組件式API還是選項(xiàng)式API，都可以輕松訪問(wèn)到它的值。

如果需要在Vue3項(xiàng)目中全局配置axios對(duì)象，只需要在main.js文件中添加如下代碼：import{createApp}from'vue'importAppfrom'./App.vue'importGlobalfrom'./components/ch6/Global'importrouterfrom'./router/index'importrequestfrom'./plugins/axios';letapp=createApp(App);app.config.globalProperties.$http=request;ponent("Global",Global);app.use(router);app.mount('#app')

全局配置axios

配置好全局性的axios實(shí)例對(duì)象后，請(qǐng)求數(shù)據(jù)就變得十分簡(jiǎn)單，只需在組件中，通過(guò)this這個(gè)對(duì)象，調(diào)用$http屬性，就可以獲取配置好的axios實(shí)例化對(duì)象，再通過(guò)這個(gè)對(duì)象發(fā)送異步請(qǐng)求，并在then函數(shù)中獲取響應(yīng)的數(shù)據(jù)，下面通過(guò)一個(gè)完整的實(shí)例來(lái)演示請(qǐng)求過(guò)程。請(qǐng)求數(shù)據(jù)

localStorage是HTML5標(biāo)準(zhǔn)中新增的一個(gè)用于數(shù)據(jù)緩存的對(duì)象，它的最大緩存體積為5M的字符內(nèi)容，它是一個(gè)永久性的瀏覽器緩存對(duì)象，除非人為刪除，否則，一直存在于瀏覽器中，即使是關(guān)閉瀏覽器后，再次打開(kāi)，緩存對(duì)象依然存在于瀏覽器中。

localStorage有三個(gè)常用的操作方法，分別用于設(shè)置、讀取和刪除指定名稱的緩存內(nèi)容。//1.設(shè)置一個(gè)key值為cacheData的localStorage對(duì)象localStorage.setItem("cacheData","tgrong");//2.獲取key值為cacheData的localStorage對(duì)象localStorage.getItem("cacheData");//3.刪除key值為cacheData的localStorage對(duì)象localStorage.removeItem("cacheData"))緩存數(shù)據(jù)效果緩存數(shù)據(jù)

雖然緩存數(shù)據(jù)有利用減輕服務(wù)端的頻繁請(qǐng)求，優(yōu)化用戶的數(shù)據(jù)請(qǐng)求體驗(yàn)，但如果一直使用緩存的數(shù)據(jù)，會(huì)使信息過(guò)于陳舊，無(wú)法滿足數(shù)據(jù)即時(shí)性的需求，為了解決這個(gè)問(wèn)題，需要對(duì)緩存做使用時(shí)間的優(yōu)化。

“緩存使用時(shí)間”是指緩存存儲(chǔ)后，在頁(yè)面中的使用時(shí)間，如果不做優(yōu)化，它是無(wú)限性的，除非人為刪除，優(yōu)化時(shí)，可以根據(jù)這個(gè)緩存的數(shù)據(jù)內(nèi)容，設(shè)置不同過(guò)期時(shí)長(zhǎng)，通常情況下，非時(shí)效性很強(qiáng)的數(shù)據(jù)，過(guò)期時(shí)長(zhǎng)為30分鐘，其它為10分鐘左右。緩存優(yōu)化效果緩存數(shù)據(jù)第10章Pinia狀態(tài)管理課件V1.0

教學(xué)內(nèi)容第一節(jié)

Pinia介紹第二節(jié)State第三節(jié)

Getters第四節(jié)Actions第五節(jié)其他擴(kuò)展插件知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握Pinia模塊安裝的方法掌握Pinia對(duì)象實(shí)例創(chuàng)建和配置的過(guò)程理解掌握Pinia各組成部分的構(gòu)建和訪問(wèn)知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用10C10-01Pinia介紹1、安裝和配置Pinia

2、創(chuàng)建StoreC10-02State1、構(gòu)建和訪問(wèn)State2、重置和變更State3、其他操作方式C10-03Getters1、構(gòu)建和訪問(wèn)Getters2、其他操作方式C10-04Actions1、構(gòu)建和執(zhí)行Actions中方法2、執(zhí)行異步請(qǐng)求C10-05其他擴(kuò)展插件1、擴(kuò)充Store2、數(shù)據(jù)持久化

與其他模塊一樣，Pinia的安裝只需要在項(xiàng)目根目錄下執(zhí)行下列指令：npminstallpinia

Pinia安裝成功后，并不能直接在組件中使用，需要對(duì)它進(jìn)行全局配置。安裝和配置Pinia

完成pinia的安裝和全局性配置后，接下來(lái)就可以構(gòu)建pinia的結(jié)構(gòu)，pinia是狀態(tài)管理工具，管理的方式是構(gòu)建一個(gè)個(gè)store對(duì)象，與vuex的分模塊管理不同，pinia中的一個(gè)store對(duì)象就是一個(gè)模塊，它與vuex的區(qū)別如圖所示。創(chuàng)建StoreVuexStoreModuleAModuleBStateMutationsActionsGettersStateMutationsActionsGettersPiniaStoreAStoreBStateActionsGettersStateActionsGetters在很多情況下，State是Store對(duì)象的最重要的組成部分，是Store對(duì)象的核心，因?yàn)殚_(kāi)發(fā)者在創(chuàng)建一個(gè)Store對(duì)象時(shí)，首先考慮的是State如何設(shè)計(jì)。在Pinia中，State是一個(gè)返回初始狀態(tài)值的函數(shù)，通過(guò)函數(shù)的形式，既可以支持客戶端，也能響應(yīng)服務(wù)端。

構(gòu)建和訪問(wèn)State

當(dāng)保存Store的實(shí)例化對(duì)象后，不僅可以訪問(wèn)和操作state對(duì)象的屬性值，還可以直接調(diào)用$retset()方法，使用state對(duì)象重新還原成初始值。

既可以通過(guò)Store的實(shí)例化對(duì)象訪問(wèn)State的屬性并變更它的值，還可以借助mapState函數(shù)將State屬性映射為只讀的計(jì)算屬性，如果調(diào)用mapWritableState函數(shù)，則State屬性映射后，還可以進(jìn)行修改。

雖然這種映射的方式可以訪問(wèn)State中的某個(gè)屬性值，但它是只讀的，不能修改這個(gè)屬性的值，如果需要修改映射的值，可以調(diào)用mapWritableState函數(shù)。重置和變更State

如果需要批量變更State中的多個(gè)屬性值，可以調(diào)用Store實(shí)例化對(duì)象中的$patch方法，它可以用對(duì)象的形式在同一時(shí)間內(nèi)，一次性更新多個(gè)屬性值。

雖然這種對(duì)象形式的更新方式，可以一次更新多個(gè)屬性值，但如果屬性值是數(shù)組，這種更新方式的性能就非常低，為了解決這個(gè)問(wèn)題，在調(diào)用$patch方法時(shí)，也允許使用一個(gè)函數(shù)的形式來(lái)實(shí)現(xiàn)多個(gè)屬性的更新。其他操作方式

Getters是針對(duì)State中的屬性再次計(jì)算，它也是Store中一個(gè)非常重要的組成部分，因?yàn)楫?dāng)進(jìn)入不同頁(yè)面時(shí)，State對(duì)象的某個(gè)初始值也需要發(fā)生相應(yīng)變化，而Getters就可以實(shí)現(xiàn)這些功能，可以根據(jù)不同的頁(yè)面定義不同的函數(shù)，并在對(duì)應(yīng)的頁(yè)面中執(zhí)行即可。

構(gòu)建和訪問(wèn)Getters

與State對(duì)象一樣，Getters對(duì)象也可以通過(guò)mapState映射成computed對(duì)象中的一個(gè)成員，當(dāng)調(diào)用時(shí)，才會(huì)重置State的屬性值。其他操作方式

Store中的Actions部分，用于定義操作屬性的方法，類似于組件中的methods部分，它與Getters都可以操作State屬性，但在定義方法時(shí)，Getters是對(duì)State屬性進(jìn)行加工處理，再返回使用，屬于內(nèi)部計(jì)算；Actions則是根據(jù)業(yè)務(wù)邏輯，操作State或Getters保存的值，方法中可以實(shí)現(xiàn)異步請(qǐng)求、調(diào)用任意的API，屬于邏輯層部分。

Actions屬于Store中的一部分，因此，可以使用defineStore方法中Actions屬性來(lái)構(gòu)建某個(gè)業(yè)務(wù)邏輯。Actions屬性構(gòu)建完成后，如果需要在其他組件中調(diào)用，通常使用mapActions，將它的操作屬性映射成組件methods中的一部分。構(gòu)建和執(zhí)行Actions中方法如果需要緩存整個(gè)Store對(duì)象中的State數(shù)據(jù)，可以使用pinia-plugin-persist插件，該插件是專門(mén)用于Pinia的擴(kuò)展插件，功能是將State數(shù)據(jù)保存至localStorage或sessionStorage中，默認(rèn)是以Store的id作為key，保存在sessionStorage對(duì)象中。在使用pinia-plugin-persist插件之前，先需要安裝該插件，在終端執(zhí)行如下代碼npmipinia-plugin-persist--S數(shù)據(jù)持久化第11章VantUI課件V1.0

教學(xué)內(nèi)容第一節(jié)

Vant

介紹第二節(jié)Vant基礎(chǔ)組件第三節(jié)

Vant表單組件第四節(jié)Vant業(yè)務(wù)組件第五節(jié)其他擴(kuò)展插件知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握

Vant

組件庫(kù)安裝和配置方法掌握

Vant

基礎(chǔ)、表單和業(yè)務(wù)類組件的使用理解和掌握

Vant

其他核類組件的使用知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用11C11-01Vant介紹1、Vant特點(diǎn)

2、Vant安裝與配置C11-02Vant基礎(chǔ)組件1、Button組件2、Image組件3、Layout組件C11-03Vant表單組件1、PasswordInput組件2、Rate組件3、Signature組件C11-04Vant業(yè)務(wù)組件1、Card組件2、Coupon優(yōu)惠券3、SubmitBar提交訂單欄

Vant是一個(gè)十分優(yōu)秀的面向移動(dòng)端應(yīng)用的UI組件庫(kù)，它體積輕量、可定制化。除了輕量和可定制化的特點(diǎn)外，Vant還有以下幾個(gè)主要的特點(diǎn)。超過(guò)70多個(gè)高質(zhì)量組件，幾乎覆蓋移動(dòng)端主流場(chǎng)景。不需要外部依賴，也不依賴第三方的npm包的安裝。提供Sketch和Axure設(shè)計(jì)資源的支持，便于開(kāi)發(fā)。支持Vue2、Vue3和微信小程序前端的主流框架。支持TypeScript編寫(xiě)代碼，并提供完整的類型定義。支持主題定制，內(nèi)置超700個(gè)主題變量，方便定制風(fēng)格。Vant特點(diǎn)

使用

Vue3

框架開(kāi)發(fā)的應(yīng)用，必須選擇Vant4組件庫(kù)進(jìn)行安裝，先在應(yīng)用的根目錄下，執(zhí)行下列終端指令。npminstallvant-S完成成功后，還需要在應(yīng)用中配置Vant組件庫(kù)，才能在應(yīng)用的各個(gè)組件中使用，只需要在main.js文件中導(dǎo)入Vant模塊和對(duì)應(yīng)的CSS文件，并將導(dǎo)入的Vant模塊掛載到Vue實(shí)例上即可。Vant安裝與配置Vant中的Button組件從外形和狀態(tài)兩個(gè)方面，對(duì)原始的Button元素進(jìn)行了封裝，使它支持5種類型的按鈕，同時(shí)，還可以自定義按鈕的圖標(biāo)、形狀、尺寸和顏色，并可以設(shè)置按鈕的點(diǎn)擊狀態(tài)和是否可用性。

Button

組件參數(shù)說(shuō)明類型默認(rèn)值type類型，可選值為primarysuccesswarningdangerstring defaultsize尺寸，可選值為largesmallministring normaltext按鈕文字string

color按鈕顏色，支持傳入linear-gradient漸變色string

icon左側(cè)圖標(biāo)名稱或圖片鏈接string

icon-prefix圖標(biāo)類名前綴string van-iconround是否為圓形按鈕boolean falsedisabled是否禁用按鈕boolean falsehairline是否使用0.5px邊框 boolean falseloading是否顯示為加載狀態(tài) boolean falseloading-text加載狀態(tài)提示文字string

Vant將原生的img元素封裝成增強(qiáng)版的image組件，并提供了多種圖片填充的模式，使圖片能按指定的方式呈現(xiàn)和縮放，同時(shí)，還支持圖片懶加載，加載中提示，加載失敗提示等。Image

組件參數(shù)說(shuō)明類型默認(rèn)值src圖片鏈接string

fit圖片填充模式，與原生的object-fit屬性一致string fillposition圖片位置，與原生的object-position屬性一致string centerradius圓角大小，默認(rèn)單位為pxnumber 0round是否顯示為圓形boolean falselazy-load是否開(kāi)啟圖片懶加載，須配合Lazyload組件使用booleanfalseshow-error是否展示圖片加載失敗提示boolean trueshow-loading是否展示圖片加載中提示boolean trueerror-icon失敗時(shí)提示的圖標(biāo)名稱或圖片鏈接 boolean photo-failloading-icon加載時(shí)提示的圖標(biāo)名稱或圖片鏈接 boolean photoicon-size加載圖標(biāo)和失敗圖標(biāo)的大小number 32

在Vant中，Layout組件用于元素的響應(yīng)式布局，分別由van-row和van-col兩個(gè)組件來(lái)實(shí)現(xiàn)，前者表示行，后者被包裹在van-row組件中，表示列，共有24列柵格組成，在van-col組件中，span屬性表示所占列的比例，offset屬性表示列的偏移量。Layout

組件van-col組件常用屬性說(shuō)明Layout

組件名稱說(shuō)明類型默認(rèn)值span列元素寬度number|string

offset列元素偏移距離number|string

tag自定義元素標(biāo)簽stringdivvan-row

組件常用屬性說(shuō)明Layout

組件名稱說(shuō)明類型默認(rèn)值gutter列元素之間的間距number|string

tag自定義元素標(biāo)簽stringdivjustify主軸對(duì)齊方式stringstartalign交叉軸對(duì)齊方式stringtopwrap是否自動(dòng)換行booleantrue

PasswordInput組件是一款帶網(wǎng)格輸入框的組件，用于輸入密碼和短信驗(yàn)證信息，通常結(jié)合數(shù)字鍵盤(pán)一起使用，常用的組件屬性說(shuō)明如下。

PasswordInput組件名稱說(shuō)明類型默認(rèn)值value密碼值string

info輸入框下方文字提示string

error-info輸入框下方錯(cuò)誤提示string

length密碼最大長(zhǎng)度number|string6gutter輸入框格子之間的間距number|string0mask是否隱藏密碼內(nèi)容booleantruefocused是否已聚焦，聚焦時(shí)會(huì)顯示光標(biāo)booleanfalse

Rate組件常用于對(duì)事物評(píng)級(jí)使用，如商品的質(zhì)量、用戶對(duì)服務(wù)的滿意度等各種評(píng)級(jí)功能實(shí)現(xiàn)，都離不開(kāi)Rate組件的使用，該組件可以自定義顯示的圖標(biāo)、數(shù)量和樣式，還能顯示半星的評(píng)分效果，當(dāng)用戶點(diǎn)擊圖標(biāo)時(shí)，可以獲取到最后的評(píng)分值。Rate組件常用的屬性如下。Rate組件名稱說(shuō)明類型默認(rèn)值v-model當(dāng)前分值number

count圖標(biāo)總數(shù)number|string5color選中時(shí)的顏色string#ee0a24void-color未選中時(shí)的顏色string#c8c9ccicon選中時(shí)的圖標(biāo)名稱或圖片鏈接stringstarallow-half是否允許半選是否允許半選falsetouchable是否可以通過(guò)滑動(dòng)手勢(shì)選擇評(píng)分是否可以通過(guò)滑動(dòng)手勢(shì)選擇評(píng)分true

Signature組件用于頁(yè)面的手寫(xiě)簽名，它的功能基于Canvas實(shí)現(xiàn)，Vant版本必須大于或等于4.3.0才能使用該組件，當(dāng)完成簽名并觸發(fā)綁定的submit事件后，在事件中，可以獲取格式為base64字符串的簽名圖片，用于保存簽名數(shù)據(jù)和顯示簽名效果。Signature組件常用的屬性如下。Signature組件名稱說(shuō)明類型默認(rèn)值type導(dǎo)出圖片類型stringpngpen-color筆觸顏色string#000line-width線條寬度number 3background-color背景顏色string

tips當(dāng)不支持Canvas時(shí)的提示信息string

clear-button-text清除按鈕文案string清空confirm-button-text確認(rèn)按鈕文案string確認(rèn)

Signature組件常用的事件如下Signature組件事件名稱說(shuō)明回調(diào)參數(shù)start開(kāi)始簽名時(shí)觸發(fā)

end結(jié)束簽名時(shí)觸發(fā)

signing簽名過(guò)程中觸發(fā)event:TouchEventsubmit點(diǎn)擊確定按鈕時(shí)觸發(fā)data:{image:string;canvas:HTMLCanvasElement}clear點(diǎn)擊取消按鈕時(shí)觸發(fā)

Card組件用于展示商品的完整信息，包括商品圖片、價(jià)格、標(biāo)簽和促銷信息，還可以顯示商品的多種標(biāo)簽，自定義商品的底部操作按鈕，常用于購(gòu)物車(chē)商品信息的展示和商品列表信息的顯示，它的常用屬性如下。Card組件名稱說(shuō)明類型默認(rèn)值thumb左側(cè)圖片string

title標(biāo)題string

desc描述string

tag圖片角標(biāo)string

num商品數(shù)量number|string

price商品價(jià)格number|string

origin-price商品劃線原價(jià)number|string商品在展示時(shí)，通常會(huì)與一些優(yōu)惠券一起顯示，針對(duì)這種需求，Vant提供了專門(mén)用于優(yōu)惠券展示的組件——Coupon，它用于優(yōu)惠券的兌換和選擇，點(diǎn)擊CouponCell組件時(shí)，以彈框形式進(jìn)入選擇，在選擇時(shí)，由CouponList組件顯示兌換優(yōu)惠券列表，當(dāng)選中某項(xiàng)列表后，再次返回CouponCell組件，顯示選中項(xiàng)，并減少結(jié)算總金額。Coupon優(yōu)惠券當(dāng)用戶選擇商品后，無(wú)論是否選擇優(yōu)惠券，最后都要提交訂單，完成支付功能，為實(shí)現(xiàn)這個(gè)需求，Vant提供了SubmitBar組件，它的功能是用于展示訂單金額并提交訂單，同時(shí)可以根據(jù)提交數(shù)據(jù)時(shí)的完整性，實(shí)現(xiàn)禁用或正在加載的按鈕狀態(tài)。SubmitBar提交訂單欄第12章項(xiàng)目開(kāi)發(fā)前準(zhǔn)備課件V1.0

教學(xué)內(nèi)容第一節(jié)

功能設(shè)計(jì)第二節(jié)項(xiàng)目開(kāi)發(fā)第三節(jié)

打包與發(fā)布知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握項(xiàng)目功能設(shè)計(jì)的方法掌握項(xiàng)目開(kāi)發(fā)的流程和配置過(guò)程理解和掌握開(kāi)發(fā)和發(fā)布打包的流程知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用12C12-01功能設(shè)計(jì)1、項(xiàng)目背景

2、需求分析3、功能模塊C12-02項(xiàng)目開(kāi)發(fā)1、創(chuàng)建項(xiàng)目2、配置靜態(tài)資源3、數(shù)據(jù)源設(shè)計(jì)C12-03打包與發(fā)布1、開(kāi)發(fā)與打包方法2、發(fā)布時(shí)注意事項(xiàng)時(shí)代背景一個(gè)好的項(xiàng)目一定會(huì)與當(dāng)前主流的價(jià)值觀相匹配，是順應(yīng)時(shí)代發(fā)展方向的。隨著在線支付和快遞體系的成熟與完善，電商產(chǎn)品已成為各個(gè)銷售型公司必不可少的項(xiàng)目。技術(shù)分析web技術(shù)通過(guò)自身的靈活性，借助Vue3+Vant4框架，既可以快速開(kāi)發(fā)PC端的web應(yīng)用，又可以適配各種移動(dòng)終端，形成webapp應(yīng)用，極大地滿足了各類移動(dòng)端客戶群體的需求，是開(kāi)發(fā)電商產(chǎn)品的首選技術(shù)方案。未來(lái)前景借助各大電商平臺(tái)開(kāi)設(shè)的店鋪，成本高，靈活性更差，可拓展性不強(qiáng)，并受到各種功能限制，無(wú)法做成自己設(shè)計(jì)的產(chǎn)品，如果通過(guò)web技術(shù)，開(kāi)發(fā)適合自身產(chǎn)品特點(diǎn)電商項(xiàng)目，這些問(wèn)題將迎刃而解。項(xiàng)目背景需求獲取需要滿足用戶在移動(dòng)終端購(gòu)物的需求，通過(guò)互聯(lián)網(wǎng)發(fā)布開(kāi)發(fā)的web應(yīng)用，用戶訪問(wèn)指定地址，并登錄網(wǎng)站，選擇或查詢商品，放入購(gòu)物車(chē)中，完成結(jié)算后形成訂單，個(gè)人用戶可以在用戶中心查看自己的訂單信息和狀態(tài)。需求分類用戶在產(chǎn)品中的需求分為分類瀏覽、查看詳細(xì)、放入購(gòu)物車(chē)，付款結(jié)算和訂單查詢功能，此外，為了增加用戶在產(chǎn)品中的粘性，還增加了業(yè)內(nèi)動(dòng)態(tài)推薦，動(dòng)態(tài)查看、收藏和點(diǎn)贊的功能，用戶可以在用戶中心查看自己收藏的動(dòng)態(tài)信息，并可以取消收藏。核心需求電商項(xiàng)目的核心需求是購(gòu)買(mǎi)產(chǎn)品，那么，項(xiàng)目圍繞這一個(gè)核心需求實(shí)現(xiàn)的功能是推薦產(chǎn)品、產(chǎn)品分類、產(chǎn)品詳細(xì)、購(gòu)物車(chē)、結(jié)算訂單和訂單查看，其余功能前期可搭建框架，完成基本功能，不做深入擴(kuò)展。需求分析電商項(xiàng)目功能模塊圖功能模塊

1.

創(chuàng)建一個(gè)Vue3框架的項(xiàng)目，需要先安裝vue-cli工具，打開(kāi)電腦終端或命令提示符，輸入npminstall-g@vue/cli指令，安裝5.0以上版本的vue-cli工具。

2.

安裝成功后，再輸入vue--version指令查看安裝的版本號(hào)。

3.

輸入vuecreatevue3shop指令，創(chuàng)建一個(gè)名稱為vue3shop的項(xiàng)目。

4.

進(jìn)入名稱為vue3shop的項(xiàng)目文件夾中，安裝本項(xiàng)目所需要的依賴模塊。說(shuō)明：依賴模塊@vant/area-data用于訂單中地址地區(qū)數(shù)據(jù)的選擇，pinia用于項(xiàng)目的全局?jǐn)?shù)據(jù)

管理，pinia-plugin-persist用于pinia全局?jǐn)?shù)據(jù)的緩存，vant是用于頁(yè)面移動(dòng)端開(kāi)發(fā)的框架，

vue-router是用于項(xiàng)目的路由管理和配置。創(chuàng)建項(xiàng)目項(xiàng)目創(chuàng)建完成并安裝所需要的依賴模塊后