Vue.js3前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用 課件全套 單元1-11 Vue.js 3入門(mén)基礎(chǔ)-工程化項(xiàng)目實(shí)戰(zhàn) 圖片素材庫(kù)網(wǎng)站

單元一Vue.js入門(mén)基礎(chǔ)Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用目錄前端開(kāi)發(fā)模式的演變歷程認(rèn)識(shí)Vue.js項(xiàng)目開(kāi)發(fā)準(zhǔn)備項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面基于模板渲染頁(yè)面的開(kāi)發(fā)模式利用JSP、PHP等技術(shù)創(chuàng)建頁(yè)面模板，頁(yè)面內(nèi)容由后端計(jì)算生成，通過(guò)Web服務(wù)器將模板解析成HTML文件，經(jīng)瀏覽器渲染后得到最終頁(yè)面效果。特點(diǎn)：是頁(yè)面布局與業(yè)務(wù)邏輯代碼混合在一起基于AJAX前后端分離的開(kāi)發(fā)模式Web應(yīng)用可分為前端和后端，其中前端負(fù)責(zé)頁(yè)面的布局與交互，后端負(fù)責(zé)業(yè)務(wù)邏輯的處理，前后端通過(guò)接口進(jìn)行數(shù)據(jù)交互。特點(diǎn)：前后端分離，各自任務(wù)明確前端開(kāi)發(fā)模式的演變歷程基于MVVM的開(kāi)發(fā)模式MVVM（Model-View-ViewModel，模型-視圖-視圖模型）模式是一種簡(jiǎn)化用戶界面的事件驅(qū)動(dòng)編程方式。其思想是以ViewModel（視圖模型）層為樞紐，向上與View（視圖）層進(jìn)行雙向數(shù)據(jù)綁定，向下與Model（模型）層通過(guò)接口交互數(shù)據(jù)，從而實(shí)現(xiàn)View和Model的自動(dòng)同步。特點(diǎn)：前后端進(jìn)一步得到分離前端開(kāi)發(fā)模式的演變歷程什么是Vue.jsVue.js（簡(jiǎn)稱Vue）是一個(gè)基于MVVM模式的，用于構(gòu)建用戶界面的JavaScript框架。核心思想數(shù)據(jù)驅(qū)動(dòng)：指視圖由數(shù)據(jù)驅(qū)動(dòng)生成，開(kāi)發(fā)者對(duì)視圖的改變，不是通過(guò)直接操作DOM實(shí)現(xiàn)的，而是通過(guò)修改數(shù)據(jù)間接實(shí)現(xiàn)的。組件化：對(duì)于可重用代碼的封裝。認(rèn)識(shí)Vue.jsVue主要特性輕量級(jí)數(shù)據(jù)綁定指令豐富插件眾多組件化虛擬DOM認(rèn)識(shí)Vue.js了解相關(guān)工具Vue庫(kù)文件Vue框架的核心庫(kù)文件。它包括模板語(yǔ)法、組件、數(shù)據(jù)綁定和響應(yīng)式系統(tǒng)等內(nèi)容，可以滿足前端項(xiàng)目的基礎(chǔ)功能開(kāi)發(fā)需求使用方式采用CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)）鏡像服務(wù)器方式直接導(dǎo)入HTML文件下載Vue庫(kù)文件，將它作為本地資源在HTML代碼中引入以插件形式安裝到前端項(xiàng)目中項(xiàng)目開(kāi)發(fā)準(zhǔn)備了解相關(guān)工具（續(xù)）VueCLI一個(gè)用于快速構(gòu)建Vue項(xiàng)目的工具。它包括CLI（Command-LineInterface，命令行界面）、CLI服務(wù)和CLI插件CLI：提供了Vue命令用于搭建項(xiàng)目CLI服務(wù)：基于webpack提供開(kāi)發(fā)環(huán)境，用于項(xiàng)目啟動(dòng)、打包和加載CLI插件等處理工作CLI插件：提供可選的包，如Babel/TypeScript轉(zhuǎn)譯、ESLint集成等，在創(chuàng)建項(xiàng)目時(shí)，開(kāi)發(fā)者可自行選用項(xiàng)目開(kāi)發(fā)準(zhǔn)備了解相關(guān)工具（續(xù)）Node.js、npm和webpackNode.js是一個(gè)基于ChromeV8引擎的JavaScript運(yùn)行環(huán)境。它提供了使用npm和webpack工具的支持npm：一個(gè)Node.js中用于集中管理包的工具webpack：一個(gè)JavaScript應(yīng)用程序的靜態(tài)模塊打包器ES6（ECMAScript6.0的縮寫(xiě)）：是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，其目標(biāo)是使JavaScript語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。新特性：const和let命令、模板字符串、解構(gòu)、for...of循環(huán)、展開(kāi)運(yùn)算符、ES6箭頭函數(shù)、類的支持、模塊等項(xiàng)目開(kāi)發(fā)準(zhǔn)備項(xiàng)目開(kāi)發(fā)準(zhǔn)備安裝開(kāi)發(fā)和調(diào)試工具代碼編輯器：VSCode（VisualStudioCode）是Microsoft推出的一款用于編寫(xiě)現(xiàn)代Web應(yīng)用和云應(yīng)用的跨平臺(tái)源碼編輯器VSCode的安裝：進(jìn)入VSCode的官網(wǎng)下載所需版本，而后執(zhí)行.exe文件進(jìn)行安裝VSCode的擴(kuò)展庫(kù)：Vetur：支持Vue語(yǔ)法高亮、智能感知、Emmet等，還包含格式化功能等HTMLSnippets：支持HTML標(biāo)簽以及對(duì)標(biāo)簽含義的智能提示項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools前端開(kāi)發(fā)人員可用它進(jìn)行開(kāi)發(fā)預(yù)覽、遠(yuǎn)程調(diào)試、性能調(diào)優(yōu)、bug跟蹤、斷點(diǎn)調(diào)試等工作后端開(kāi)發(fā)人員可用它進(jìn)行網(wǎng)絡(luò)抓包、開(kāi)發(fā)調(diào)試等工作測(cè)試人員則可用它檢查服務(wù)器端API數(shù)據(jù)是否正確、審查頁(yè)面元素樣式及布局、進(jìn)行頁(yè)面加載性能分析，以及進(jìn)行自動(dòng)化測(cè)試DevTools工具中共有8個(gè)功能面板，其中常用于調(diào)試的是：Elements（元素）面板、Console（控制臺(tái)）面板、Sources（源代碼）面板、Network（網(wǎng)絡(luò)）面板項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Elements面板：用于檢查和實(shí)時(shí)編輯頁(yè)面的HTML與CSS代碼定位DOM查看CSS項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Console面板：可進(jìn)行交互式編程用于調(diào)試；也可以查看當(dāng)前程序運(yùn)行日志信息項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Sources面板：查看源碼以及進(jìn)行斷點(diǎn)調(diào)試項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Network面板：查看網(wǎng)頁(yè)資源請(qǐng)求處理情況項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具VueDevtools一款基于瀏覽器的插件，主要用于調(diào)試Vue應(yīng)用程序安裝流程GitHub上查找并下載安裝包vue3_dev_tools.crxChrome瀏覽器右上角“自定義及控制”下拉菜單中，選擇“更多工具”->“擴(kuò)展程序”，進(jìn)入擴(kuò)展程序管理界面，把安裝包文件拖入該界面，當(dāng)看到瀏覽器提示“要添加Vue.jsdevtools嗎？”時(shí)，單擊“添加擴(kuò)展程序”按鈕，即可安裝該插件項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面需求描述歷史名城游網(wǎng)站需要制作一個(gè)HTML頁(yè)面，用于介紹某個(gè)歷史名城的基本情況。頁(yè)面內(nèi)容包括標(biāo)題、介紹文字、點(diǎn)贊按鈕和點(diǎn)贊數(shù)項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面實(shí)現(xiàn)思路使用VSCode創(chuàng)建一個(gè)HTML程序，引入Vue庫(kù)文件，并編寫(xiě)相應(yīng)的HTML、CSS和JavaScript代碼。使用Chrome瀏覽器運(yùn)行該程序，并通過(guò)調(diào)試工具查看相關(guān)信息項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面任務(wù)1-1構(gòu)建Vue應(yīng)用程序任務(wù)1-2運(yùn)行并調(diào)試Vue應(yīng)用程序同步訓(xùn)練請(qǐng)使用VSCode代碼編輯器，創(chuàng)建一個(gè)HTML頁(yè)面，編寫(xiě)如圖所示代碼，實(shí)現(xiàn)顯示“Hello,World！”的功能。單元小結(jié)前端開(kāi)發(fā)模式的發(fā)展經(jīng)歷了3個(gè)階段：模板渲染頁(yè)面->AJAX前后端分離->MVVM。Vue是一個(gè)用于構(gòu)建用戶界面的JavaScript框架。它是基于MVVM模式的、漸進(jìn)式的、允許自底向上逐層應(yīng)用的框架。Vue的核心思想是數(shù)據(jù)驅(qū)動(dòng)和組件化。數(shù)據(jù)驅(qū)動(dòng)是指視圖由數(shù)據(jù)驅(qū)動(dòng)生成，開(kāi)發(fā)者對(duì)視圖的改變，不是通過(guò)直接操作DOM，而是通過(guò)修改數(shù)據(jù)間接實(shí)現(xiàn)的。組件化是指對(duì)于可重用代碼的封裝。Vue的主要特性是：輕量級(jí)、數(shù)據(jù)綁定、指令、插件、組件化和虛擬DOM。與Vue應(yīng)用開(kāi)發(fā)相關(guān)的工具包括Vue庫(kù)文件、VueCLI、Node.js、npm、webpack和ES6。Vue使用的開(kāi)發(fā)工具是VSCode，調(diào)試工具是DevTools和VueDevtools。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元二

