《網(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ī)范編寫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)寫:）的用法（例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