《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計(jì)課程名稱JavaScript前端框架應(yīng)用授課單元第2章Vue.js數(shù)據(jù)綁定單元學(xué)時(shí)2授課教師職稱授課地點(diǎn)教學(xué)目標(biāo)知識(shí)目標(biāo)能力目標(biāo)素質(zhì)目標(biāo)1.說出Vue.js模板語法是什么2.說出Vue.js的模板語法的作用3.說出響應(yīng)式渲染機(jī)制1.能夠通過插值法將文本展示于DOM中2.能夠?qū)⒉逯岛捅磉_(dá)式結(jié)合起來，將表達(dá)式的運(yùn)行結(jié)果展示于DOM中3.理解響應(yīng)式數(shù)據(jù)和普通數(shù)據(jù)之間的區(qū)別4.能夠配置響應(yīng)式數(shù)據(jù)1.激勵(lì)學(xué)生奮勇向前教學(xué)重難點(diǎn)教學(xué)重點(diǎn)插值表達(dá)式的使用教學(xué)難點(diǎn)響應(yīng)式數(shù)據(jù)的聲明教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進(jìn)行結(jié)構(gòu)化，整個(gè)教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個(gè)教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動(dòng)性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動(dòng)、讓學(xué)生多體驗(yàn)、多積累。教學(xué)準(zhǔn)備環(huán)境準(zhǔn)備多媒體教室資料準(zhǔn)備任務(wù)工單（MVVM模式示意圖、BMI計(jì)算）資源準(zhǔn)備教材配套教學(xué)視頻資源教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖（含思政融入點(diǎn)）課前預(yù)習(xí)了解什么是模板語法了解MVVM模式1.在“智慧職教”平臺(tái)發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標(biāo)，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識(shí)的能力。課中導(dǎo)學(xué)1.知識(shí)回顧回顧上節(jié)課的知識(shí)點(diǎn)：Vue.js是什么？Vue.js有什么特點(diǎn)？Vue.js的開發(fā)環(huán)境需要安裝什么軟件？如何在html文檔中以直接引入方式使用Vue.js基于上節(jié)課的學(xué)習(xí)內(nèi)容，生成問題列表。指導(dǎo)學(xué)生分組，隨機(jī)選擇不同組同號(hào)學(xué)生回答問題。主動(dòng)參與課堂教學(xué)，通過回答問題回顧知識(shí)。助力學(xué)生梳理知識(shí)，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）BMI計(jì)算的技術(shù)方案根據(jù)圖1給出的代碼，結(jié)合BMI（BMI=體重（kg）/［身高（m）×身高（m）］）公式，編寫js代碼，實(shí)現(xiàn)圖2所示的效果：圖1代碼片段圖2效果方案1：js通過獲取、操作DOM將js中定義的變量和計(jì)算所得結(jié)果插入HTML中。方案2：Vue.js的插值法教師課前提前主備好代碼文檔和效果圖。教師引導(dǎo)學(xué)生根據(jù)現(xiàn)有知識(shí)儲(chǔ)備提出方案1的實(shí)現(xiàn)步驟教師引出本節(jié)課的知識(shí)點(diǎn)，提出還有更為簡(jiǎn)便的方案2學(xué)生根據(jù)代碼和效果圖，獨(dú)立思考解決方案。學(xué)生在引導(dǎo)下，舉手回答解決方案的步驟通過BMI計(jì)算的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—模板語法（1）Vue.js模板語法是什么語法層面上是合法的HTML文檔。（2）Vue.js模板語法的作用將聲明式的數(shù)據(jù)綁定呈現(xiàn)到DOM上。模板語法—插值通過Mustache語法{{}}將數(shù)據(jù)插入到DOM中。語法如下：<p>{{msg}}</p>代碼示例，如圖3所示：圖3代碼示例運(yùn)行示例，效果如圖4所示：圖4運(yùn)行效果編碼步驟：獲取CreateApp方法調(diào)用CreateApp方法創(chuàng)建Vue實(shí)例調(diào)用實(shí)例方法mount掛載至DOM上創(chuàng)建data數(shù)據(jù)使用插值法將數(shù)據(jù)插入至DOM模板語法—插值表達(dá)式通過Mustache語法{{}}將表達(dá)式插入到DOM中。語法如下：{{age+10}}代碼示例，如圖5所示：圖5代碼示例運(yùn)行示例，效果如圖6所示：圖5運(yùn)行效果編碼步驟：根據(jù)效果圖，結(jié)合data中的數(shù)據(jù)，在模板中插入{{}}符號(hào)，并在該符號(hào)中編寫正確的表達(dá)式。年齡：直接插入age。哥哥的年齡：算術(shù)運(yùn)算符+的表達(dá)式。所在城市：字符串方法split成年人：三元表達(dá)式教師講解Vue.js模板語法的定義和作用。教師通過語法展示，講解插值法的作用和使用場(chǎng)景后，按編碼步驟進(jìn)行編碼，完成插值法的示例，并運(yùn)行。教師隱去編碼步驟和部分代碼，引導(dǎo)學(xué)生總結(jié)編碼步驟。教師通過語法展示，講解插值表達(dá)式法的作用和使用場(chǎng)景后。展示相關(guān)示例的運(yùn)行結(jié)果和部分代碼。根據(jù)現(xiàn)有結(jié)果和部分代碼，引導(dǎo)學(xué)生補(bǔ)充代碼。學(xué)生根據(jù)教師的闡述理解并表達(dá)自己的理解學(xué)生根據(jù)已有的知識(shí)體系理解Vue.js的特點(diǎn)。學(xué)生內(nèi)化插值語法并總結(jié)示例編碼步驟和編碼內(nèi)容。學(xué)生舉手總結(jié)編碼步驟，然后根據(jù)示例效果，完成示例編碼。學(xué)生在思考后，舉手上講臺(tái)補(bǔ)充代碼。通過講解語法、示例效果展示、示例代碼完善、步驟總結(jié)，幫助學(xué)生理解模板語法的使用；再隱去部分內(nèi)容，檢驗(yàn)學(xué)生對(duì)知識(shí)的內(nèi)化效果，查漏補(bǔ)缺。插值法使用的案例，融入思政，激勵(lì)學(xué)生奮勇向前。4.學(xué)新知-響應(yīng)式聲明渲染機(jī)制Vue.js使用響應(yīng)式系統(tǒng)，當(dāng)Vue.js中的數(shù)據(jù)發(fā)生變化，視圖中的數(shù)據(jù)會(huì)更新。（1）理解MVVM模式MVVM模式實(shí)現(xiàn)了“雙向綁定”的核心功能，可以使用簡(jiǎn)潔的模板語法將數(shù)據(jù)聲明式渲染進(jìn)DOM。MVVM模式如圖6所示，View：視圖，用戶界面Model：數(shù)據(jù)部分。ViewModel：連接視圖和數(shù)據(jù)模型，監(jiān)聽Model或View的變化。圖6MVVM模型圖（2）響應(yīng)式聲明渲染機(jī)制概念：模型（Model）層是普通的JavaScript對(duì)象，當(dāng)視圖（View）層中的DOM節(jié)點(diǎn)上綁定了Vue.js的對(duì)象時(shí)，如果這個(gè)對(duì)象的屬性發(fā)生了任何改變，無須進(jìn)行其他操作，頁面上的對(duì)應(yīng)的數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化，即更新，所以叫作響應(yīng)式渲染。聲明響應(yīng)式狀態(tài)：在data中定義的變量，如圖7所示。圖7響應(yīng)式狀態(tài)聲明響應(yīng)式方法：在methods中定義的方法，如圖8所示。圖8響應(yīng)式方法響應(yīng)式狀態(tài)和方法應(yīng)用于模板中，如圖9所示。圖9響應(yīng)式數(shù)據(jù)應(yīng)用于模板教師圖文詳解MVVM模式，并隱去MVVM模式配圖，選擇舉手學(xué)生展示畫出的MVVM模式圖教師結(jié)合MVVM模式，講解響應(yīng)式聲明渲染機(jī)制的概念。教師分別講解聲明響應(yīng)式狀態(tài)和聲明響應(yīng)式方法，并提問這些方法和狀態(tài)對(duì)應(yīng)MVVM模塊的哪部分？教師講解聲明響應(yīng)式狀態(tài)和聲明響應(yīng)式方法在模板中的使用，并提問使用的位置對(duì)應(yīng)MVVM模塊的哪部分？教師使用var定義數(shù)據(jù)、function定義方法，并插入模板中，提問是否能夠展示數(shù)據(jù)？為什么？學(xué)生理解MVVM后，畫出MVVM圖，并舉手展示。學(xué)生內(nèi)化理解聲明式渲染的概念。學(xué)生積極思考，舉手回答狀態(tài)和方法對(duì)應(yīng)Model部分。學(xué)生積極思考，舉手回答狀態(tài)和方法對(duì)應(yīng)View部分。學(xué)生根據(jù)響應(yīng)式聲明渲染機(jī)制的概念和應(yīng)用進(jìn)行思考，舉手回答無法展示，因?yàn)橹挥卸x在Model中的數(shù)據(jù)和方法才能應(yīng)用于模板中。先通過圖文幫助學(xué)上理解Vue.js的MVVM模式，有助于理解響應(yīng)式聲明渲染機(jī)制。結(jié)合MVVM機(jī)制講解響應(yīng)式聲明渲染機(jī)制的概念幫助學(xué)生理解。問題引導(dǎo)，幫助學(xué)生掌握響應(yīng)式渲染機(jī)制的概念和使用。5.練技能—BMI計(jì)算（1）實(shí)操任務(wù)：根據(jù)任務(wù)工單要求，完成BMI計(jì)算。編碼步驟：創(chuàng)建、掛載Vue實(shí)例創(chuàng)建響應(yīng)式數(shù)據(jù)：身高、體重插值法結(jié)合表達(dá)式渲染身高、體重、BMI教師發(fā)布任務(wù)，強(qiáng)調(diào)任務(wù)要求。教師隨堂檢查每個(gè)學(xué)生的操作步驟，并指點(diǎn)。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過BMI計(jì)算的編碼任務(wù)，幫助學(xué)生通過獨(dú)立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計(jì)技術(shù)方案，并通過編碼完成。課后拓展學(xué)生完成課后作業(yè)：繪制MVVM圖，并解釋運(yùn)行機(jī)制。解釋Vue.js模板語法是什么以及作用。使用插值法和聲明式響應(yīng)式機(jī)制等知識(shí)完成編碼任務(wù)。.在“智慧職教”平臺(tái)推送課后作業(yè)。在限定日期內(nèi)，于“智慧職教”平臺(tái)（云課堂）按要求完成課后作業(yè)。1.鞏固學(xué)習(xí)成果。教學(xué)評(píng)價(jià)1.評(píng)價(jià)構(gòu)成由“智慧職教”系統(tǒng)成