基礎(chǔ)語(yǔ)法目錄剖析Vue應(yīng)用程序單向綁定雙向綁定流程控制事件處理計(jì)算屬性數(shù)據(jù)監(jiān)聽(tīng)器項(xiàng)目2-1簡(jiǎn)易計(jì)算器項(xiàng)目2-2歷史名城典故頁(yè)面剖析Vue應(yīng)用程序示例執(zhí)行結(jié)果示例代碼Vue應(yīng)用程序的要素導(dǎo)入Vue庫(kù)文件選擇掛載點(diǎn)聲明渲染數(shù)據(jù)的HTML代碼結(jié)構(gòu)利用JavaScript定義數(shù)據(jù)和操作數(shù)據(jù)創(chuàng)建Vue應(yīng)用實(shí)例和進(jìn)行掛載處理剖析Vue應(yīng)用程序Vue應(yīng)用程序相關(guān)的幾個(gè)基本知識(shí)模板語(yǔ)法定義：組件中template選項(xiàng)內(nèi)容（即模板結(jié)構(gòu)）所使用的語(yǔ)法規(guī)則作用：關(guān)聯(lián)組件的響應(yīng)式數(shù)據(jù)與DOM元素，即實(shí)現(xiàn)數(shù)據(jù)綁定分類：插值語(yǔ)法和指令語(yǔ)法組件定義：Vue應(yīng)用程序的基本結(jié)構(gòu)單元，每個(gè)組件都必須包含template選項(xiàng)，并規(guī)定其內(nèi)容必須定義到HTMLtemplate（模板）元素中或是掛載點(diǎn)內(nèi)剖析Vue應(yīng)用程序Vue應(yīng)用程序相關(guān)的幾個(gè)基本知識(shí)（續(xù)）插值語(yǔ)法最基本的數(shù)據(jù)綁定形式，通過(guò)引用組件的響應(yīng)式數(shù)據(jù)填充DOM元素，以達(dá)到數(shù)據(jù)綁定的目的插值語(yǔ)法：{{JavaScript表達(dá)式}}指令語(yǔ)法將指令綁定于DOM元素內(nèi)置屬性上或?qū)⒅噶钭鳛樵撛氐男聦傩裕瑸樵撛靥砑右恍┨厥獾男袨?，從而?shí)現(xiàn)數(shù)據(jù)綁定指令語(yǔ)法：v-指令:參數(shù)="表達(dá)式"，其中v-指令構(gòu)成特殊的HTML屬性，參數(shù)不是必選項(xiàng)剖析Vue應(yīng)用程序Vue應(yīng)用程序相關(guān)的幾個(gè)基本知識(shí)（續(xù)）響應(yīng)式數(shù)據(jù)響應(yīng)式數(shù)據(jù)是Vue響應(yīng)性特性的體現(xiàn)，如組件data選項(xiàng)中定義的數(shù)據(jù)均具有響應(yīng)性，即這些數(shù)據(jù)的變化都將會(huì)帶來(lái)HTML頁(yè)面輸出內(nèi)容的更新，這樣的數(shù)據(jù)也稱為狀態(tài)掛載點(diǎn)掛載點(diǎn)用于指定數(shù)據(jù)將被渲染的位置。Vue允許除<html>和<body>標(biāo)簽之外的任意HTML標(biāo)簽所表示的DOM元素作為掛載點(diǎn)使用CDN方式導(dǎo)入Vue庫(kù)文件剖析Vue應(yīng)用程序Vue構(gòu)建用戶界面的流程剖析Vue應(yīng)用程序單向綁定定義：數(shù)據(jù)改變會(huì)帶動(dòng)視圖更新，但視圖改變不會(huì)影響數(shù)據(jù)常用指令單向綁定插件表達(dá)式作用：用于引用響應(yīng)式數(shù)據(jù)語(yǔ)法：{{JavaScript表達(dá)式}}單向綁定學(xué)生：zhangsan示例執(zhí)行結(jié)果示例代碼v-text指令作用：通過(guò)其表達(dá)式引用響應(yīng)式數(shù)據(jù)，并將該數(shù)據(jù)渲染到指定DOM元素中語(yǔ)法：v-text="JavaScript表達(dá)式"單向綁定示例執(zhí)行結(jié)果示例代碼<h3>ThisisHTMLcontent</h3>v-html指令作用：通過(guò)其表達(dá)式引用響應(yīng)式數(shù)據(jù)，將該數(shù)據(jù)作為HTML代碼，并在解析后將其渲染到DOM元素中語(yǔ)法：v-html="JavaScript表達(dá)式"單向綁定示例執(zhí)行結(jié)果示例代碼ThisisHTMLcontentv-bind指令作用：用于綁定DOM元素的任意屬性，通過(guò)引用響應(yīng)式數(shù)據(jù)控制該屬性的變化語(yǔ)法：v-bind:屬性名="JavaScript表達(dá)式"示例：使用v-bind綁定HTML鏈接（a）、圖像（img）元素屬性單向綁定示例執(zhí)行結(jié)果示例代碼“Vue官網(wǎng)”鏈接以及Vue圖標(biāo)v-bind指令（續(xù)）示例v-bind綁定class屬性單向綁定示例執(zhí)行結(jié)果示例代碼雙向綁定定義：數(shù)據(jù)改變會(huì)引起視圖變化，視圖變化也會(huì)帶動(dòng)數(shù)據(jù)的改變。語(yǔ)法：v-model="JavaScript表達(dá)式"。雙向綁定雙向綁定示例使用v-model綁定HTML輸入框（input和textarea）元素雙向綁定示例執(zhí)行結(jié)果雙向綁定示例代碼雙向綁定示例使用v-model綁定HTML單選框（radio）元素雙向綁定示例執(zhí)行結(jié)果示例代碼雙向綁定示例使用v-model綁定HTML下拉列表框（select）元素雙向綁定示例執(zhí)行結(jié)果示例代碼條件渲染v-if/v-else/v-else-if作用：v-if可基于表達(dá)式值的真假，來(lái)?xiàng)l件性地渲染DOM元素，v-else、v-else-if分別用于表示與v-if鏈?zhǔn)秸{(diào)用的else塊和else-if塊語(yǔ)法：v-if="JavaScript表達(dá)式"v-else="JavaScript表達(dá)式"v-else-if="JavaScript表達(dá)式"流程控制v-if/v-else/v-else-if（續(xù)）示例:條件渲染指令應(yīng)用流程控制示例執(zhí)行結(jié)果示例代碼你可以看到消息數(shù)字大于0但小于等于5”v-show作用：與v-if的類似，也是基于表達(dá)式值的真假，來(lái)改變?cè)氐目梢?jiàn)性語(yǔ)法：v-show="JavaScript表達(dá)式"流程控制v-show（續(xù)）示例：v-show應(yīng)用流程控制示例執(zhí)行結(jié)果示例代碼你可以看到消息v-if與v-show比較應(yīng)用場(chǎng)景v-if可應(yīng)用于HTMLtemplate元素本身及其子元素上，也可以與v-else、v-else-if配合使用v-show不支持對(duì)HTMLtemplate元素的條件渲染，也不能與v-else、v-else-if進(jìn)行組合渲染方式當(dāng)v-if屬性為true或false時(shí)，其對(duì)應(yīng)元素被觸發(fā)，元素及其所包含的組件都會(huì)被重構(gòu)或銷毀，如果v-if屬性初始值為false，則對(duì)應(yīng)元素根本不會(huì)被渲染v-show屬性初始值無(wú)論是true還是false，其對(duì)應(yīng)元素均會(huì)被渲染流程控制列表渲染v-for是一個(gè)循環(huán)結(jié)構(gòu)的指令，它可將組件data選項(xiàng)定義的數(shù)組綁定到HTML列表或表格元素上，根據(jù)數(shù)組元素個(gè)數(shù)重復(fù)地對(duì)其渲染v-for作用：不僅可用于遍歷數(shù)組，也可用于遍歷對(duì)象的屬性v-for語(yǔ)法：v-for="(item,i_key,index)in對(duì)象名"v-bind:key="item.id"流程控制v-for示例：利用v-for遍歷數(shù)組實(shí)現(xiàn)列表渲染流程控制示例執(zhí)行結(jié)果示例代碼v-for示例（續(xù)）使用v-for遍歷對(duì)象屬性，實(shí)現(xiàn)列表渲染流程控制示例執(zhí)行結(jié)果示例代碼事件處理機(jī)制：事件監(jiān)聽(tīng)采用v-on指令為DOM元素綁定監(jiān)聽(tīng)器，以監(jiān)聽(tīng)DOM事件和觸發(fā)事件處理代碼的執(zhí)行事件監(jiān)聽(tīng)v-on指令作用：監(jiān)聽(tīng)DOM事件和執(zhí)行事件處理函數(shù)語(yǔ)法：v-on:事件名="表達(dá)式"，“v-on:”可簡(jiǎn)寫(xiě)為“@”表達(dá)式為事件處理函數(shù)名，事件處理函數(shù)可以是方法或內(nèi)聯(lián)事件處理器事件處理事件處理示例使用方法事件處理器的v-on應(yīng)用事件處理示例執(zhí)行結(jié)果示例代碼顯示按鈕“求和”，單擊該按鈕，顯示計(jì)算結(jié)果為10事件處理示例（續(xù)）使用內(nèi)聯(lián)事件處理器的v-on應(yīng)用事件處理示例執(zhí)行結(jié)果示例代碼顯示按鈕“計(jì)數(shù)”和“求和”，每單擊一次“計(jì)數(shù)”按鈕，顯示計(jì)數(shù)加1；單擊“求和”按鈕，顯示結(jié)果為3，同時(shí)彈出對(duì)話框并顯示“BUTTON”。事件修飾符.stop：阻止事件冒泡.self：只有當(dāng)前元素本身有事件觸發(fā)時(shí)，才調(diào)用事件處理函數(shù).prevent：阻止默認(rèn)事件.capture：使用捕獲模式添加事件監(jiān)聽(tīng)器.once：實(shí)現(xiàn)事件只被觸發(fā)一次.passive：以{passive:true}模式添加事件監(jiān)聽(tīng)器事件處理.stop應(yīng)用場(chǎng)景HTML頁(yè)面上，粉色的div元素包裹在藍(lán)色的div元素中，利用.stop修飾符實(shí)現(xiàn)單擊對(duì)應(yīng)顏色的div元素，僅會(huì)顯示對(duì)應(yīng)顏色的信息事件處理.self應(yīng)用場(chǎng)景HTML頁(yè)面上綠色、藍(lán)色和粉色的div元素依次包裹，利用.self修飾符使得只有單擊藍(lán)色div元素時(shí)，才會(huì)顯示“藍(lán)色區(qū)域”信息事件處理.prevent應(yīng)用場(chǎng)景針對(duì)HTML頁(yè)面上的表單，利用.prevent修飾符實(shí)現(xiàn)單擊“提交”按鈕，執(zhí)行表單自定義提交處理函數(shù)onSubmit事件處理.capture應(yīng)用場(chǎng)景HTML頁(yè)面上有祖、父和子div元素形成的三層嵌套結(jié)構(gòu)，利用.capture修飾符實(shí)現(xiàn)從祖div元素到子div元素相關(guān)信息的依次顯示事件處理.once應(yīng)用場(chǎng)景對(duì)于HTML頁(yè)面上“單擊一次”按鈕，利用.once修飾符實(shí)現(xiàn)對(duì)此按鈕僅響應(yīng)單擊事件一次事件處理.passive應(yīng)用場(chǎng)景HTML頁(yè)面上有一個(gè)帶滾動(dòng)條的div元素區(qū)域，利用.passive修飾符使得瀏覽器能及時(shí)響應(yīng)用戶操作，確保順暢的滾動(dòng)體驗(yàn)事件處理.prevent和.stop應(yīng)用場(chǎng)景HTML頁(yè)面上button元素包含a子元素，利用.prevent和.stop修飾符，阻止a元素鏈接跳轉(zhuǎn)的默認(rèn)行為和事件繼續(xù)向外傳播事件處理計(jì)算屬性作用：用于描述依賴響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯處理語(yǔ)法：計(jì)算屬性簡(jiǎn)化寫(xiě)法示例：利用計(jì)算屬性實(shí)現(xiàn)人民幣與港幣的兌換計(jì)算屬性示例執(zhí)行結(jié)果示例代碼數(shù)據(jù)監(jiān)聽(tīng)器作用：對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)，一旦數(shù)據(jù)發(fā)生變化，則觸發(fā)相應(yīng)函數(shù)的執(zhí)行，以達(dá)到改變其他數(shù)據(jù)的目的語(yǔ)法數(shù)據(jù)監(jiān)聽(tīng)器數(shù)據(jù)監(jiān)聽(tīng)器示例：利用數(shù)據(jù)監(jiān)聽(tīng)器實(shí)現(xiàn)對(duì)不同類型數(shù)據(jù)的監(jiān)聽(tīng)數(shù)據(jù)監(jiān)聽(tīng)器示例執(zhí)行結(jié)果示例代碼顯示“字符串”、“對(duì)象”和“數(shù)組”3個(gè)輸入框，當(dāng)改變?nèi)魏我粋€(gè)輸入框值時(shí)，控制臺(tái)上會(huì)顯示相應(yīng)的提示信息、輸入框中的最新內(nèi)容項(xiàng)目2-1簡(jiǎn)易計(jì)算器需求描述網(wǎng)頁(yè)版簡(jiǎn)易計(jì)算器包括操作數(shù)輸入框、運(yùn)算符下拉列表框和計(jì)算處理按鈕。用戶輸入操作數(shù)，選擇運(yùn)算符，單擊“計(jì)算”按鈕，按鈕下方應(yīng)顯示運(yùn)算結(jié)果。運(yùn)算符包括+、-、*、/、**，除平方值運(yùn)算外，其他運(yùn)算的操作數(shù)均為兩個(gè)項(xiàng)目2-1簡(jiǎn)易計(jì)算器實(shí)現(xiàn)思路采用輸入框（input）、下拉列表框（select）和按鈕（button），分別構(gòu)建計(jì)算器的操作數(shù)輸入框、運(yùn)算符下拉列表框，以及計(jì)算處理按鈕對(duì)表單元素input、select的數(shù)據(jù)綁定需要使用雙向綁定，計(jì)算結(jié)果值則利用插值表達(dá)式呈現(xiàn)即可；針對(duì)“計(jì)算”按鈕的單擊事件，編寫(xiě)事件處理函數(shù)以實(shí)現(xiàn)計(jì)算器的計(jì)算功能除求平方運(yùn)算外，其他運(yùn)算均需要提供兩個(gè)操作數(shù)，也就是說(shuō)求平方運(yùn)算需要隱藏第二個(gè)操作數(shù)，可使用v-show指令來(lái)實(shí)現(xiàn)這個(gè)功能項(xiàng)目2-1簡(jiǎn)易計(jì)算器任務(wù)2-1-1構(gòu)建頁(yè)面布局項(xiàng)目2-1簡(jiǎn)易計(jì)算器任務(wù)2-1-2創(chuàng)建根組件和Vue應(yīng)用實(shí)例項(xiàng)目2-2歷史名城典故頁(yè)面需求描述歷史名城典故頁(yè)面包括左側(cè)城市列表和右側(cè)名城典故內(nèi)容，當(dāng)用戶選擇左側(cè)城市列表中某個(gè)城市時(shí)，應(yīng)能夠在右側(cè)名城典故內(nèi)容部分顯示對(duì)應(yīng)的名城典故信息。項(xiàng)目2-2歷史名城典故頁(yè)面實(shí)現(xiàn)思路采用列表（ul、li）、區(qū)塊（div）元素，分別構(gòu)建城市列表和名城典故內(nèi)容使用v-for、v-text指令和列表元素實(shí)現(xiàn)城市列表效果；使用v-on指令為列表中每個(gè)城市選項(xiàng)綁定事件，以監(jiān)聽(tīng)該選項(xiàng)的單擊事件，并利用對(duì)應(yīng)的事件處理函數(shù)實(shí)現(xiàn)名城典故的呈現(xiàn)項(xiàng)目2-2歷史名城典故頁(yè)面任務(wù)2-2-1構(gòu)建頁(yè)面布局項(xiàng)目2-2歷史名城典故頁(yè)面任務(wù)2-2-2創(chuàng)建根組件和Vue應(yīng)用實(shí)例同步訓(xùn)練請(qǐng)利用v-model、v-if指令實(shí)現(xiàn)學(xué)情問(wèn)卷調(diào)查頁(yè)面效果。圖（a）所示的是程序運(yùn)行的初始效果，當(dāng)用戶輸入調(diào)查內(nèi)容并單擊“提交”按鈕后，將顯示調(diào)查結(jié)果，如圖（b）所示。提示：“性別”、“你已學(xué)習(xí)的語(yǔ)言”可分別使用type為radio、checkbox的input元素來(lái)構(gòu)建。單元小結(jié)Vue基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建用戶界面，幫助開(kāi)發(fā)人員高效開(kāi)發(fā)用戶界面。開(kāi)發(fā)者可以選擇原生HTML、以組件嵌入網(wǎng)頁(yè)、單頁(yè)應(yīng)用（SPA）或服務(wù)器端渲染等方式來(lái)使用Vue。采用原生HTML開(kāi)發(fā)方式編寫(xiě)Vue應(yīng)用程序，其內(nèi)容如下。（1）導(dǎo)入Vue庫(kù)文件。（2）選擇掛載點(diǎn)。（3）聲明渲染數(shù)據(jù)的HTML代碼結(jié)構(gòu)。（4）利用JavaScript定義數(shù)據(jù)和操作數(shù)據(jù)。（5）創(chuàng)建Vue應(yīng)用實(shí)例和進(jìn)行掛載處理。單元小結(jié)常用術(shù)語(yǔ)如下。

