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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

查詢旅游城市天氣認識axios

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

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

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

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

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

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

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

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

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