Vue.js 超詳細入門與項目實戰(zhàn)（微課視頻版）課件全套 李永亮 第01-19章 前端框架發(fā)展-個人中心頁開發(fā)

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

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

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

2、誕生原因3、解決方案4、重點說明C01-05單面應用不足和優(yōu)化1、單頁應用不足2、中間層的使用3、應用結構優(yōu)化

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

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

HTML5是前端技術的核心，它代表了Web開發(fā)的方向，無論是基于移動端的應用，還是駐足在PC端的頁面，都是基于該技術打造的框架和平臺。代表Web開發(fā)方向

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

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

JavaScript是一種編程語言，是前端語言核心。

CSS3是樣式表的一個更新版本。是前端樣式表。

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

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

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

Node開發(fā)日漸重要

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

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

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

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

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

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

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

在上圖中，服務端只提供了一套接口，所有的內容輸出應用，包括單面應用和移動端應用。因此，對于服務端開發(fā)人員來說，有助于提升項目開發(fā)的速度，有利于提高代碼的后期維護，從而提升開發(fā)效率。重點說明單頁應用不足

前后端分離后的前端單頁應用，由于框架結構和分離的原因，存在下面幾個問題：首屏加載時間過長處理嵌套請求效果不好需要后端介入邏輯層處理

只將應用的開發(fā)從結構上分為前端和服務端是遠遠不夠的，通過使用中間層是大家公認的優(yōu)化方案。中間層的作用帶中間層的前后端分離流程中間層的使用前端瀏覽器渲染移動端應用單面應用

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

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

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

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

教學內容第一節(jié)

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

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

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

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

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

打開提示符窗口，在光標閃爍處，輸入指令：vuecreateshop再按回車鍵，就會通過VueCLI工具，自動創(chuàng)建一個名稱為shop的項目，如圖所示。創(chuàng)建第一個簡單項目執(zhí)行項目

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

使用VisualStudio打開項目文件夾shop后，它的結構相對于Vue2之前的版本來說，更加簡單，包含三個重要的文件夾，如圖所示。創(chuàng)建第一個簡單項目node_modules文件夾用于保存各類依賴的包文件和模塊src文件夾用于保存項目中全部的組件和各類加載的文件public文件夾用于保存公共圖標和全局文件

在項目中，默認生成的代碼可以進行任意修改，接下來通過一個簡單的實例，加深對文件和代碼結構的理解能力。效果如圖所示。修改組件代碼

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

教學內容第一節(jié)

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

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

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

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

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

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

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

嚴格來說，MVC框架是一種設計思想。它的結構與后端語言的MVC一樣，由Model、View、Controller三部分組成，它們三者的關系如圖所示。MVC框架演變過程ViewControllerModeluseractionupdatenotifyupdate

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

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

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

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

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

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

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

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

教學內容第一節(jié)

事件定義第二節(jié)事件綁定方式第三節(jié)事件傳參知識目標教學目標理解和掌握Vue中定義事件方法理解Vue中事件綁定方式掌握Vue中傳參過程和參數(shù)對象知識點預覽#節(jié)知識點難點重點應用4C04-01事件定義

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

指令v-on專門用于元素事件的綁定，添加時通過“:”冒號將指令與事件名稱隔開，冒號右側為需要綁定的事件名稱；@是指令綁定事件的一種簡寫方式，也是一種語法糖寫法。指令v-on或@

在Vue中，當事件綁定時，允許在事件名稱后面通過點語法的形式添加一個事件修飾符，來處理DOM事件本身默認的現(xiàn)象。

常見的修飾符有下面幾種，名稱和用法如下。

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

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

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

教學內容第一節(jié)

過渡動畫第二節(jié)自定義動畫第三節(jié)第三方動畫庫第四節(jié)列表動畫知識目標教學目標理解和掌握過渡動畫實現(xiàn)的方法和流程理解自定義動畫的工作過程和原理掌握第三方動畫庫和列表動畫實現(xiàn)的方法知識點預覽#節(jié)知識點難點重點應用5C05-01過渡動畫

C05-02自定義動畫1、自定義動畫2、自定義動畫樣式C05-03第三方動畫庫1、animate.css2、gsap動畫庫C05-04列表動畫1、transition-group組件基本功能2、交錯過渡動畫效果

在Vue中，專門提供了一個名稱為transition的內置組件，該組件本身和它的頂層并不渲染動畫效果，而只是將動畫效果應用到被組件包裹的DOM元素上，代碼如下所示。

<transition><div>動畫元素</div></transition>

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

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

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

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

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

導入成功后，就可以在組件的模板元素中，使用平臺框庫中的動畫效果了。

gsap動畫庫效果過渡動畫