（1）模板語(yǔ)法：Vue提供的對(duì)組件中template選項(xiàng)內(nèi)容所使用的語(yǔ)法規(guī)則，分為插值語(yǔ)法和指令語(yǔ)法兩種。（2）響應(yīng)式數(shù)據(jù)：Vue響應(yīng)性特性的體現(xiàn)，即數(shù)據(jù)的變化會(huì)帶來(lái)HTML頁(yè)面輸出內(nèi)容的更新。（3）掛載點(diǎn)：用于指定數(shù)據(jù)將被渲染的位置。Vue允許除<html>和<body>標(biāo)簽之外的任意HTML標(biāo)簽所表示的DOM元素作為掛載點(diǎn)。單元小結(jié)數(shù)據(jù)綁定分為單向和雙向兩種。其中單向綁定指的是數(shù)據(jù)改變會(huì)帶動(dòng)視圖更新，但視圖改變不會(huì)影響數(shù)據(jù)；雙向綁定則是指數(shù)據(jù)改變會(huì)引起視圖變化，反之視圖變化也會(huì)帶動(dòng)數(shù)據(jù)的改變。可用于單向綁定的包括插值表達(dá)式，以及v-text、v-html、v-bind、v-if/v-else/v-else-if、v-show、v-on、v-for等指令；雙向綁定指令為v-model。Vue事件處理機(jī)制中，事件監(jiān)聽(tīng)采用v-on指令為DOM元素綁定監(jiān)聽(tīng)器，以監(jiān)聽(tīng)DOM事件和觸發(fā)事件處理代碼的執(zhí)行。同時(shí)對(duì)于DOM事件的特殊情況，如事件冒泡、默認(rèn)事件等，Vue還提供了.stop、.self、.prevent、.capture、.once和.passive事件修飾符。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元三

組件基礎(chǔ)目錄認(rèn)識(shí)組件組件定義組件注冊(cè)組件間數(shù)據(jù)傳遞組件事件組件插槽動(dòng)態(tài)組件項(xiàng)目3自定義頁(yè)面圖標(biāo)樣式認(rèn)識(shí)組件組件化開(kāi)發(fā)思想將一個(gè)網(wǎng)頁(yè)應(yīng)用拆分為多個(gè)小的功能塊（組件），每個(gè)功能塊負(fù)責(zé)實(shí)現(xiàn)對(duì)應(yīng)的功能，并被以組件形式封裝起來(lái)，在不同頁(yè)面可重復(fù)使用，從而使得頁(yè)面的管理和維護(hù)變得更加容易一個(gè)Vue應(yīng)用程序結(jié)構(gòu)及其對(duì)應(yīng)的組件樹(shù)組件構(gòu)成template:組件的模板結(jié)構(gòu)，負(fù)責(zé)頁(yè)面布局，需定義到<template>標(biāo)簽對(duì)中script:組件的JavaScript行為，負(fù)責(zé)控制頁(yè)面布局及其樣式，需定義到<script>標(biāo)簽對(duì)中style:組件的CSS，負(fù)責(zé)頁(yè)面布局樣式，需定義到<style>標(biāo)簽對(duì)中認(rèn)識(shí)組件利用組件構(gòu)建頁(yè)面布局的過(guò)程通過(guò)template選項(xiàng)聲明模板結(jié)構(gòu)通過(guò)

script中data選項(xiàng)聲明數(shù)據(jù)、methods選項(xiàng)聲明操作數(shù)據(jù)的函數(shù)

