《網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)》電子教案（第16周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)??教學(xué)課時(shí)??：理論2學(xué)時(shí)+實(shí)踐1學(xué)時(shí)??授課對(duì)象??：計(jì)算機(jī)相關(guān)專業(yè)學(xué)生/Web前端開發(fā)初學(xué)者??教材章節(jié)??：第8章Vue框架（8.3、8.4節(jié)，8.5節(jié)的后半部分）二、教學(xué)目標(biāo)（一）知識(shí)目標(biāo)了解組件通信的基礎(chǔ)原理（父組件向子組件傳遞數(shù)據(jù)的機(jī)制）。掌握生命周期函數(shù)在實(shí)際開發(fā)中的典型應(yīng)用（如mounted初始化數(shù)據(jù)、beforeUnmount清理資源）。熟悉Vue項(xiàng)目改造的完整流程：資源引入→數(shù)據(jù)建?！M件化重構(gòu)→事件交互實(shí)現(xiàn)。理解“數(shù)據(jù)驅(qū)動(dòng)”思想在項(xiàng)目改造中的體現(xiàn)（用數(shù)據(jù)變化替代DOM操作）。（二）思政目標(biāo)通過組件化改造過程，培養(yǎng)“模塊化思維”和“代碼復(fù)用”意識(shí)，理解工程化開發(fā)的效率價(jià)值。在事件交互實(shí)現(xiàn)中，體會(huì)“用戶為中心”的設(shè)計(jì)理念，關(guān)注操作細(xì)節(jié)（如阻止默認(rèn)跳轉(zhuǎn)提升體驗(yàn)）。通過對(duì)比改造前后的代碼，樹立“迭代優(yōu)化”的職業(yè)態(tài)度，認(rèn)識(shí)到優(yōu)質(zhì)代碼需要持續(xù)打磨。三、教學(xué)重難點(diǎn)（一）教學(xué)重點(diǎn)父組件向子組件傳遞數(shù)據(jù)（props的聲明與使用）。生命周期函數(shù)的實(shí)際應(yīng)用（mounted初始化、beforeUnmount資源清理）。項(xiàng)目改造的核心步驟：數(shù)據(jù)抽取→組件化重構(gòu)→事件綁定→樣式動(dòng)態(tài)控制。（二）教學(xué)難點(diǎn)props數(shù)據(jù)的正確傳遞與類型匹配（如區(qū)分字符串與數(shù)值）。生命周期函數(shù)的執(zhí)行時(shí)機(jī)（如避免在updated中修改響應(yīng)式數(shù)據(jù)導(dǎo)致無限循環(huán)）。項(xiàng)目改造中數(shù)據(jù)結(jié)構(gòu)與DOM結(jié)構(gòu)的映射關(guān)系（如何將HTML元素屬性轉(zhuǎn)化為JS對(duì)象屬性）。四、教學(xué)方法講授法：系統(tǒng)講解組件通信、生命周期應(yīng)用及項(xiàng)目改造邏輯。案例演示法：結(jié)合教材8.5節(jié)后半部分改造實(shí)例，實(shí)時(shí)演示代碼效果，對(duì)比改造前后的代碼差異。對(duì)比分析法：對(duì)比props傳遞與直接訪問父組件數(shù)據(jù)的優(yōu)劣、生命周期函數(shù)在不同場(chǎng)景的適用性。任務(wù)驅(qū)動(dòng)法：實(shí)踐課通過“華為商城商品列表改造”任務(wù)，綜合應(yīng)用組件通信、生命周期和事件處理。五、教學(xué)過程（一）第一學(xué)時(shí)：組件通信與生命周期應(yīng)用（40分鐘）導(dǎo)入（5分鐘）展示8.5節(jié)改造前的手機(jī)商品列表靜態(tài)代碼（重復(fù)的<li>標(biāo)簽），提問：“如果需要新增商品，是否要逐個(gè)修改HTML？”引出數(shù)據(jù)驅(qū)動(dòng)改造的必要性。簡(jiǎn)要介紹本節(jié)課內(nèi)容：組件通信基礎(chǔ)、生命周期函數(shù)實(shí)戰(zhàn)。組件通信基礎(chǔ)（20分鐘）核心概念：組件間作用域隔離（子組件無法直接訪問父組件數(shù)據(jù)），需通過props實(shí)現(xiàn)父?jìng)髯油ㄐ拧rops用法：子組件聲明：在組件選項(xiàng)中用props數(shù)組聲明接收的屬性（例8-18擴(kuò)展）：父組件傳遞：使用子組件時(shí)通過屬性綁定傳遞數(shù)據(jù)（結(jié)合v-for循環(huán)）：注意事項(xiàng)：props是只讀的，子組件不能直接修改（需通過事件通知父組件修改）。生命周期函數(shù)實(shí)戰(zhàn)（10分鐘）mounted場(chǎng)景：在組件掛載后加載數(shù)據(jù)（模擬從服務(wù)器請(qǐng)求）：beforeUnmount場(chǎng)景：組件卸載前清理定時(shí)器或事件監(jiān)聽：小結(jié)（5分鐘）回顧props通信流程和生命周期函數(shù)的核心作用。布置思考題：“為什么子組件不能直接修改props數(shù)據(jù)？”（二）第二學(xué)時(shí)：8.5節(jié)項(xiàng)目改造詳解（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查學(xué)生對(duì)props的掌握：“如何向子組件傳遞商品價(jià)格并顯示？”引出本節(jié)課內(nèi)容：8.5節(jié)商品列表改造的完整步驟。項(xiàng)目改造步驟（30分鐘）步驟1：資源引入與實(shí)例掛載引入Vue和數(shù)據(jù)文件（8.5.3節(jié)代碼）：創(chuàng)建實(shí)例并掛載到根元素：步驟2：分類導(dǎo)航改造（事件綁定）用v-for渲染導(dǎo)航項(xiàng)，通過@click.prevent實(shí)現(xiàn)點(diǎn)擊切換：動(dòng)態(tài)樣式：通過hotIndex控制選中狀態(tài)（添加selected類）。步驟3：商品列表改造（條件與樣式綁定）用v-for循環(huán)商品，結(jié)合v-if控制標(biāo)簽顯示（僅id>1的商品顯示名稱和價(jià)格）：動(dòng)態(tài)樣式：通過getStyle方法添加每行第一個(gè)商品的no-m類：改造價(jià)值分析（5分鐘）代碼量：改造后HTML代碼減少60%，新增商品僅需修改GoodsData?？删S護(hù)性：數(shù)據(jù)與視圖分離，修改樣式或邏輯無需逐個(gè)調(diào)整DOM。（三）實(shí)踐學(xué)時(shí)：商品列表改造實(shí)戰(zhàn)（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：基于8.5節(jié)素材，完成以下改造：定義SeriesNav（分類導(dǎo)航）和GoodsItem（商品項(xiàng)）子組件，用props傳遞數(shù)據(jù)。實(shí)現(xiàn)導(dǎo)航點(diǎn)擊切換商品列表（模擬過濾數(shù)據(jù)）。在mounted中加載數(shù)據(jù)，在beforeUnmount中清理定時(shí)器（若有）。學(xué)生實(shí)踐（30分鐘）教師巡回指導(dǎo)，重點(diǎn)解決：props傳遞時(shí)的數(shù)據(jù)類型錯(cuò)誤（如將字符串id誤傳為數(shù)值）。v-for中遺漏key導(dǎo)致的渲染異常。事件修飾符prevent的正確使用（阻止<a