動畫不僅可以作用于一個節(jié)點或一個組件上，而且還可以作用于多個節(jié)點和組件中。transition-group是新增的一個動畫組件，它可以在多個元素中應用動畫，具有以下特征：

默認情況下，它不會渲染組件包裹中某個元素，除非單獨指定某一個元素。過渡的模式不可使用，因為它不再相互切換元素的特有效果。元素內部需要提供唯一的屬性key值，用于標識動畫作用的是哪個元素。CSS過渡樣式僅作用于包裹的內部元素，不會應用于動畫組件本身。transition-group組件不僅可以在列表中實現(xiàn)基礎的動畫效果，還可以在列表中實現(xiàn)交錯過渡的效果。

transition-group組件基本功能效果過渡動畫

通過自定義CSS樣式實現(xiàn)的動畫效果非常有限，還面臨瀏覽器的兼容性問題。gsap動畫平臺則是一個非常不錯的選擇，該平臺不僅支持簡單的動畫效果，而且還能實現(xiàn)復雜的列表動畫。可以針對所有的JavaScript操作實現(xiàn)動畫效果，在transition-group組件中，為了監(jiān)聽動畫執(zhí)行的過程，提供了許多鉤子函數(shù)。

transition-group組件基本功能效果過渡動畫第6章組件課件V1.0

教學內容第一節(jié)

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

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

單文件組件

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

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

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

在第2個步驟中，調用Vue應用實例化對象的component()方法時，需傳入兩個參數(shù)，第一個是指這個全局組件的名稱，第二個是指這個全局組件所對應的目標組件，通常是已定義完成的組件。component()方法可以采用鏈式方式編寫，注冊多個全局組件。最后，各個被注冊的全局組件之間也可以相互調用，因此，上述代碼中的三個被注冊的全局組件內部是可以相互訪問的。全局注冊

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

此外，局部注冊的組件只能在注冊的父組件中使用，并不能運用到它的子組件或后代組件，即局部組件只對顯式的注冊有效，而對后代組件無效。局部組件在注冊組件時，有下列二種命名格式。1、短橫線分隔（kebab-case）ponent('custom-component-name',{/*...*/})2、首字母大寫（PascalCase）ponent('CustomComponentName',{/*...*/})官方提倡使用首字母大寫格式，因為它是一個合法的JavaScript標識符，可以很容易地導入和注冊到組件中，將系統(tǒng)自帶的Vue組件和自定義元素區(qū)分開。組件命名格式

組件屬性的定義需要使用props選項來完成，選項的值可以是一個字符型數(shù)組，也可以是一個對象的形式。除了數(shù)組形式定義屬性外，還可以使用對象的方式來定義組件的屬性。官方建議使用對象的形式去定義一個組件的屬性，因為這種形式定義組件屬性時，對象中的key表示屬性名稱，屬性值就是屬性名聲明類型的構造函數(shù)；此外，這種形式定義屬性時，還可以設置該屬性是否需要驗證。屬性定義

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

屬性驗證

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

組件的命名官方推薦使用首字母大寫的格式，因為這種格式有利于提高模板的可讀性，而組件屬性的命名官方建議使用短橫線分隔的格式，因為這樣的格式更加貼近HTML元素書寫的風格。屬性值傳遞

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

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

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

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

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

教學內容第一節(jié)

父組件向子組件傳參第二節(jié)子組件向父組件傳參第三節(jié)組件之間傳參第四節(jié)slot傳參知識目標教學目標理解和掌握父與子組件之間相互傳參的方法掌握兩個獨立組件之間相互傳參的流程和方法理解父子間組件slot方式傳參的過程和原理知識點預覽#節(jié)知識點難點重點應用7C07-01父組件向子組件傳參1、父向子組件傳參說明

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

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

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

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

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

全局事件總線

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

組件之間傳參

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

作用域插槽

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

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

教學內容第一節(jié)

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

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

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

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

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

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

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

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

在路由跳轉時，還可以攜帶參數(shù)進入目標頁，跳轉標簽和方式不同，攜帶參數(shù)的格式也不一樣，如果是一個a標簽攜帶參數(shù)跳轉，如下代碼所示：

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

帶參數(shù)跳轉

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

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

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

重定向配置

并不是所有的錯誤訪問地址都需要重定向，有時僅是針對原有的，已下架的頁面地址做重定向，因為這些地址有可能是從收藏夾中直接訪問的。針對那些沒有重定向的地址，可以添加一個公用的404頁面，如果訪問出錯，就直接跳轉到該頁面，代碼如下所示。{path:'/:pathMatch(.*)*',name:'404',component:()=>import('../views/404.vue'),}

404配置

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

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

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

教學內容第一節(jié)

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

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

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

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

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

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