data既可以是頁(yè)面布局內(nèi)容，也可以是頁(yè)面布局樣式；methods操作數(shù)據(jù)，改變布局或樣式認(rèn)識(shí)組件template選項(xiàng)它是嵌入<template>標(biāo)簽中的組件的模板結(jié)構(gòu)代碼<template>標(biāo)簽是HTML5新增特性，用于表示HTMLtemplate元素，默認(rèn)情況下它的內(nèi)容是不會(huì)被顯示出來(lái)的認(rèn)識(shí)組件template選項(xiàng)（續(xù)）使用方法1：是直接將模板結(jié)構(gòu)寫(xiě)入掛載點(diǎn)中，常用于根組件在組件template選項(xiàng)中，采用模板語(yǔ)法的模板字符串（用反撇號(hào)進(jìn)行標(biāo)識(shí)）來(lái)定義（不推薦）是先將模板結(jié)構(gòu)寫(xiě)入HTMLtemplate元素中，再將組件template選項(xiàng)設(shè)置為該元素id，以建立兩者的關(guān)聯(lián)（推薦）認(rèn)識(shí)組件template選項(xiàng)（續(xù)）使用方法示例認(rèn)識(shí)組件組件的使用流程組件定義：利用JavaScript創(chuàng)建組件對(duì)象組件注冊(cè)：按照使用范圍，對(duì)組件進(jìn)行全局或局部注冊(cè)，并給它起一個(gè)組件注冊(cè)名組件調(diào)用：以組件注冊(cè)名為元素名，在HTML頁(yè)面中調(diào)用該組件認(rèn)識(shí)組件組件聲明語(yǔ)法組件定義組件的使用流程組件定義：利用JavaScript創(chuàng)建組件對(duì)象組件注冊(cè)：按照使用范圍，對(duì)組件進(jìn)行全局或局部注冊(cè)，并給它起一個(gè)組件注冊(cè)名組件調(diào)用：以組件注冊(cè)名為元素名，在HTML頁(yè)面中調(diào)用該組件認(rèn)識(shí)組件示例創(chuàng)建一個(gè)名為MyComponent的組件組件定義我是根組件！MyComponent是自定義的一個(gè)組件!示例執(zhí)行結(jié)果組件注冊(cè)名的命名方式使用kebab-case方式命名（推薦）所有字母小寫(xiě)，名稱中各單詞用短橫線“-”連接簡(jiǎn)寫(xiě)方式：組件注冊(cè)名與組件對(duì)象名命名相同，再使用kebab-case方式調(diào)用組件使用PascalCase（每個(gè)單詞首字母大寫(xiě)）方式組件定義全局注冊(cè)作用：被全局注冊(cè)的組件可應(yīng)用于整個(gè)Vue應(yīng)用程序的任意組件中語(yǔ)法：組件注冊(cè)組件注冊(cè)全局注冊(cè)（續(xù)）示例注冊(cè)全局組件，實(shí)現(xiàn)單擊按鈕計(jì)數(shù)功能示例執(zhí)行效果組件注冊(cè)局部注冊(cè)作用：通過(guò)組件components選項(xiàng)來(lái)實(shí)現(xiàn)的，這使得被注冊(cè)的組件只能在其父組件中使用語(yǔ)法：組件注冊(cè)局部注冊(cè)（續(xù)）示例組件注冊(cè)ComponentA是一個(gè)局部組件!示例執(zhí)行結(jié)果組件間數(shù)據(jù)傳遞方式父子組件之間的通信；兄弟組件之間的通信；隔代組件之間的通信組件間數(shù)據(jù)傳遞常用方式父組件傳值給子組件，它是利用組件props選項(xiàng)定義的屬性來(lái)實(shí)現(xiàn)的props屬性語(yǔ)法組件間數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞常用方式父組件傳值給子組件，它是利用組件props選項(xiàng)定義的屬性來(lái)實(shí)現(xiàn)的props屬性語(yǔ)法：組件間數(shù)據(jù)傳遞props屬性（續(xù)）示例：使用props實(shí)現(xiàn)組件間的數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞我是子組件。這是從父組件來(lái)的數(shù)據(jù)：我是父組件數(shù)據(jù)示例執(zhí)行結(jié)果props屬性（續(xù)）示例：使用props實(shí)現(xiàn)父組件向子組件動(dòng)態(tài)傳遞數(shù)據(jù)組件間數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞props的驗(yàn)證作用：對(duì)props屬性驗(yàn)證的目的是為了確保他人能正確使用組件驗(yàn)證內(nèi)容：包括數(shù)據(jù)類型、值范圍等，允許的數(shù)據(jù)類型包括字符串（String）、數(shù)值（Number）、布爾（Boolean）、數(shù)組（Array）、對(duì)象（Object）、日期（Date）、函數(shù)（Function）和符號(hào)（Symbol）組件間數(shù)據(jù)傳遞props的驗(yàn)證方式數(shù)據(jù)類型驗(yàn)證組件間數(shù)據(jù)傳遞數(shù)據(jù)類型為一種類型示例數(shù)據(jù)類型為多種類型示例props的驗(yàn)證方式（續(xù)）必填值驗(yàn)證：通過(guò)required選項(xiàng)，將屬性設(shè)置為必須有值且其數(shù)據(jù)類型為type選項(xiàng)指定的數(shù)據(jù)類型。例如：組件間數(shù)據(jù)傳遞props的驗(yàn)證方式（續(xù)）默認(rèn)值設(shè)置：利用default選項(xiàng)，可設(shè)置屬性默認(rèn)值。當(dāng)父組件調(diào)用子組件，未在子組件元素中綁定屬性，即未傳遞屬性值時(shí)，默認(rèn)值將生效。例如：組件間數(shù)據(jù)傳遞props的驗(yàn)證方式（續(xù)）自定義驗(yàn)證函數(shù)：如果需要進(jìn)行復(fù)雜驗(yàn)證，可以自定義驗(yàn)證函數(shù)來(lái)判斷屬性是否符合要求。例如：組件間數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞props的驗(yàn)證方式（續(xù)）示例：對(duì)組件props選項(xiàng)傳遞的數(shù)據(jù)進(jìn)行驗(yàn)證示例執(zhí)行效果組件間數(shù)據(jù)傳遞Vue組件是由開(kāi)發(fā)者來(lái)設(shè)計(jì)事件觸發(fā)條件，也稱自定義事件Vue提供了emits選項(xiàng)和$emit函數(shù)，以實(shí)現(xiàn)組件事件的監(jiān)聽(tīng)和處理功能組件事件組件事件監(jiān)聽(tīng)與處理流程聲明和觸發(fā)自定義事件。在子組件中，使用emits選項(xiàng)聲明自定義事件；調(diào)用組件實(shí)例內(nèi)置函數(shù)$emit，并以事件名稱、要傳遞的數(shù)據(jù)為參數(shù)，觸發(fā)自定義事件并傳遞數(shù)據(jù)給父組件監(jiān)聽(tīng)自定義事件。父組件調(diào)用子組件時(shí)，在子組件元素中使用v-on指令（@指令）監(jiān)聽(tīng)自定義事件，父組件還需要聲明相應(yīng)的事件處理函數(shù)組件事件emits和$emit的使用emits選項(xiàng)的語(yǔ)法：$emit是組件實(shí)例的內(nèi)置函數(shù)，其語(yǔ)法：組件事件組件事件emits和$emit的使用（續(xù)）示例（例3-7）：在頁(yè)面中增加兩個(gè)輸入框和一個(gè)按鈕，實(shí)現(xiàn)單擊按鈕新增數(shù)組元素、單擊數(shù)組元素刪除對(duì)應(yīng)元素的功能示例執(zhí)行效果組件事件

關(guān)鍵代碼段組件事件的驗(yàn)證使用emits選項(xiàng)驗(yàn)證組件事件的有效性，在觸發(fā)事件時(shí)傳遞的數(shù)據(jù)將作為驗(yàn)證函數(shù)的參數(shù)組件事件組件事件的驗(yàn)證（續(xù)）示例：使用emits選項(xiàng)對(duì)組件自定義事件加以驗(yàn)證組件事件示例執(zhí)行效果組件事件v-model與自定義事件Vue允許在組件中使用v-model指令，結(jié)合自定義事件以及props選項(xiàng)，實(shí)現(xiàn)雙向數(shù)據(jù)傳遞例如：組件事件等同于：v-model與自定義事件（續(xù)）示例：子組件由一個(gè)輸入框和一個(gè)確認(rèn)按鈕組成，在子組件中輸入的新內(nèi)容會(huì)在父組件中顯示出來(lái)。組件事件示例執(zhí)行效果組件事件什么是插槽：可理解成一個(gè)可以插入的槽口，其作用與電源插座的插口、USB（UniversalSerialBus，通用串行總線）接口類同。使用插槽，組件可更具靈活性和可復(fù)用性插槽分類：默認(rèn)、具名和作用域組件插槽默認(rèn)插槽：在組件中使用slot元素即可為該組件開(kāi)啟一個(gè)插槽，如果slot元素name屬性值為默認(rèn)值default，這種插槽就被稱為默認(rèn)插槽默認(rèn)插槽的語(yǔ)法：組件插槽默認(rèn)插槽示例：在組件中定義和應(yīng)用默認(rèn)插槽

組件插槽這是父組件信息示例執(zhí)行結(jié)果具名插槽：為了區(qū)分不同插槽對(duì)應(yīng)的渲染內(nèi)容，可使用slot元素的name屬性，為每個(gè)插槽分配唯一標(biāo)識(shí)。帶有name屬性的插槽被稱為具名插槽具名插槽語(yǔ)法：組件插槽具名插槽：為了區(qū)分不同插槽對(duì)應(yīng)的渲染內(nèi)容，可使用slot元素的name屬性，為每個(gè)插槽分配唯一標(biāo)識(shí)。帶有name屬性的插槽被稱為具名插槽具名插槽語(yǔ)法：組件插槽簡(jiǎn)寫(xiě)方式：v-slot指令簡(jiǎn)寫(xiě)為“#”具名插槽示例：利用具名插槽模擬手機(jī)App不同布局的頂部導(dǎo)航條組件插槽示例執(zhí)行效果組件插槽作用域插槽：攜帶數(shù)據(jù)的插槽也稱為作用域插槽作用域插槽的作用：由子組件提供參數(shù)給父組件，父組件利用這些參數(shù)按需進(jìn)行不同的內(nèi)容填充，從而使得父組件可以訪問(wèn)子組件作用域中的數(shù)據(jù)作用域插槽的語(yǔ)法組件插槽組件插槽作用域插槽示例：利用作用域插槽實(shí)現(xiàn)父組件訪問(wèn)子組件數(shù)據(jù)示例執(zhí)行結(jié)果動(dòng)態(tài)組件動(dòng)態(tài)組件：指Vue應(yīng)用程序運(yùn)行過(guò)程中，在同一元素內(nèi)需要?jiǎng)討B(tài)切換不同組件動(dòng)態(tài)組件作用：常用于實(shí)現(xiàn)網(wǎng)頁(yè)中的tab選項(xiàng)卡布局動(dòng)態(tài)組件語(yǔ)法：動(dòng)態(tài)組件動(dòng)態(tài)組件示例：使用動(dòng)態(tài)組件，實(shí)現(xiàn)菜單項(xiàng)內(nèi)容的切換示例執(zhí)行效果動(dòng)態(tài)組件項(xiàng)目3自定義頁(yè)面圖標(biāo)樣式需求描述歷史名城游網(wǎng)站頁(yè)面布局中有多處需使用字體圖標(biāo)“+”，要求字體圖標(biāo)形狀相同，但在不同頁(yè)面中可能會(huì)調(diào)整其顏色或大小項(xiàng)目3自定義頁(yè)面圖標(biāo)樣式實(shí)現(xiàn)思路

頁(yè)面布局分為上下兩個(gè)div區(qū)域，上面的div區(qū)域包括標(biāo)題“賞析”和“更多分類+”，下面的div區(qū)域使用li元素實(shí)現(xiàn)兩個(gè)作品的展示引入第三方RemixIcon開(kāi)源圖標(biāo)庫(kù)。采用組件對(duì)字體圖標(biāo)樣式設(shè)置進(jìn)行封裝，實(shí)現(xiàn)字體圖標(biāo)及其樣式的按需設(shè)置。通過(guò)props選項(xiàng)來(lái)接收使用者的圖標(biāo)樣式、字體類型和字體大小參數(shù)；在模板結(jié)構(gòu)中，聲明插槽用于填充不同布局所需要的字體圖標(biāo)，使用v-bind指令（:指令）將圖標(biāo)樣式、字體類型和字體大小參數(shù)與props選項(xiàng)中的屬性進(jìn)行綁定在根組件中調(diào)用字體圖標(biāo)組件，并傳入所需的圖標(biāo)樣式、字體類型和字體大小參數(shù)項(xiàng)目3自定義頁(yè)面圖標(biāo)樣式任務(wù)3-1構(gòu)建頁(yè)面布局項(xiàng)目3自定義頁(yè)面圖標(biāo)樣式任務(wù)3-2實(shí)現(xiàn)自定義圖標(biāo)樣式定義字體圖標(biāo)組件的模板結(jié)構(gòu)創(chuàng)建根組件和字體圖標(biāo)組件項(xiàng)目3自定義頁(yè)面圖標(biāo)樣式任務(wù)3-2實(shí)現(xiàn)自定義圖標(biāo)樣式（續(xù)）使用字體圖標(biāo)組件同步訓(xùn)練請(qǐng)編寫(xiě)一個(gè)自定義頁(yè)面文字樣式組件，并將其應(yīng)用在頁(yè)面的標(biāo)題和文字上單元小結(jié)組件是Vue應(yīng)用程序的基本結(jié)構(gòu)單元。每個(gè)組件根據(jù)所負(fù)責(zé)功能的需求，構(gòu)建自己的CSS、HTML和JavaScript代碼，以及收集圖片等相關(guān)資源。組件可理解為實(shí)現(xiàn)完整應(yīng)用的局部功能代碼和資源的集合。組件由以下3個(gè)部分構(gòu)成。template：組件的模板結(jié)構(gòu)，負(fù)責(zé)頁(yè)面布局，需定義到<template>標(biāo)簽對(duì)中。它是必選項(xiàng)；script：組件的JavaScript行為，負(fù)責(zé)控制頁(yè)面布局及其樣式，需定義到<script>標(biāo)簽對(duì)中；style：組件的CSS，負(fù)責(zé)頁(yè)面布局樣式，需定義到<style>標(biāo)簽對(duì)中。單元小結(jié)根據(jù)Vue組件機(jī)制，組件的使用流程如下：組件定義：利用JavaScript創(chuàng)建組件對(duì)象；組件注冊(cè)：按照使用范圍，對(duì)組件進(jìn)行全局或局部注冊(cè)，并給它起一個(gè)組件注冊(cè)名；組件調(diào)用：以組件注冊(cè)名為元素名，在HTML頁(yè)面中調(diào)用該組件。組件是以包含Vue特定選項(xiàng)的JavaScript對(duì)象定義的。組件可以包含的選項(xiàng)有data、methods、template等。組件間數(shù)據(jù)傳遞常見(jiàn)的方式是父組件傳值給子組件，子組件需要通過(guò)props選項(xiàng)聲明屬性，來(lái)實(shí)現(xiàn)對(duì)父組件數(shù)據(jù)的接收。單元小結(jié)組件事件是一種由開(kāi)發(fā)者設(shè)計(jì)觸發(fā)條件的自定義事件。通過(guò)自定義事件可以實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)。組件事件的監(jiān)聽(tīng)與處理的實(shí)現(xiàn)流程是由子組件通過(guò)emits選項(xiàng)聲明自定義事件，再調(diào)用$emit函數(shù)觸發(fā)自定義事件并傳遞數(shù)據(jù)給父組件，而父組件則通過(guò)調(diào)用子組件，監(jiān)聽(tīng)自定義事件以獲取子組件數(shù)據(jù)。如果父組件需要訪問(wèn)子組件數(shù)據(jù)，也可以在子組件中使用slot元素開(kāi)啟一個(gè)插槽。當(dāng)父組件調(diào)用子組件時(shí)，將父組件內(nèi)容替換子組件的slot元素即可。插槽分為默認(rèn)、具名和作用域插槽3種。使用component元素及其is屬性，可以實(shí)現(xiàn)同一元素內(nèi)不同組件間的動(dòng)態(tài)切換。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元四

