Vue.js3前端開發(fā)基礎及項目化應用 課件 單元四 組件進階

Vue.js前端開發(fā)基礎及項目化應用單元四

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

項目4彈出式登錄框任務4-2創(chuàng)建登錄框組件定義登錄框組件的模板結構定義和注冊組件同步訓練請編寫Vue應用程序，要求單擊頁面上“我要注冊”按鈕，彈出注冊框，該注冊框包含4個輸入框（用戶名、密碼、郵箱和手機號碼）和兩個按鈕（“注冊”和“取消”），單擊“注冊”按鈕時關閉注冊框，單擊“取消”按鈕時，清空所有輸入信息單元小結組件從創(chuàng)建到銷毀的一系列過程被稱為組件的生命周期。在組件生命周期各個節(jié)點執(zhí)行的函數(shù)，被稱為生命周期鉤子函數(shù)，它是Vue所提供的組件內(nèi)置函數(shù)，會在組件在生命周期某個階段進入某個狀態(tài)時立即自動執(zhí)行。組件生命周期包括4個階段：創(chuàng)建、掛載、更新和銷毀。對應地我們將生命周期鉤子函數(shù)分為4組：（1）beforeCreate，created；（2）beforeMount，mount