無論是創(chuàng)建實例化對象，還是發(fā)送請求，配置對象都是必須要考慮的內容，在整個axios配置對象中，url屬性是必須要填寫的，method屬性默認值為GET方式。

配置對象結構

配置對象可以在發(fā)送請求和實例化axios對象時進行配置，也可以通過defaults對象，設置默認的配置值，該配置值的優(yōu)先級高于模塊庫的默認值，將會作用于每一個請求，除非在請求時，通過config對象進行變更。

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

除了設置和修改默認配置之外，發(fā)送一次請求后，無論成功與失敗，都將會返回響應的數(shù)據(jù)，并通過then或catch函數(shù)來獲取。默認配置和響應結構

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

如果需要在Vue3項目中全局配置axios對象，只需要在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ù)據(jù)就變得十分簡單，只需在組件中，通過this這個對象，調用$http屬性，就可以獲取配置好的axios實例化對象，再通過這個對象發(fā)送異步請求，并在then函數(shù)中獲取響應的數(shù)據(jù)，下面通過一個完整的實例來演示請求過程。請求數(shù)據(jù)

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

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

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

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

教學內容第一節(jié)

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

Getters第四節(jié)Actions第五節(jié)其他擴展插件知識目標教學目標理解和掌握Pinia模塊安裝的方法掌握Pinia對象實例創(chuàng)建和配置的過程理解掌握Pinia各組成部分的構建和訪問知識點預覽#節(jié)知識點難點重點應用10C10-01Pinia介紹1、安裝和配置Pinia

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

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

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

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

構建和訪問State

當保存Store的實例化對象后，不僅可以訪問和操作state對象的屬性值，還可以直接調用$retset()方法，使用state對象重新還原成初始值。

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

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

如果需要批量變更State中的多個屬性值，可以調用Store實例化對象中的$patch方法，它可以用對象的形式在同一時間內，一次性更新多個屬性值。

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

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

構建和訪問Getters

與State對象一樣，Getters對象也可以通過mapState映射成computed對象中的一個成員，當調用時，才會重置State的屬性值。其他操作方式

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

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

教學內容第一節(jié)

Vant

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

Vant表單組件第四節(jié)Vant業(yè)務組件第五節(jié)其他擴展插件知識目標教學目標理解和掌握

Vant

組件庫安裝和配置方法掌握

Vant

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

Vant

其他核類組件的使用知識點預覽#節(jié)知識點難點重點應用11C11-01Vant介紹1、Vant特點

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

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

使用

Vue3

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

Button

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

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

icon左側圖標名稱或圖片鏈接string

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

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

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

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

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

組件van-col組件常用屬性說明Layout

組件名稱說明類型默認值span列元素寬度number|string

offset列元素偏移距離number|string

tag自定義元素標簽stringdivvan-row

組件常用屬性說明Layout

組件名稱說明類型默認值gutter列元素之間的間距number|string

tag自定義元素標簽stringdivjustify主軸對齊方式stringstartalign交叉軸對齊方式stringtopwrap是否自動換行booleantrue

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

PasswordInput組件名稱說明類型默認值value密碼值string

info輸入框下方文字提示string

error-info輸入框下方錯誤提示string

length密碼最大長度number|string6gutter輸入框格子之間的間距number|string0mask是否隱藏密碼內容booleantruefocused是否已聚焦，聚焦時會顯示光標booleanfalse

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

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

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

tips當不支持Canvas時的提示信息string

clear-button-text清除按鈕文案string清空confirm-button-text確認按鈕文案string確認

Signature組件常用的事件如下Signature組件事件名稱說明回調參數(shù)start開始簽名時觸發(fā)

end結束簽名時觸發(fā)

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

Card組件用于展示商品的完整信息，包括商品圖片、價格、標簽和促銷信息，還可以顯示商品的多種標簽，自定義商品的底部操作按鈕，常用于購物車商品信息的展示和商品列表信息的顯示，它的常用屬性如下。Card組件名稱說明類型默認值thumb左側圖片string

title標題string

desc描述string

tag圖片角標string

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

price商品價格number|string

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

教學內容第一節(jié)

功能設計第二節(jié)項目開發(fā)第三節(jié)

打包與發(fā)布知識目標教學目標理解和掌握項目功能設計的方法掌握項目開發(fā)的流程和配置過程理解和掌握開發(fā)和發(fā)布打包的流程知識點預覽#節(jié)知識點難點重點應用12C12-01功能設計1、項目背景

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

1.

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

2.

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

3.

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

4.

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

管理，pinia-plugin-persist用于pinia全局數(shù)據(jù)的緩存，vant是用于頁面移動端開發(fā)的框架，

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