Vue.js3前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用 課件 單元4、5 組件進(jìn)階、過渡和動(dòng)畫

Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元四

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

項(xiàng)目4彈出式登錄框任務(wù)4-2創(chuàng)建登錄框組件定義登錄框組件的模板結(jié)構(gòu)定義和注冊(cè)組件同步訓(xùn)練請(qǐng)編寫Vue應(yīng)用程序，要求單擊頁面上“我要注冊(cè)”按鈕，彈出注冊(cè)框，該注冊(cè)框包含4個(gè)輸入框（用戶名、密碼、郵箱和手機(jī)號(hào)碼）和兩個(gè)按鈕（“注冊(cè)”和“取消”），單擊“注冊(cè)”按鈕時(shí)關(guān)閉注冊(cè)框，單擊“取消”按鈕時(shí)，清空所有輸入信息單元小結(jié)組件從創(chuàng)建到銷毀的一系列過程被稱為組件的生命周期。在組件生命周期各個(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前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元五

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

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

Transition結(jié)合CSS3實(shí)現(xiàn)動(dòng)畫示例以動(dòng)畫方式，實(shí)現(xiàn)字符串“HelloWorld”的顯示和隱藏在過渡示例基礎(chǔ)上，修改style部分實(shí)現(xiàn)過渡和動(dòng)畫Transition結(jié)合JavaScript鉤子函數(shù)JavaScript鉤子函數(shù)（1）before-enter：進(jìn)入過渡/動(dòng)畫開始前執(zhí)行的方法（2）enter：進(jìn)入過渡/動(dòng)畫過程中執(zhí)行的方法（3）after-enter：進(jìn)入過渡/動(dòng)畫完成后執(zhí)行的方法（4）enter-cancelled：進(jìn)入過渡/動(dòng)畫取消時(shí)執(zhí)行的方法（5）before-leave：離開過渡/動(dòng)畫開始前執(zhí)行的方法（6）leave：離開過渡/動(dòng)畫過程中執(zhí)行的方法（7）after-leave：離開過渡/動(dòng)畫完成后執(zhí)行的方法（8）leave-cancelled：離開過渡/動(dòng)畫取消時(shí)執(zhí)行的方法實(shí)現(xiàn)過渡和動(dòng)畫示例：同時(shí)使用JavaScript鉤子函數(shù)和CSS3，實(shí)現(xiàn)div區(qū)塊顯示和隱藏的動(dòng)態(tài)過渡效果當(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)過渡和動(dòng)畫實(shí)現(xiàn)過渡和動(dòng)畫示例：僅使用JavaScript鉤子函數(shù)，實(shí)現(xiàn)div區(qū)塊顯示和隱藏的動(dòng)態(tài)動(dòng)畫效果

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

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

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

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

項(xiàng)目5會(huì)員中心頁面定義組件模板任務(wù)5-2創(chuàng)建局部組件（續(xù)）項(xiàng)目5會(huì)員中心頁面定義局部組件同步訓(xùn)練請(qǐng)編寫一個(gè)登錄頁面，其中包含3個(gè)輸入框：用戶名、密碼和驗(yàn)證碼。只有當(dāng)用戶輸入密碼錯(cuò)誤時(shí)，才要求輸入驗(yàn)證碼，并使用Transition組件實(shí)現(xiàn)驗(yàn)證碼輸入框顯示的過渡效果單元小結(jié)在Vue中實(shí)現(xiàn)過渡和動(dòng)畫是指利用Vue內(nèi)置組件Transition和TransitionGroup來實(shí)現(xiàn)CSS3過渡和動(dòng)畫，使得元素顯示狀態(tài)發(fā)生改變時(shí)