組件進(jìn)階目錄組件生命周期Teleport項(xiàng)目4彈出式登錄框組件生命周期組件生命周期：組件的創(chuàng)建、掛載、更新到銷毀的一系列過(guò)程生命周期鉤子函數(shù)鉤子函數(shù)：在系統(tǒng)消息觸發(fā)時(shí)立即被系統(tǒng)調(diào)用的函數(shù)生命周期鉤子函數(shù)：Vue所提供的組件內(nèi)置函數(shù)，它會(huì)在組件生命周期某個(gè)階段進(jìn)入某個(gè)狀態(tài)時(shí)立即自動(dòng)執(zhí)行組件生命周期各個(gè)階段，主要鉤子函數(shù)的執(zhí)行過(guò)程組件生命周期組件生命周期的4個(gè)階段：創(chuàng)建、掛載、更新和銷毀創(chuàng)建階段的鉤子函數(shù)beforeCreate：在組件事件和生命周期鉤子函數(shù)初始化完成之后被調(diào)用

created：在組件選項(xiàng)配置完成之后被調(diào)用掛載階段的鉤子函數(shù)beforeMount：在內(nèi)存中生成虛擬DOM結(jié)構(gòu)之后被調(diào)用mounted：虛擬DOM結(jié)構(gòu)替換掛載點(diǎn)內(nèi)元素之后被調(diào)用組件生命周期更新階段beforeUpdate：在響應(yīng)式數(shù)據(jù)發(fā)生改變，且虛擬DOM結(jié)構(gòu)更新之后被調(diào)用updated：在更新掛載點(diǎn)內(nèi)元素之后被調(diào)用銷毀階段beforeUnmount：組件實(shí)例被銷毀之前調(diào)用unmounted：組件實(shí)例被銷毀之后調(diào)用組件生命周期實(shí)例創(chuàng)建作用：創(chuàng)建階段對(duì)組件進(jìn)行了初始化，完成了組件實(shí)例創(chuàng)建工作步驟：對(duì)組件事件和生命周期鉤子函數(shù)進(jìn)行初始化，之后立即調(diào)用beforeCreate函數(shù)對(duì)組件選項(xiàng)的配置進(jìn)行初始化，之后立即調(diào)用created函數(shù)組件生命周期實(shí)例創(chuàng)建（續(xù)）示例：組件實(shí)例創(chuàng)建過(guò)程中生命周期鉤子函數(shù)的應(yīng)用組件生命周期示例運(yùn)行結(jié)果頁(yè)面掛載作用：掛載階段根據(jù)組件的數(shù)據(jù)和模板結(jié)構(gòu)，完成將組件實(shí)例掛載到頁(yè)面中的工作步驟基于數(shù)據(jù)和模板結(jié)構(gòu)，在內(nèi)存中生成DOM結(jié)構(gòu)，即虛擬DOM結(jié)構(gòu)，之后立即調(diào)用beforeMount函數(shù)用虛擬DOM結(jié)構(gòu)替換掛載點(diǎn)內(nèi)元素，之后立即調(diào)用mounted函數(shù)組件生命周期頁(yè)面掛載（續(xù)）示例：將組件實(shí)例掛載到頁(yè)面的過(guò)程中生命周期鉤子函數(shù)的應(yīng)用組件生命周期示例運(yùn)行結(jié)果數(shù)據(jù)更新作用：每當(dāng)組件的數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)更新虛擬DOM結(jié)構(gòu)步驟：根據(jù)數(shù)據(jù)變化，更新虛擬DOM結(jié)構(gòu)，之后立即調(diào)用beforeUpdate函數(shù)將虛擬DOM結(jié)構(gòu)更新的部分，重新渲染到頁(yè)面中，之后立即調(diào)用updated函數(shù)組件生命周期數(shù)據(jù)更新（續(xù)）示例：組件實(shí)例數(shù)據(jù)更新過(guò)程中生命周期鉤子函數(shù)的應(yīng)用組件生命周期示例運(yùn)行結(jié)果組件實(shí)例銷毀步驟：組件實(shí)例被銷毀之前，Vue會(huì)自動(dòng)調(diào)用beforeUnmount函數(shù)，此時(shí)組件實(shí)例依然保持全部的功能在組件實(shí)例被銷毀之后，Vue會(huì)立即調(diào)用unmounted函數(shù)組件生命周期組件實(shí)例銷毀（續(xù)）示例：組件實(shí)例銷毀過(guò)程中生命周期鉤子函數(shù)的應(yīng)用組件生命周期示例運(yùn)行結(jié)果組件生命周期基本用法作用：將組件模板結(jié)構(gòu)的部分內(nèi)容“傳送”到該組件渲染區(qū)域之外的地方，而不受當(dāng)前組件布局結(jié)構(gòu)的影響使用方法：在組件模板結(jié)構(gòu)中，增加teleport組件元素，將要控制位置的頁(yè)面元素作為其子元素，同時(shí)設(shè)置其屬性to為目標(biāo)位置Teleport內(nèi)置組件語(yǔ)法例如：Teleport內(nèi)置組件實(shí)現(xiàn)模態(tài)框效果Teleport內(nèi)置組件模態(tài)框效果結(jié)合組件使用Teleport特點(diǎn)：Teleport所改變的是組件模板結(jié)構(gòu)中部分內(nèi)容的渲染位置，并不影響組件原有數(shù)據(jù)以及與其他組件間的邏輯關(guān)系Teleport內(nèi)置組件示例：構(gòu)建模態(tài)框組件，并使用Teleport保證組件置于頁(yè)面頂層Teleport內(nèi)置組件示例運(yùn)行結(jié)果Teleport內(nèi)置組件需求描述在歷史名城網(wǎng)站頁(yè)面右上角顯示“注冊(cè)|登錄”，單擊“登錄”，彈出登錄框，它將保持在頁(yè)面的最上層位置。該登錄框包括用戶名和密碼輸入框，以及“登錄”和“取消”按鈕，單擊“登錄”或“取消”按鈕時(shí)登錄框窗體關(guān)閉項(xiàng)目4彈出式登錄框?qū)崿F(xiàn)思路使用表單（form）元素構(gòu)建用戶登錄窗體。將用戶登錄窗體封裝成一個(gè)模態(tài)框組件，通過(guò)props選項(xiàng)實(shí)現(xiàn)使用者控制登錄框的彈出和關(guān)閉的功能，同時(shí)利用Teleport組件優(yōu)化登錄框的全屏渲染效果項(xiàng)目4彈出式登錄框項(xiàng)目4彈出式登錄框任務(wù)4-1構(gòu)建頁(yè)面布局

項(xiàng)目4彈出式登錄框任務(wù)4-2創(chuàng)建登錄框組件定義登錄框組件的模板結(jié)構(gòu)定義和注冊(cè)組件同步訓(xùn)練請(qǐng)編寫(xiě)Vue應(yīng)用程序，要求單擊頁(yè)面上“我要注冊(cè)”按鈕，彈出注冊(cè)框，該注冊(cè)框包含4個(gè)輸入框（用戶名、密碼、郵箱和手機(jī)號(hào)碼）和兩個(gè)按鈕（“注冊(cè)”和“取消”），單擊“注冊(cè)”按鈕時(shí)關(guān)閉注冊(cè)框，單擊“取消”按鈕時(shí)，清空所有輸入信息單元小結(jié)組件從創(chuàng)建到銷毀的一系列過(guò)程被稱為組件的生命周期。在組件生命周期各個(gè)節(jié)點(diǎn)執(zhí)行的函數(shù)，被稱為生命周期鉤子函數(shù)，它是Vue所提供的組件內(nèi)置函數(shù)，會(huì)在組件在生命周期某個(gè)階段進(jìn)入某個(gè)狀態(tài)時(shí)立即自動(dòng)執(zhí)行。組件生命周期包括4個(gè)階段：創(chuàng)建、掛載、更新和銷毀。對(duì)應(yīng)地我們將生命周期鉤子函數(shù)分為4組：（1）beforeCreate，created；（2）beforeMount，mounted；（3）beforeUpdate，updated；（4）beforeUnmount，unmounted。Telport內(nèi)置組件的作用是將組件模板結(jié)構(gòu)的部分內(nèi)容“傳送”到該組件渲染區(qū)域之外的地方，而不受當(dāng)前組件布局結(jié)構(gòu)的影響。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元五

