《網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)》電子教案（第15周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)??教學(xué)課時(shí)??：理論2學(xué)時(shí)+實(shí)踐1學(xué)時(shí)??授課對(duì)象??：計(jì)算機(jī)相關(guān)專業(yè)學(xué)生/Web前端開(kāi)發(fā)初學(xué)者??教材章節(jié)??：第8章Vue框架（8.1、8.2節(jié)，8.5節(jié)的前半部分）二、教學(xué)目標(biāo)（一）知識(shí)目標(biāo)了解Vue框架的起源（EvanYou創(chuàng)建）、發(fā)展歷程（1.x→2.x→3.x）及核心功能（響應(yīng)式數(shù)據(jù)綁定、組件化開(kāi)發(fā)等）。掌握Vue開(kāi)發(fā)環(huán)境的兩種搭建方式（獨(dú)立腳本引入用于簡(jiǎn)單場(chǎng)景、構(gòu)建工具用于復(fù)雜應(yīng)用）及適用場(chǎng)景。熟悉Vue3基礎(chǔ)語(yǔ)法：實(shí)例創(chuàng)建（createApp）、模板語(yǔ)法（{{}}插值、v-指令）、常用指令（v-bind、v-if、v-for等）。理解數(shù)據(jù)驅(qū)動(dòng)視圖的核心思想，掌握響應(yīng)式數(shù)據(jù)與DOM的同步機(jī)制。能運(yùn)用Vue對(duì)現(xiàn)有靜態(tài)頁(yè)面進(jìn)行改造，實(shí)現(xiàn)動(dòng)態(tài)渲染與交互。（二）思政目標(biāo)通過(guò)規(guī)范編寫(xiě)Vue代碼（如指令語(yǔ)法、組件結(jié)構(gòu)），培養(yǎng)嚴(yán)謹(jǐn)?shù)木幊塘?xí)慣和模塊化思維。結(jié)合Vue的“漸進(jìn)式”特點(diǎn)，理解“按需集成”的工程思想，提升資源優(yōu)化意識(shí)。在項(xiàng)目改造實(shí)踐中，體會(huì)“數(shù)據(jù)驅(qū)動(dòng)”與“DOM操作”的效率差異，樹(shù)立高性能開(kāi)發(fā)理念。通過(guò)組件化開(kāi)發(fā)案例，強(qiáng)化代碼復(fù)用與團(tuán)隊(duì)協(xié)作意識(shí)，理解模塊化對(duì)大型項(xiàng)目的重要性。三、教學(xué)重難點(diǎn)（一）教學(xué)重點(diǎn)Vue的兩種環(huán)境搭建方式及適用場(chǎng)景（獨(dú)立腳本用于簡(jiǎn)單功能/項(xiàng)目增強(qiáng)、構(gòu)建工具用于大型應(yīng)用）。Vue實(shí)例創(chuàng)建（createApp）與掛載（mount）的流程，及響應(yīng)式數(shù)據(jù)（data函數(shù)）的定義方式。模板語(yǔ)法：{{}}插值表達(dá)式的用法，v-bind（屬性綁定）、v-if（條件渲染）、v-for（列表渲染）的基本語(yǔ)法?，F(xiàn)有項(xiàng)目的Vue改造思路（數(shù)據(jù)提取→實(shí)例創(chuàng)建→模板綁定）。（二）教學(xué)難點(diǎn)響應(yīng)式數(shù)據(jù)綁定的原理（數(shù)據(jù)變化自動(dòng)同步視圖的機(jī)制）。v-for與v-if在同一元素上的優(yōu)先級(jí)及使用注意事項(xiàng)（避免同時(shí)使用）。模板語(yǔ)法中JavaScript表達(dá)式的作用域限制（僅能使用當(dāng)前組件實(shí)例的數(shù)據(jù)）。項(xiàng)目改造中數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)與DOM結(jié)構(gòu)的匹配（如何將HTML元素屬性映射為JS對(duì)象屬性）。四、教學(xué)方法講授法：系統(tǒng)講解Vue的概念、語(yǔ)法規(guī)則及環(huán)境搭建步驟。案例演示法：結(jié)合教材示例（例8-1至例8-10），實(shí)時(shí)演示代碼效果，對(duì)比靜態(tài)HTML與Vue動(dòng)態(tài)渲染的差異。對(duì)比分析法：對(duì)比獨(dú)立腳本與構(gòu)建工具的優(yōu)缺點(diǎn)、v-if與v-show的實(shí)現(xiàn)原理，加深理解。任務(wù)驅(qū)動(dòng)法：實(shí)踐課通過(guò)“商品列表Vue改造”任務(wù)，綜合應(yīng)用列表渲染、屬性綁定和數(shù)據(jù)驅(qū)動(dòng)思想。五、教學(xué)過(guò)程（一）第一學(xué)時(shí)：Vue框架概述與環(huán)境搭建（40分鐘）導(dǎo)入（5分鐘）展示靜態(tài)商品列表與Vue動(dòng)態(tài)渲染列表的對(duì)比（如點(diǎn)擊按鈕切換商品顯示狀態(tài)），提問(wèn)：“如何用更少的代碼實(shí)現(xiàn)動(dòng)態(tài)交互？”引出Vue的優(yōu)勢(shì)。簡(jiǎn)要介紹本節(jié)課內(nèi)容：Vue的特點(diǎn)、環(huán)境搭建及基礎(chǔ)實(shí)例創(chuàng)建。Vue框架基礎(chǔ)（15分鐘）核心概念：講解Vue的定義（漸進(jìn)式JavaScript框架）、核心庫(kù)定位（專注視圖層），及與Angular、React的共性（組件化）與差異（輕量、易學(xué)）。發(fā)展歷程：簡(jiǎn)述Vue1.x（初始版本）、2.x（主流里程碑）、3.x（當(dāng)前默認(rèn)版本，3.4.35為最新穩(wěn)定版）的演進(jìn)，強(qiáng)調(diào)3.x的性能提升。核心特點(diǎn)：結(jié)合8.1.1節(jié)，提煉6大特點(diǎn)：輕量級(jí)（運(yùn)行時(shí)核心庫(kù)僅10KB）；漸進(jìn)式（可按需集成，不強(qiáng)制重構(gòu)項(xiàng)目）；響應(yīng)式數(shù)據(jù)綁定（數(shù)據(jù)與視圖自動(dòng)同步）；高性能（虛擬DOM與差異化算法）；組件化開(kāi)發(fā)（代碼復(fù)用與維護(hù)）；易于學(xué)習(xí)（基于HTML/JS基礎(chǔ)）。Vue環(huán)境搭建（15分鐘）獨(dú)立腳本方式（重點(diǎn)）：演示通過(guò)CDN引入Vue（如Unpkg鏈接：/vue@3/dist/vue.global.js），說(shuō)明開(kāi)發(fā)版（含調(diào)試信息）與生產(chǎn)版（壓縮優(yōu)化）的區(qū)別。示例代碼：用獨(dú)立腳本創(chuàng)建第一個(gè)Vue實(shí)例（例8-1），講解createApp、data、mount的作用。構(gòu)建工具方式（簡(jiǎn)介）：提及Vite+Node.js的適用場(chǎng)景（大型應(yīng)用），展示命令行創(chuàng)建項(xiàng)目流程（圖8-1），不深入細(xì)節(jié)。小結(jié)（5分鐘）回顧Vue的核心特點(diǎn)及獨(dú)立腳本的引入步驟。布置思考題：“為什么生產(chǎn)環(huán)境需要替換為Vd.js？”（二）第二學(xué)時(shí)：Vue3基礎(chǔ)語(yǔ)法與指令（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查學(xué)生對(duì)Vue實(shí)例的掌握：“如何將Vue實(shí)例綁定到id為app的div上？”引出本節(jié)課內(nèi)容：模板語(yǔ)法、常用指令及數(shù)據(jù)綁定邏輯。Vue模板語(yǔ)法與指令（30分鐘）模板語(yǔ)法基礎(chǔ)：文本插值：{{}}的用法及JavaScript表達(dá)式支持（如{{score*0.5}}，例8-5）。指令概念：以v-為前綴的特殊屬性，講解v-bind（屬性綁定，簡(jiǎn)寫(xiě):）的用法（例8-5中v-bind:id）。常用指令：v-if/v-else：條件渲染（DOM元素的添加/刪除，例8-6），對(duì)比v-show（CSSdisplay控制）的異同。v-for：列表渲染，演示數(shù)組遍歷（例8-7）、對(duì)象遍歷（例8-8）及嵌套循環(huán)（例8-10），強(qiáng)調(diào)key的作用（提升渲染效率）。樣式綁定：class屬性的對(duì)象語(yǔ)法（{active:isActive}）與數(shù)組語(yǔ)法（[activeClass,errorClass]，例8-11、8-12）。小結(jié)（5分鐘）梳理模板語(yǔ)法與指令的核心邏輯：“數(shù)據(jù)驅(qū)動(dòng)視圖，指令簡(jiǎn)化DOM操作”。預(yù)告實(shí)踐課任務(wù)：將靜態(tài)商品列表改造為Vue動(dòng)態(tài)渲染列表。（三）實(shí)踐學(xué)時(shí)：商品列表Vue改造（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：將教材8.5節(jié)的華為商城手機(jī)商品列表（靜態(tài)HTML）改造為Vue驅(qū)動(dòng)的動(dòng)態(tài)列表，功能包括：用v-for渲染商品列表（替換靜態(tài)li標(biāo)簽）。用v-bind綁定商品圖片src、鏈接href等屬性。用v-if控制特殊商品的標(biāo)簽顯示（如“新品”標(biāo)簽）。學(xué)生實(shí)踐（30分鐘）教師巡回指導(dǎo)，重點(diǎn)解決：數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)問(wèn)題（如何將商品圖片、價(jià)格等屬性封裝為JS對(duì)象數(shù)組）。v-for遍歷中索引值的正確使用（如(item,index)ingoodsList）。樣式綁定中動(dòng)態(tài)類名的邏輯（如根據(jù)商品類型添加不同class）。成果點(diǎn)評(píng)（5分鐘）選取2份作品，點(diǎn)評(píng)數(shù)據(jù)結(jié)構(gòu)的合理性、指令使用的規(guī)范性及代碼簡(jiǎn)潔度。強(qiáng)調(diào)：Vue的核心是“數(shù)據(jù)驅(qū)動(dòng)”，避免手動(dòng)操作DOM，提升代碼可維護(hù)性。六、教學(xué)反思（空）《網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)》電子教案（第16周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)??教學(xué)課時(shí)??：理論2學(xué)時(shí)+實(shí)踐1學(xué)時(shí)??授課對(duì)象??：計(jì)算機(jī)相關(guān)專業(yè)學(xué)生/Web前端開(kāi)發(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í)際開(kāi)發(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)通過(guò)組件化改造過(guò)程，培養(yǎng)“模塊化思維”和“代碼復(fù)用”意識(shí)，理解工程化開(kāi)發(fā)的效率價(jià)值。在事件交互實(shí)現(xiàn)中，體會(huì)“用戶為中心”的設(shè)計(jì)理念，關(guān)注操作細(xì)節(jié)（如阻止默認(rèn)跳轉(zhuǎn)提升體驗(yàn)）。通過(guò)對(duì)比改造前后的代碼，樹(shù)立“迭代優(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)致無(wú)限循環(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傳遞與直接訪問(wèn)父組件數(shù)據(jù)的優(yōu)劣、生命周期函數(shù)在不同場(chǎng)景的適用性。任務(wù)驅(qū)動(dòng)法：實(shí)踐課通過(guò)“華為商城商品列表改造”任務(wù)，綜合應(yīng)用組件通信、生命周期和事件處理。五、教學(xué)過(guò)程（一）第一學(xué)時(shí)：組件通信與生命周期應(yīng)用（40分鐘）導(dǎo)入（5分鐘）展示8.5節(jié)改造前的手機(jī)商品列表靜態(tài)代碼（重復(fù)的<li>標(biāo)簽），提問(wèn)：“如果需要新增商品，是否要逐個(gè)修改HTML？”引出數(shù)據(jù)驅(qū)動(dòng)改造的必要性。簡(jiǎn)要介紹本節(jié)課內(nèi)容：組件通信基礎(chǔ)、生命周期函數(shù)實(shí)戰(zhàn)。組件通信基礎(chǔ)（20分鐘）核心概念：組件間作用域隔離（子組件無(wú)法直接訪問(wèn)父組件數(shù)據(jù)），需通過(guò)props實(shí)現(xiàn)父?jìng)髯油ㄐ拧rops用法：子組件聲明：在組件選項(xiàng)中用props數(shù)組聲明接收的屬性（例8-18擴(kuò)展）：父組件傳遞：使用子組件時(shí)通過(guò)屬性綁定傳遞數(shù)據(jù)（結(jié)合v-for循環(huán)）：注意事項(xiàng)：props是只讀的，子組件不能直接修改（需通過(guò)事件通知父組件修改）。生命周期函數(shù)實(shí)戰(zhàn)（10分鐘）mounted場(chǎng)景：在組件掛載后加載數(shù)據(jù)（模擬從服務(wù)器請(qǐng)求）：beforeUnmount場(chǎng)景：組件卸載前清理定時(shí)器或事件監(jiān)聽(tīng)：小結(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)，通過(guò)@click.prevent實(shí)現(xiàn)點(diǎn)擊切換：動(dòng)態(tài)樣式：通過(guò)hotIndex控制選中狀態(tài)（添加selected類）。步驟3：商品列表改造（條件與樣式綁定）用v-for循環(huán)商品，結(jié)合v-if控制標(biāo)簽顯示（僅id>1的商品顯示名稱和價(jià)格）：動(dòng)態(tài)樣式：通過(guò)getStyle方法添加每行第一個(gè)商品的no-m類：改造價(jià)值分析（5分鐘）代碼量：改造后HTML代碼減少60%，新增商品僅需修改GoodsData?？删S護(hù)性：數(shù)據(jù)與視圖分離，修改樣式或邏輯無(wú)需逐個(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)擊切換商品列表（模