《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計(jì)課程名稱JavaScript前端框架應(yīng)用授課單元第3章Vue.js指令單元學(xué)時(shí)2授課教師職稱授課地點(diǎn)教學(xué)目標(biāo)知識(shí)目標(biāo)能力目標(biāo)素質(zhì)目標(biāo)說出v-show指令的作用說出v-on指令的作用說出v-for指令的作用區(qū)別出v-show、v-if使用v-on綁定事件處理函數(shù)使用v-for循環(huán)渲染列表1.對(duì)他人產(chǎn)生積極影響而不是消極影響教學(xué)重難點(diǎn)教學(xué)重點(diǎn)v-on綁定事件處理函數(shù)教學(xué)難點(diǎn)v-for列表循環(huán)教學(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ù)工單（數(shù)據(jù)比較）資源準(zhǔn)備教材配套教學(xué)視頻資源教學(xué)實(shí)施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖（含思政融入點(diǎn)）課前預(yù)習(xí)了解v-show指令了解v-on指令了解v-for指令1.在“智慧職教”平臺(tái)發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標(biāo)，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識(shí)的能力。課中導(dǎo)學(xué)1.知識(shí)回顧根據(jù)作業(yè)批改的情況，總結(jié)學(xué)生作業(yè)中存在的問題。講解作業(yè)題目，在講解過程中回顧上節(jié)課中胡知識(shí)點(diǎn)。點(diǎn)評(píng)班級(jí)作業(yè)。講解、編碼演示作業(yè)的解題思路和過程。反思課后作業(yè)存在的問題。一起參與作業(yè)題目的解答。助力學(xué)生回顧知識(shí)，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）數(shù)據(jù)計(jì)算的技術(shù)方案根據(jù)圖1給出的代碼塊，實(shí)現(xiàn)圖2所示的效果：圖1代碼片段圖2效果技術(shù)方案：v-model作用于表單元素，實(shí)現(xiàn)雙向數(shù)據(jù)綁定，v-on指令實(shí)現(xiàn)按鈕的點(diǎn)擊事件綁定，v-for循環(huán)列表展示，v-if結(jié)合v-else展示比較列表或者提示文案。教師課前提前主備好代碼文檔和效果圖。教師根據(jù)任務(wù)技術(shù)方案引出本節(jié)課的知識(shí)點(diǎn)學(xué)生根據(jù)代碼和效果圖，參與討論當(dāng)前哪些知識(shí)點(diǎn)可以融入解決部分問題。通過數(shù)據(jù)計(jì)算的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—v-show（1）問題引導(dǎo)問題1：v-if的作用是什么？答案：實(shí)現(xiàn)條件渲染問題2：v-if為false，隱藏的元素是否仍然存在于html文檔中。答案：不存在。（2）v-show指令作用：實(shí)現(xiàn)條件渲染。語法:v-show=”表達(dá)式”。當(dāng)表達(dá)式為真，則渲染元素，反之隱藏元素。問題3：隱藏的元素是否存在于HTML中？答案：存在。教師在智慧職教平臺(tái)發(fā)布問題1、問題2，并一一點(diǎn)評(píng)討論區(qū)的發(fā)言。教師對(duì)照v-if詳解v-show，在智慧職教平臺(tái)發(fā)布問題3，并一一點(diǎn)評(píng)討論區(qū)的發(fā)言。學(xué)生在討論區(qū)發(fā)言，討論問題1、問題2。學(xué)生通過編碼嘗試，并使用谷歌瀏覽器調(diào)試，得出問題3的答案，并在在討論區(qū)發(fā)言。問題引導(dǎo)，引出知識(shí)點(diǎn)，通過對(duì)照學(xué)習(xí)，幫助學(xué)生理解v-show，通過自學(xué)和調(diào)試的方式，找到問題的答案，提高學(xué)生的課堂參與度。4.學(xué)新知-v-on（1）問題引導(dǎo)問題1：請(qǐng)列舉出網(wǎng)頁中常見的事件類型。答案：如點(diǎn)擊、滾動(dòng)、鼠標(biāo)進(jìn)入、鼠標(biāo)離開，雙擊等。簡(jiǎn)單的事件類型引出vue.js同樣需要處理這些事件。v-on指令作用：監(jiān)聽事件，綁定事件處理好函數(shù)。語法：v-on:事件類型=“事件處理函數(shù)”。簡(jiǎn)寫：@事件類型=“事件處理函數(shù)”。案例：代碼如圖1所示，methods中定義事件處理函數(shù)，通過v-on綁定至元素上。圖2代碼片段考一考編碼1：根據(jù)圖3所示的代碼，實(shí)現(xiàn)圖4所示的效果。圖3代碼片段圖4頁面效果教師在智慧職教發(fā)布問題1，并一一點(diǎn)評(píng)討論區(qū)的發(fā)言。教師詳解v-on指令的作用和語法。并通過案例來演示v-on的使用。教師發(fā)布代碼文檔，投屏舉手學(xué)生的編碼1的效果。學(xué)生在討論區(qū)發(fā)言，討論問題1。學(xué)生理解v-on的作用和使用，完成編碼1。舉手，屏幕展示編碼1。通過熟悉的知識(shí)點(diǎn)引入新的知識(shí)點(diǎn)，理論結(jié)合實(shí)際講解知識(shí)點(diǎn)，幫助學(xué)生理解，在通過編碼挑戰(zhàn)來考察學(xué)習(xí)成果。4.學(xué)新知-v-for（1）引出新知編碼1：使用var聲明變量list，賦值為["流浪地球","滿江紅","無名"]，使用for循環(huán)打印每個(gè)數(shù)據(jù)元素。Vue.js的v-for能夠循環(huán)列表展示list中的數(shù)據(jù)。v-for指令作用：遍歷數(shù)組、對(duì)象，基于這些數(shù)據(jù)多次渲染元素或模版語法：v-for=”（item,idx)in數(shù)據(jù)”。其中，item為數(shù)據(jù)元素,id為該數(shù)據(jù)元素的序號(hào)。案例1：代碼如圖5所示。圖5代碼片段教師發(fā)布編碼1，投屏舉手學(xué)生的編碼1的效果。教師詳解v-on指令的作用和語法。并通過案例來演示v-on的使用。教師將案例1的部分代碼隱去，讓學(xué)生自己根據(jù)理解來補(bǔ)充代碼。舉手學(xué)生的編碼效果，點(diǎn)評(píng)學(xué)生的邏輯思路。完成編碼1，并舉手展示。理解v-for的語法和使用，補(bǔ)充代碼后，舉手展示，并闡述思路。通過熟悉的編碼題引出類似的知識(shí)點(diǎn)v-for，通過理論結(jié)合實(shí)踐幫助學(xué)生掌握知識(shí)點(diǎn)，再隱去部分代碼，鼓勵(lì)學(xué)生自主梳理邏輯并編碼，檢驗(yàn)學(xué)習(xí)效果?！舅颊谌搿浚喊咐锏牧斜砹信e了一些比較優(yōu)秀的電影，尤其是滿江紅中的故事人物的互相影響，從而引導(dǎo)學(xué)生對(duì)他人產(chǎn)生積極影響而不是消極影響。5.練技能—數(shù)據(jù)比較編碼（1）實(shí)操任務(wù)：根據(jù)任務(wù)工單要求，完成詩數(shù)據(jù)比較。教師發(fā)布任務(wù)，強(qiáng)調(diào)任務(wù)要求。教師隨堂檢查每個(gè)學(xué)生的操作步驟，并指點(diǎn)。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過數(shù)據(jù)比較的編碼任務(wù)，幫助學(xué)生通過獨(dú)立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計(jì)技術(shù)方案，并通過編碼完成。課后拓展學(xué)生完成課后作業(yè)：回答題、編碼題。.在“智慧職教”平臺(tái)推送課后作業(yè)。在限定日期內(nèi)，于“智慧職教”平臺(tái)（云課堂）按要求完成課后作業(yè)。1.鞏固學(xué)習(xí)成果。教學(xué)評(píng)價(jià)1.評(píng)價(jià)構(gòu)成由“智慧職教”系統(tǒng)成績(jī)和學(xué)生實(shí)操演練成績(jī)構(gòu)成。從互評(píng)、師評(píng)等角度，對(duì)學(xué)生進(jìn)行綜合評(píng)價(jià)