過(guò)渡和動(dòng)畫(huà)目錄認(rèn)識(shí)過(guò)渡和動(dòng)畫(huà)實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)多個(gè)元素和組件過(guò)渡列表過(guò)渡項(xiàng)目5會(huì)員中心頁(yè)面認(rèn)識(shí)過(guò)渡和動(dòng)畫(huà)Vue過(guò)渡和動(dòng)畫(huà)：利用Vue內(nèi)置組件Transition和TransitionGroup，在頁(yè)面組件中元素顯示狀態(tài)發(fā)生改變時(shí)，元素不會(huì)直接顯示和隱藏，而是伴隨一個(gè)過(guò)渡或動(dòng)畫(huà)效果，該效果的核心原理是CSS的類（class）選擇器認(rèn)識(shí)過(guò)渡和動(dòng)畫(huà)回顧C(jī)SS3的transition和animation屬性相關(guān)知識(shí)樣式屬性預(yù)設(shè)值均包括none（無(wú)屬性）、all（所有屬性）和特定屬性，默認(rèn)值為all時(shí)間曲線都可以利用cubic_x0002_bezier函數(shù)自行定義，也可以使用預(yù)設(shè)值，包括linear（勻速）、ease（開(kāi)始慢、中間快、結(jié)束慢）、ease-in（開(kāi)始慢）、ease-out（結(jié)束慢）、ease-in-out（開(kāi)始慢、結(jié)束慢），默認(rèn)值為ease。animation屬性通過(guò)@keyframes屬性逐步改變?cè)氐腃SS樣式來(lái)繪制動(dòng)畫(huà)的，@keyframes屬性值通常采用百分比方式定義實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)Transition組件實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)的方式：當(dāng)它包裹一般元素或通過(guò)默認(rèn)插槽傳遞的組件時(shí)，被包裹者就可應(yīng)用進(jìn)入和離開(kāi)的動(dòng)畫(huà)效果特點(diǎn)：只能包裹單個(gè)元素或組件進(jìn)入和離開(kāi)狀態(tài)觸發(fā)方式由v-if指令控制元素的插入和刪除操作。由v-show指令切換元素的顯示和隱藏狀態(tài)。由內(nèi)置組件Component控制組件間的動(dòng)態(tài)切換。實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)Transition組件的語(yǔ)法Transition組件的常用屬性name：用于自動(dòng)生成過(guò)渡樣式類（class）名appear：表示是否在初始渲染時(shí)使用過(guò)渡，默認(rèn)值為falsecss：表示是否使用過(guò)渡樣式類，默認(rèn)值為truetype：用于指定過(guò)渡事件類型，偵聽(tīng)過(guò)渡何時(shí)結(jié)束，有效值為“transition”和“animation”mode：表示控制離開(kāi)/進(jìn)入過(guò)渡的模式，有效值為“out-in”和“in-out”，默認(rèn)當(dāng)前元素和新元素的過(guò)渡動(dòng)作同時(shí)進(jìn)行duration：指定過(guò)渡的持續(xù)時(shí)間實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)

Transition實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)的原理當(dāng)插入或刪除被包裹在Transition組件內(nèi)的元素時(shí)，Vue首先判斷目標(biāo)元素是否應(yīng)用了一個(gè)CSS3過(guò)渡/動(dòng)畫(huà)效果。如果是，則會(huì)在某個(gè)時(shí)間點(diǎn)自動(dòng)添加或移除對(duì)應(yīng)的樣式類，否則，將會(huì)調(diào)用對(duì)應(yīng)的JavaScript鉤子函數(shù)。如果上述情況均不存在，則下一幀將立即執(zhí)行插入或刪除元素的操作實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)過(guò)渡和動(dòng)畫(huà)樣式類6個(gè)樣式類生效的時(shí)間點(diǎn)實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)Transition結(jié)合CSS3實(shí)現(xiàn)過(guò)渡示例采用過(guò)渡方式，實(shí)現(xiàn)字符串“HelloWorld”的顯示和隱藏當(dāng)單擊“change”按鈕時(shí)，字符串在右側(cè)出現(xiàn)并向左移，以慢速結(jié)束，過(guò)程中字體顏色變?yōu)榧t色；再次單擊“change”按鈕時(shí)，字符串向右移動(dòng)一段距離后消失，但變化速度與左移過(guò)程的不太一樣，過(guò)程中字體顏色變?yōu)榧t色示例運(yùn)行結(jié)果實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)

Transition結(jié)合CSS3實(shí)現(xiàn)動(dòng)畫(huà)示例以動(dòng)畫(huà)方式，實(shí)現(xiàn)字符串“HelloWorld”的顯示和隱藏在過(guò)渡示例基礎(chǔ)上，修改style部分實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)Transition結(jié)合JavaScript鉤子函數(shù)JavaScript鉤子函數(shù)（1）before-enter：進(jìn)入過(guò)渡/動(dòng)畫(huà)開(kāi)始前執(zhí)行的方法（2）enter：進(jìn)入過(guò)渡/動(dòng)畫(huà)過(guò)程中執(zhí)行的方法（3）after-enter：進(jìn)入過(guò)渡/動(dòng)畫(huà)完成后執(zhí)行的方法（4）enter-cancelled：進(jìn)入過(guò)渡/動(dòng)畫(huà)取消時(shí)執(zhí)行的方法（5）before-leave：離開(kāi)過(guò)渡/動(dòng)畫(huà)開(kāi)始前執(zhí)行的方法（6）leave：離開(kāi)過(guò)渡/動(dòng)畫(huà)過(guò)程中執(zhí)行的方法（7）after-leave：離開(kāi)過(guò)渡/動(dòng)畫(huà)完成后執(zhí)行的方法（8）leave-cancelled：離開(kāi)過(guò)渡/動(dòng)畫(huà)取消時(shí)執(zhí)行的方法實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)示例：同時(shí)使用JavaScript鉤子函數(shù)和CSS3，實(shí)現(xiàn)div區(qū)塊顯示和隱藏的動(dòng)態(tài)過(guò)渡效果當(dāng)單擊“change”按鈕時(shí)，div區(qū)塊逐漸出現(xiàn)，以先慢后快再慢的速度，沿x軸移動(dòng)200px停止。同時(shí)，在控制臺(tái)上依次顯示鉤子函數(shù)handleBeforeEnter、handleEnter和handleAfterEnter執(zhí)行的輸出信息。當(dāng)再次單擊“change”按鈕時(shí)，div區(qū)塊再沿x軸移動(dòng)100px，且顏色逐漸變成藍(lán)色，最終消失示例運(yùn)行結(jié)果實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)示例：僅使用JavaScript鉤子函數(shù)，實(shí)現(xiàn)div區(qū)塊顯示和隱藏的動(dòng)態(tài)動(dòng)畫(huà)效果

基于JavaScript鉤子函數(shù)實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)多個(gè)不同類型的元素實(shí)現(xiàn)方式：利用v-if/v-else進(jìn)行元素間的切換，使這些元素應(yīng)用同一個(gè)過(guò)渡效果示例多個(gè)元素過(guò)渡單擊“隱藏城市列表”按鈕時(shí)，城市列表會(huì)逐漸消失，之后逐漸顯示“無(wú)數(shù)據(jù)”提示信息；單擊“顯示城市列表”按鈕時(shí)，“無(wú)數(shù)據(jù)”提示信息則逐漸消失，城市列表會(huì)逐漸恢復(fù)顯示示例運(yùn)行結(jié)果多個(gè)元素過(guò)渡多個(gè)相同類型的元素實(shí)現(xiàn)方式：通過(guò)設(shè)置key屬性值區(qū)分相同類型的不同元素，實(shí)現(xiàn)過(guò)渡效果示例多個(gè)元素過(guò)渡分別單擊3個(gè)按鈕，當(dāng)前顯示的信息會(huì)逐漸消失，與按鈕名稱對(duì)應(yīng)的另一個(gè)信息會(huì)逐漸顯示出來(lái)示例運(yùn)行結(jié)果多個(gè)元素過(guò)渡多個(gè)組件實(shí)現(xiàn)方式：利用內(nèi)置組件Component的is屬性，輪流綁定應(yīng)用過(guò)渡效果的組件名，實(shí)現(xiàn)過(guò)渡效果實(shí)現(xiàn)方法多個(gè)組件過(guò)渡列表過(guò)渡在一個(gè)元素或組件被插入和移出v-for列表時(shí)應(yīng)用過(guò)渡，從而實(shí)現(xiàn)動(dòng)態(tài)列表效果TransitionGroup組件作用：用于在組件更改時(shí)添加動(dòng)態(tài)效果的組件，它可以包裹多個(gè)組件或元素語(yǔ)法

屬性tag屬性：表示使用何種元素對(duì)TransitionGroup組件內(nèi)的多個(gè)元素進(jìn)行內(nèi)層包裹，默認(rèn)使用span元素。v-move樣式類：用于設(shè)置當(dāng)key對(duì)應(yīng)的元素位置發(fā)生變化時(shí)的樣式列表過(guò)渡利用TransitionGroup組件實(shí)現(xiàn)列表過(guò)渡的步驟創(chuàng)建一個(gè)包含列表的元素為每一項(xiàng)設(shè)置一個(gè)key使用v-for指令循環(huán)渲染列表中的每一項(xiàng)使用TransitionGroup組件將這個(gè)容器包裹起來(lái)為這個(gè)TransitionGroup組件設(shè)置一個(gè)name定義列表項(xiàng)的進(jìn)入和離開(kāi)過(guò)渡效果的CSS樣式列表過(guò)渡利用TransitionGroup組件實(shí)現(xiàn)列表過(guò)渡(續(xù))示例：列表應(yīng)用過(guò)渡效果

列表過(guò)渡顯示一組數(shù)字，單擊“新增”按鈕時(shí)，在數(shù)字列表的隨機(jī)位置上會(huì)增加一個(gè)數(shù)字；單擊“移除”按鈕時(shí)，則會(huì)隨機(jī)地移除一個(gè)數(shù)字。當(dāng)增加/刪除操作發(fā)生在列表中間的某個(gè)位置上時(shí)，會(huì)看到整個(gè)列表調(diào)整的過(guò)渡效果示例運(yùn)行結(jié)果列表過(guò)渡需求描述會(huì)員中心頁(yè)面包括左側(cè)導(dǎo)航欄和右側(cè)內(nèi)容，通過(guò)導(dǎo)航欄切換到“我的賬戶”和“我的游記”，并帶有過(guò)渡效果；“我的賬戶”中可以動(dòng)態(tài)增加或刪除“郵箱”字段，同樣也要求使用過(guò)渡效果項(xiàng)目5會(huì)員中心頁(yè)面實(shí)現(xiàn)思路采用局部組件，構(gòu)建會(huì)員中心頁(yè)面的“我的賬戶”和“我的游記”兩個(gè)部分由于“我的賬戶”和“我的游記”組件切換時(shí)，同一時(shí)間只需渲染其中一個(gè)，符合Transition組件應(yīng)用條件，而“我的賬戶”表單中“郵箱”字段增加/刪除所形成的列表，則需要TransitionGroup組件才能實(shí)現(xiàn)過(guò)渡效果項(xiàng)目5會(huì)員中心頁(yè)面任務(wù)5-1構(gòu)建頁(yè)面布局

項(xiàng)目5會(huì)員中心頁(yè)面任務(wù)5-2創(chuàng)建局部組件

項(xiàng)目5會(huì)員中心頁(yè)面定義組件模板任務(wù)5-2創(chuàng)建局部組件（續(xù)）項(xiàng)目5會(huì)員中心頁(yè)面定義局部組件同步訓(xùn)練請(qǐng)編寫(xiě)一個(gè)登錄頁(yè)面，其中包含3個(gè)輸入框：用戶名、密碼和驗(yàn)證碼。只有當(dāng)用戶輸入密碼錯(cuò)誤時(shí)，才要求輸入驗(yàn)證碼，并使用Transition組件實(shí)現(xiàn)驗(yàn)證碼輸入框顯示的過(guò)渡效果單元小結(jié)在Vue中實(shí)現(xiàn)過(guò)渡和動(dòng)畫(huà)是指利用Vue內(nèi)置組件Transition和TransitionGroup來(lái)實(shí)現(xiàn)CSS3過(guò)渡和動(dòng)畫(huà)，使得元素顯示狀態(tài)發(fā)生改變時(shí)，會(huì)伴隨一個(gè)過(guò)渡或動(dòng)畫(huà)的效果，從而有效地提升用戶體驗(yàn)。Transition組件可應(yīng)用于單個(gè)元素、多個(gè)元素或多個(gè)組件在進(jìn)入和離開(kāi)DOM時(shí)的過(guò)渡和動(dòng)畫(huà)。Transition組件通過(guò)包裹一個(gè)或多個(gè)元素，結(jié)合定義樣式類，實(shí)現(xiàn)元素狀態(tài)變化的過(guò)渡效果。Transition組件與CSS3的animation和@keyframes屬性配合，可在元素狀態(tài)變化過(guò)程中實(shí)現(xiàn)動(dòng)畫(huà)效果。單元小結(jié)Vue提供了6個(gè)樣式類，其中v-enter-from、v-enter-active、v-enter-to用于定義進(jìn)入階段的開(kāi)始、生效和結(jié)束狀態(tài)的樣式；v-leave-from、v-leave-active、v-leave-to用于定義離開(kāi)階段的開(kāi)始、生效和結(jié)束狀態(tài)的樣式。Transition組件與JavaScript鉤子函數(shù)相結(jié)合，還可以實(shí)現(xiàn)動(dòng)態(tài)過(guò)渡和動(dòng)態(tài)動(dòng)畫(huà)。JavaScript鉤子函數(shù)共有8個(gè)，其中before-enter、enter、after-enter和enter-cancelled分別在進(jìn)入階段的開(kāi)始前、運(yùn)行時(shí)、完成后和被取消時(shí)被調(diào)用；before-leave、leave、after-leave和leave-cancelled則是在離開(kāi)階段的開(kāi)始前、運(yùn)行時(shí)、完成后和被取消時(shí)被調(diào)用。TransitionGroup組件可以將過(guò)渡效果應(yīng)用到列表的構(gòu)建過(guò)程中，即在一個(gè)元素或組件被插入和移出v-for列表時(shí)應(yīng)用過(guò)渡，從而實(shí)現(xiàn)動(dòng)態(tài)列表效果。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元六

組合式API目錄組合式API響應(yīng)性APIprovide/inject響應(yīng)式傳值項(xiàng)目6查詢歷史名城相關(guān)詩(shī)詞認(rèn)識(shí)組合式API

Vue編寫(xiě)組件方式：選項(xiàng)式API和組合式API兩者對(duì)比認(rèn)識(shí)組合式API選項(xiàng)式API組合式API認(rèn)識(shí)組合式API組合式API：包含一組API，允許開(kāi)發(fā)者使用導(dǎo)入的函數(shù)而非聲明選項(xiàng)的方式來(lái)編寫(xiě)組件。其包含的API如下。生命周期鉤子函數(shù)：在生命周期鉤子函數(shù)名之前加“on”，并將函數(shù)名首字母改為大寫(xiě)，使得在組件中可以訪問(wèn)這些函數(shù)，如onMounted和onUnmounted函數(shù)響應(yīng)性API：用于創(chuàng)建響應(yīng)式數(shù)據(jù)、計(jì)算屬性和數(shù)據(jù)監(jiān)聽(tīng)器，如ref和reactive函數(shù)依賴注入：允許開(kāi)發(fā)者在使用響應(yīng)性API的同時(shí)，利用provide/inject依賴注入系統(tǒng)setup函數(shù)setup函數(shù)作用：Vue3所提供的新的組件選項(xiàng)，它是組件中組合式API的起點(diǎn)。該函數(shù)在組件實(shí)例被創(chuàng)建之前、props被解析之后立即被調(diào)用，且僅執(zhí)行一次。它替代了生命周期鉤子函數(shù)beforeCreate和created函數(shù)結(jié)構(gòu)setup函數(shù)參數(shù)propsprops本身是子組件中的選項(xiàng)，其所定義的屬性用于接收父組件傳遞過(guò)來(lái)的數(shù)據(jù)，props以setup函數(shù)的參數(shù)形式將這些數(shù)據(jù)提供給setup函數(shù)使用

示例瀏覽器頁(yè)面上顯示“這是一個(gè)局部組件”，控制臺(tái)中輸出了“父組件傳來(lái)的信息”，若修改了父組件中pname的值，控制臺(tái)的輸出內(nèi)容也會(huì)更新示例運(yùn)行結(jié)果setup函數(shù)setup函數(shù)參數(shù)contextcontext是一個(gè)普通的JavaScript對(duì)象，可為setup函數(shù)提供其他可能有用的值，包括三個(gè)屬性attrs：傳遞給當(dāng)前組件的非props屬性slots：具有模板插槽渲染功能的對(duì)象emit：當(dāng)前組件發(fā)出事件的方法示例瀏覽器頁(yè)面上顯示“這是一個(gè)局部組件”，控制臺(tái)中輸出了“局部組件名稱”以及context的3個(gè)屬性對(duì)象示例運(yùn)行結(jié)果setup函數(shù)訪問(wèn)生命周期鉤子函數(shù)可訪問(wèn)的鉤子函數(shù)：beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted訪問(wèn)方法：在每個(gè)鉤子函數(shù)名之前加上“on”，并將函數(shù)名首字母改為大寫(xiě)訪問(wèn)生命周期鉤子函數(shù)訪問(wèn)mounted函數(shù)示例瀏覽器頁(yè)面和控制臺(tái)均顯示“這是一個(gè)局部組件”信息，且控制臺(tái)還輸出了字符串“mountedisinvoked”示例運(yùn)行結(jié)果響應(yīng)性原理響應(yīng)性是一種自動(dòng)響應(yīng)數(shù)據(jù)變化的代碼機(jī)制。其本質(zhì)工作是監(jiān)聽(tīng)數(shù)據(jù)的變化，并做出相應(yīng)的處理副作用函數(shù)：它是會(huì)引起副作用的函數(shù)，它的執(zhí)行會(huì)直接或間接影響該函數(shù)作用域之外的部分，例如：響應(yīng)性原理副作用函數(shù)實(shí)現(xiàn)對(duì)數(shù)據(jù)響應(yīng)需要滿足的條件effect函數(shù)的執(zhí)行觸發(fā)對(duì)obj.text的讀取操作修改obj.text的值，觸發(fā)effect函數(shù)的重新執(zhí)行，并影響它的執(zhí)行結(jié)果Vue3中有3種effect函數(shù)，它們分別對(duì)應(yīng)視圖渲染、計(jì)算屬性和數(shù)據(jù)監(jiān)聽(tīng)器響應(yīng)性原理ProxyProxy被稱為代理，它包裝了另一個(gè)對(duì)象，即在該對(duì)象和外界之間設(shè)置攔截，以便對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和修改定義Proxy對(duì)象的語(yǔ)法

響應(yīng)性原理響應(yīng)式數(shù)據(jù)的實(shí)現(xiàn)過(guò)程

響應(yīng)性原理實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)示例瀏覽器頁(yè)面上先是顯示“helloworld”，3s后變成了“helloVue.js”示例運(yùn)行結(jié)果響應(yīng)性API的應(yīng)用常用API有：reactive、ref、toRef、toRefs、computed和watch等reactive和ref作用：在setup函數(shù)中，對(duì)所定義的變量進(jìn)行包裝并返回響應(yīng)式數(shù)據(jù)reactive：根據(jù)傳入的對(duì)象，返回一個(gè)深度響應(yīng)式對(duì)象ref：只接收一個(gè)基本類型數(shù)據(jù)，并返回一個(gè)響應(yīng)式且可變的ref對(duì)象響應(yīng)性API的應(yīng)用ref和reactive應(yīng)用示例在頁(yè)面上分別單擊“修改title”“修改student”和“修改product”按鈕，頁(yè)面中的title、student和product的值會(huì)隨之發(fā)生變化示例運(yùn)行結(jié)果響應(yīng)性API的應(yīng)用響應(yīng)性API的應(yīng)用toRef和toRefs作用：將響應(yīng)式對(duì)象中的屬性也轉(zhuǎn)換為響應(yīng)式的，但toRef只能轉(zhuǎn)換一個(gè)屬性，而toRefs可以處理該對(duì)象的所有屬性toRef接收兩個(gè)參數(shù)(源響應(yīng)式對(duì)象和屬性名)，返回一個(gè)ref數(shù)據(jù)，并且轉(zhuǎn)換后的值和轉(zhuǎn)換前的值是關(guān)聯(lián)的toRefs接收一個(gè)對(duì)象類型參數(shù)，返回的結(jié)果對(duì)象的每個(gè)屬性都是指向原始對(duì)象相應(yīng)屬性的ref對(duì)象響應(yīng)性API的應(yīng)用toRef和toRefs應(yīng)用示例分別單擊“修改title”“修改student”和“修改product”按鈕，頁(yè)面中的title、student和product的值會(huì)隨之發(fā)生變化示例運(yùn)行結(jié)果響應(yīng)性API的應(yīng)用響應(yīng)性API的應(yīng)用computed作用：在setup函數(shù)中的作用仍然是緩存數(shù)據(jù)，但使用方法有些不同瀏覽器頁(yè)面上顯示count為1，computedCount為2，每單擊一次“遞增”按鈕，count和computedCount均會(huì)增加1示例運(yùn)行結(jié)果響應(yīng)性API的應(yīng)用響應(yīng)性API的應(yīng)用watch作用：仍用于偵聽(tīng)指定的數(shù)據(jù)源，并在回調(diào)函數(shù)中調(diào)用副作用函數(shù)。但用法與選項(xiàng)式API中的有些不同語(yǔ)法：watch接收的參數(shù)是監(jiān)聽(tīng)對(duì)象和回調(diào)函數(shù)，其中監(jiān)聽(tīng)對(duì)象可以是使用ref或reactive定義的響應(yīng)式對(duì)象、具有返回值的getter函數(shù)，或是由這些類型的值組成的數(shù)組；回調(diào)函數(shù)有兩個(gè)參數(shù)：監(jiān)聽(tīng)對(duì)象的原始值和更新值響應(yīng)性API的應(yīng)用watch（續(xù)）監(jiān)聽(tīng)使用ref定義的對(duì)象監(jiān)聽(tīng)使用reactive定義的對(duì)象的某個(gè)屬性provide/inject響應(yīng)式傳值provide和inject組合使用的作用實(shí)現(xiàn)跨層傳遞數(shù)據(jù)，其中provide提供數(shù)據(jù)和函數(shù)，為后代組件所用；inject則為后代組件提供注入的入口，所注入的即provide所提供的數(shù)據(jù)和函數(shù)示例：利用provide和inject實(shí)現(xiàn)跨層傳遞數(shù)據(jù)在頁(yè)面上每次單擊父組件中的“遞增”按鈕時(shí)，父、子和孫組件顯示的數(shù)據(jù)均同時(shí)遞增10，單擊孫組件中的“遞減”按鈕時(shí)，3個(gè)組件也同時(shí)遞減10示例運(yùn)行結(jié)果provide/inject響應(yīng)式傳值程序主要代碼需求描述在歷史名城游網(wǎng)站的詩(shī)詞欄目中，要求根據(jù)用戶所選區(qū)域里的城市名稱，查詢相關(guān)的詩(shī)詞，并顯示出詩(shī)詞的名稱、作者及其所屬朝代和內(nèi)容項(xiàng)目6查詢歷史名城相關(guān)詩(shī)詞實(shí)現(xiàn)思路將查詢處理部分構(gòu)建成局部組件，作為根組件的子組件根組件通過(guò)props將所選區(qū)域里的城市列表傳遞給子組件，作為用戶選擇城市的依據(jù)根據(jù)查詢結(jié)果，利用計(jì)算屬性computed更新某個(gè)城市相關(guān)詩(shī)詞的數(shù)量。采用v-for指令和dl元素顯示所查詢出來(lái)的詩(shī)詞列表項(xiàng)目6查詢歷史名城相關(guān)詩(shī)詞任務(wù)6-1采用選項(xiàng)式API實(shí)現(xiàn)項(xiàng)目6查詢歷史名城相關(guān)詩(shī)詞定義組件模板定義查詢組件任務(wù)6-2利用組合式API重構(gòu)項(xiàng)目6查詢歷史名城相關(guān)詩(shī)詞項(xiàng)目6查詢歷史名城相關(guān)詩(shī)詞同步訓(xùn)練請(qǐng)利用組合式API實(shí)現(xiàn)簡(jiǎn)易計(jì)算器，其中包括加、減、乘和除運(yùn)算功能。提示：通過(guò)監(jiān)聽(tīng)輸入框（input元素）的輸入事件，實(shí)現(xiàn)運(yùn)算結(jié)果的動(dòng)態(tài)刷新。單元小結(jié)組合式API是Vue3所提供的一個(gè)非常重要的特性，它包含一組API，允許開(kāi)發(fā)者使用導(dǎo)入的函數(shù)而非聲明選項(xiàng)的方式來(lái)編寫(xiě)組件。其包含的API如下。生命周期鉤子函數(shù)：在生命周期鉤子函數(shù)之前加“on”，并將函數(shù)名首字母改為大寫(xiě)。響應(yīng)性API：用于創(chuàng)建響應(yīng)式數(shù)據(jù)、計(jì)算屬性和數(shù)據(jù)監(jiān)聽(tīng)器。依賴注入：允許開(kāi)發(fā)者在使用響應(yīng)性API的同時(shí)，利用provide/inject依賴注入系統(tǒng)。組合式API采用setup函數(shù)定義各功能的響應(yīng)式數(shù)據(jù)和功能函數(shù)，以功能邏輯點(diǎn)為單位組織相關(guān)的響應(yīng)式數(shù)據(jù)和功能函數(shù)，根據(jù)需要將它們集中在一起或獨(dú)立出去，使得代碼的結(jié)構(gòu)更為清晰，尤其適用于復(fù)雜組件的開(kāi)發(fā)。setup函數(shù)是生命周期鉤子函數(shù)，它可以訪問(wèn)除beforeCreate和created之外的其他生命周期鉤子函數(shù)，包括beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted，訪問(wèn)方式是on+首字母大寫(xiě)的生命周期鉤子函數(shù)名。

單元小結(jié)響應(yīng)性API常用的主要有reactive、ref、toRef、toRefs、computed和watch等。ref：接收基本類型數(shù)據(jù)，并返回一個(gè)響應(yīng)式且可變的對(duì)象，該對(duì)象是一個(gè)ref對(duì)象，在setup函數(shù)內(nèi)需要通過(guò)value屬性進(jìn)行訪問(wèn)。reactive：根據(jù)傳入的對(duì)象，返回一個(gè)深度響應(yīng)式對(duì)象，如果響應(yīng)式對(duì)象的屬性值發(fā)生改動(dòng)，無(wú)論嵌套層級(jí)有多深，均會(huì)觸發(fā)數(shù)據(jù)響應(yīng)。toRef和toRefs：分別用于將響應(yīng)式數(shù)據(jù)中的某個(gè)屬性或所有屬性轉(zhuǎn)換為響應(yīng)式對(duì)象，以保持屬性的響應(yīng)性，每個(gè)屬性轉(zhuǎn)換后返回的對(duì)象也是ref對(duì)象，需要通過(guò)value屬性進(jìn)行訪問(wèn)。computed：用于緩存數(shù)據(jù)，它依賴于響應(yīng)式原始數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)會(huì)觸發(fā)它的更新，得到一個(gè)全新的數(shù)據(jù)。watch：用于偵聽(tīng)指定的數(shù)據(jù)源，并在回調(diào)函數(shù)中調(diào)用副作用函數(shù)。默認(rèn)情況下，它是惰性的，即只有當(dāng)被偵聽(tīng)的源數(shù)據(jù)發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)。Vue3中將provide和inject結(jié)合使用，可以方便地實(shí)現(xiàn)跨層傳遞數(shù)據(jù)的功能，其中provide負(fù)責(zé)提供數(shù)據(jù)和函數(shù)，為后代組件所用；inject用于給后代組件注入provide所提供的數(shù)據(jù)和函數(shù)。在使用provide和inject時(shí)，仍需遵循Vue框架的單向數(shù)據(jù)流原則：在父?jìng)髯忧疤嵯拢附M件的數(shù)據(jù)發(fā)生變化會(huì)通知子組件自動(dòng)更新，而子組件不能在其內(nèi)部直接修改父組件傳遞過(guò)來(lái)的數(shù)據(jù)。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元七與后端交互——axios目錄認(rèn)識(shí)axiosaxios處理HTTP請(qǐng)求axios攔截器項(xiàng)目6

查詢旅游城市天氣認(rèn)識(shí)axios

axios是一個(gè)強(qiáng)大的HTTP庫(kù)，可以用在瀏覽器或Node.js中，它提供了豐富的API，支持PromiseAPI、異步請(qǐng)求處理、JSON數(shù)據(jù)自動(dòng)轉(zhuǎn)換等作用：在Vue中，用于實(shí)現(xiàn)對(duì)異步請(qǐng)求的處理認(rèn)識(shí)axios

axios相關(guān)概念異步編程ES6標(biāo)準(zhǔn)采用Promise代替?zhèn)鹘y(tǒng)的“回調(diào)函數(shù)+事件”異步編程方案，以解決“回調(diào)地獄”問(wèn)題ES7在ES6基礎(chǔ)上加以改進(jìn)，提出了async/await異步編程方案，使得代碼更為簡(jiǎn)潔易讀認(rèn)識(shí)axios

PromisePromise，可以理解為一個(gè)容器，里面包裹著某個(gè)事件（異步任務(wù)），這個(gè)事件會(huì)在將來(lái)的某個(gè)時(shí)刻發(fā)生，同時(shí)它還會(huì)保存事件的結(jié)果創(chuàng)建Promise對(duì)象的語(yǔ)法認(rèn)識(shí)axiosPromise相關(guān)概念Promise對(duì)象的狀態(tài)：Pending（等待中）、Resolved（已完成）和Rejected（已失敗）Promise對(duì)象的參數(shù)：resolve和rejectPromise對(duì)象的方法：then和catch認(rèn)識(shí)axiosPromise實(shí)現(xiàn)異步編程的原理認(rèn)識(shí)axios示例：Promise對(duì)象的應(yīng)用示例運(yùn)行結(jié)果認(rèn)識(shí)axios

示例：Promise實(shí)現(xiàn)多異步任務(wù)的順序執(zhí)行在停留2s、4s、6s后，控制臺(tái)分別輸出了“第一層嵌套”、“第二層嵌套”、“第三層嵌套”。示例運(yùn)行結(jié)果認(rèn)識(shí)axios

async/await作用：用于在Promise基礎(chǔ)上用同步的寫(xiě)法來(lái)編寫(xiě)異步任務(wù)代碼async是一個(gè)修飾符，用于表示某個(gè)函數(shù)是異步的，并返回一個(gè)Promise對(duì)象語(yǔ)法：例如：認(rèn)識(shí)axios

async/awaitawait是一個(gè)修飾符，用于表示等待某個(gè)表達(dá)式執(zhí)行完成，只有該表達(dá)式執(zhí)行完成，才能執(zhí)行后面的語(yǔ)句，它只能在async函數(shù)中使用語(yǔ)法：例如：認(rèn)識(shí)axios

async/awaitasync和await配合使用，以實(shí)現(xiàn)多異步任務(wù)的順序執(zhí)行axios安裝與配置

axios特點(diǎn)從瀏覽器中創(chuàng)建XMLHttpRequest對(duì)象從Node.js創(chuàng)建HTTP請(qǐng)求支持PromiseAPI攔截請(qǐng)求和響應(yīng)轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)取消請(qǐng)求自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)客戶端支持防御XSRF（Cross-SiteRequestForgery，跨站請(qǐng)求偽造）axios安裝與配置axios的安裝CDN安裝方式axiosAPI

axios語(yǔ)法：參數(shù)config參數(shù)responseaxios處理HTTP請(qǐng)求處理任何類型請(qǐng)求示例（主要代碼）axios處理HTTP請(qǐng)求處理GET/POST請(qǐng)求示例（主要代碼）axios攔截器axios攔截器是一種鉤子函數(shù)，它會(huì)在特定的操作之前或之后被觸發(fā)作用：要用于網(wǎng)絡(luò)中存在請(qǐng)求時(shí)，對(duì)發(fā)起請(qǐng)求或請(qǐng)求響應(yīng)的操作做一些相應(yīng)的處理分類：請(qǐng)求方向的攔截器，稱為請(qǐng)求攔截器響應(yīng)方向的攔截器，稱為響應(yīng)攔截器axios攔截器語(yǔ)法請(qǐng)求攔截器響應(yīng)攔截器axios攔截器示例：利用axiosAPI實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求攔截器，同時(shí)對(duì)所有請(qǐng)求的IP和端口號(hào)、數(shù)據(jù)格式，以及超時(shí)期限進(jìn)行統(tǒng)一設(shè)置axios攔截器需求描述歷史名城游網(wǎng)站的信息欄目中，要求根據(jù)用戶所選擇區(qū)域里的城市名稱，能查詢到該市當(dāng)天的天氣情況，包括溫度、風(fēng)向、空氣質(zhì)量等，為用戶出行提供天氣資訊項(xiàng)目7查詢旅游城市天氣實(shí)現(xiàn)思路將查詢處理部分構(gòu)建成局部組件，作為根組件的子組件根組件通過(guò)props將所選區(qū)域里的城市列表傳遞給子組件，并將其作為用戶選擇城市的依據(jù)利用axios全局配置，對(duì)訪問(wèn)站點(diǎn)、請(qǐng)求或響應(yīng)失敗處理進(jìn)行統(tǒng)一設(shè)置根據(jù)天氣查詢參數(shù)要求，利用axios.get函數(shù)發(fā)起網(wǎng)絡(luò)請(qǐng)求，獲得天氣情況數(shù)據(jù)使用LiveServer插件對(duì)程序功能進(jìn)行測(cè)試項(xiàng)目7查詢旅游城市天氣任務(wù)7-1構(gòu)建頁(yè)面布局項(xiàng)目7查詢旅游城市天氣任務(wù)7-2實(shí)現(xiàn)天氣預(yù)報(bào)查詢注冊(cè)并成為“天氣API”用戶定義查詢處理組件項(xiàng)目7查