《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第1章Vue.js基礎(chǔ)單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標1.說出Vue是什么2.說出Vue的特點3.列出Vue開發(fā)環(huán)境需要什么軟件1.能夠分析出Vue的本質(zhì)3.能夠搭建出Vue的開發(fā)環(huán)境4.能夠以直接引入方式使用Vue.js1.激發(fā)民族自豪感和愛國熱情2.培養(yǎng)培養(yǎng)對課程的興趣教學(xué)重難點教學(xué)重點以直接引入方式使用Vue.js教學(xué)難點什么是Vue教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單（搭建開發(fā)環(huán)境、使用Vue.js）操作步驟手冊（搭建開發(fā)環(huán)境，使用Vue.js）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)1.了解前端技術(shù)發(fā)展。2.了解什么是Vue。3.了解Vue的特點。1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.前置知識體系回顧為了激發(fā)學(xué)生的學(xué)習(xí)興趣，體現(xiàn)學(xué)習(xí)的持續(xù)性，導(dǎo)入前置知識體系的詞云圖，引導(dǎo)學(xué)生進行互動知識回顧圖1前置課程知識體系詞云圖基于本課程的前置課程的關(guān)鍵詞，生成詞云圖。指導(dǎo)學(xué)生分組，隨機選擇不同組同號學(xué)生回答問題。主動參與課堂教學(xué)，一句詞云圖完成知識回顧。采用詞云圖既可助力學(xué)生梳理知識，還可以趣味化教學(xué)，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）問題討論人物假設(shè)：假設(shè)你是B站首頁開發(fā)的一員。問題討論：如果你的組長將B站首頁劃分成多個模塊，并給你分配了一個開發(fā)模塊，根據(jù)目前所掌握的知識體系，請問你在協(xié)同開發(fā)中可能會遭遇什么問題？（2）背景引入引入一段背景素材：源自Worktile社區(qū)文章《vue國內(nèi)開發(fā)的app有什么啊》、知乎問答帖《國內(nèi)有哪些公司在用Vue.js，有什么心得?》，引出Vue.js是熱門的網(wǎng)頁開發(fā)框架，為何要學(xué)習(xí)該框架。圖2教學(xué)引入資源來源采用問答式教學(xué)方法引導(dǎo)學(xué)生思考當前知識體系在網(wǎng)頁開發(fā)中存在的問題。課前提前主備好相關(guān)資源。分組討論，每組選擇一個代表簡述開發(fā)遇到的問題。聽完教師介紹后，結(jié)合課下預(yù)習(xí)內(nèi)容，匯報所了解到的前端技術(shù)發(fā)展。通過問題討論，讓學(xué)生總結(jié)并認識到傳統(tǒng)開發(fā)網(wǎng)頁存在的問題。從媒體和業(yè)內(nèi)人士的角度入手，介紹為什么要學(xué)習(xí)Vue。通過我國開發(fā)的APP，通過我國互聯(lián)網(wǎng)技術(shù)的發(fā)展,激發(fā)民族自豪感和愛國熱情,培養(yǎng)對課程的興趣。3.學(xué)新知—Vue.js認知（1）Vue.js定義Vue.js是一套聲明式的、組件化的JavaScript框架。（2）Vue.js特點采用MVVM模式、采用虛擬DOM、支持組件等。教師根據(jù)Vue.js的命名引導(dǎo)學(xué)生理解Vue.js的本質(zhì)是什么。教師分條闡述Vue.js的突出特點。學(xué)生根據(jù)教師的闡述理解并表達自己的理解學(xué)生根據(jù)已有的知識體系理解Vue.js的特點。通過講述結(jié)合學(xué)生所掌握的知識體系，幫助學(xué)生認知Vue.js4.學(xué)新知-Vue.js開發(fā)環(huán)境學(xué)習(xí)以直接方式使用Vue.js，需要準備的開發(fā)環(huán)境較為簡單，主要為代碼編輯器和瀏覽器。（1）代碼編輯器VisualStudioCode是常用的代碼編輯器。（2）瀏覽器火狐、谷歌瀏覽器是常用的網(wǎng)頁運行平臺，且可供調(diào)試。教師演示搜索、下載、安裝VisualStudioCode代碼編輯器。教師演示搜索、下載、安裝火狐、谷歌代碼編輯器。學(xué)生根據(jù)教師的操作，列出Vue.js開發(fā)環(huán)境的軟件名單，并總結(jié)出每個軟件的安裝步驟通過教師演示，學(xué)生總結(jié)，幫助學(xué)生掌握搭建開發(fā)環(huán)境的步驟5.練技能—搭建Vue.js開發(fā)環(huán)境（1）實操任務(wù)：本機安裝Vue.js開發(fā)環(huán)境所需軟件，并使用word文檔紀錄所有步驟。教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師隨堂檢查每個學(xué)生的操作步驟，并指點。學(xué)生按要求完成搭建任務(wù)。學(xué)生使用word紀錄每個操作步驟以結(jié)果。實操練習(xí)搭建開發(fā)環(huán)境，通過記錄來備忘，方便課后復(fù)習(xí)。6.學(xué)新知-以直接方式使用Vue.jsVue.js本質(zhì)是一個Js庫，可通過<script>標簽直接引入至HTML中，業(yè)務(wù)代碼可使用該庫提供的方法來進行開發(fā)。（1）頁面中引入、使用Vue.js代碼編輯器中新建html文檔，并創(chuàng)建好html結(jié)構(gòu)script標簽引入版本號為V3.0的Vue.js新建script標簽對，并在該標簽對通過Vue對象獲取createApp方法。使用createApp方法創(chuàng)建Vue實例，并掛載于id為app的元素上。瀏覽器中運行頁面，檢驗是否成功使用Vue.js谷歌瀏覽器中運行以上html文檔打開控制臺，查看是否報錯教師按照步驟演示引入、使用Vue.js教師按步驟演示瀏覽器中打開頁面，并查看控制臺的報錯學(xué)生根據(jù)教師的操作，總結(jié)引入、使用Vue.js的步驟學(xué)生根據(jù)教師的操作，總結(jié)如何檢驗是否成功使用了Vue.js通過教師演示，學(xué)生總結(jié)，幫助學(xué)生掌以直接方式使用Vue.js7.練技能實操任務(wù)：創(chuàng)建task01.html文檔，通過Vue.js的使用，在頁面展示出“helloworld”。創(chuàng)建task02.html文檔，通過Vue.js的使用，在頁面展示出“我學(xué)會了”。教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師展示舉手學(xué)生的代碼、頁面運行效果，并給與評分。學(xué)生通過編碼完成任務(wù)學(xué)生舉手展示任務(wù)完成情況。通過任務(wù)實操練習(xí)，加強實踐能力。課后拓展學(xué)生用思維導(dǎo)圖對本次課學(xué)習(xí)內(nèi)容進行小結(jié)，學(xué)習(xí)內(nèi)容包括：什么是Vue.js搭建Vue.js開發(fā)環(huán)境步驟

以直接引入方式使用Vue.js1.在“智慧職教”平臺推送課后任務(wù)。對本次課學(xué)習(xí)內(nèi)容回顧梳理小結(jié)（用XMind繪制思維導(dǎo)圖）。在“智慧職教”平臺（云課堂）按要求完成課后任務(wù)。1.復(fù)習(xí)鞏固。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第2章Vue.js數(shù)據(jù)綁定單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標1.說出Vue.js模板語法是什么2.說出Vue.js的模板語法的作用3.說出響應(yīng)式渲染機制1.能夠通過插值法將文本展示于DOM中2.能夠?qū)⒉逯岛捅磉_式結(jié)合起來，將表達式的運行結(jié)果展示于DOM中3.理解響應(yīng)式數(shù)據(jù)和普通數(shù)據(jù)之間的區(qū)別4.能夠配置響應(yīng)式數(shù)據(jù)1.激勵學(xué)生奮勇向前教學(xué)重難點教學(xué)重點插值表達式的使用教學(xué)難點響應(yīng)式數(shù)據(jù)的聲明教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單（MVVM模式示意圖、BMI計算）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)了解什么是模板語法了解MVVM模式1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧回顧上節(jié)課的知識點：Vue.js是什么？Vue.js有什么特點？Vue.js的開發(fā)環(huán)境需要安裝什么軟件？如何在html文檔中以直接引入方式使用Vue.js基于上節(jié)課的學(xué)習(xí)內(nèi)容，生成問題列表。指導(dǎo)學(xué)生分組，隨機選擇不同組同號學(xué)生回答問題。主動參與課堂教學(xué)，通過回答問題回顧知識。助力學(xué)生梳理知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）BMI計算的技術(shù)方案根據(jù)圖1給出的代碼，結(jié)合BMI（BMI=體重（kg）/［身高（m）×身高（m）］）公式，編寫js代碼，實現(xiàn)圖2所示的效果：圖1代碼片段圖2效果方案1：js通過獲取、操作DOM將js中定義的變量和計算所得結(jié)果插入HTML中。方案2：Vue.js的插值法教師課前提前主備好代碼文檔和效果圖。教師引導(dǎo)學(xué)生根據(jù)現(xiàn)有知識儲備提出方案1的實現(xiàn)步驟教師引出本節(jié)課的知識點，提出還有更為簡便的方案2學(xué)生根據(jù)代碼和效果圖，獨立思考解決方案。學(xué)生在引導(dǎo)下，舉手回答解決方案的步驟通過BMI計算的技術(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代碼示例運行示例，效果如圖4所示：圖4運行效果編碼步驟：獲取CreateApp方法調(diào)用CreateApp方法創(chuàng)建Vue實例調(diào)用實例方法mount掛載至DOM上創(chuàng)建data數(shù)據(jù)使用插值法將數(shù)據(jù)插入至DOM模板語法—插值表達式通過Mustache語法{{}}將表達式插入到DOM中。語法如下：{{age+10}}代碼示例，如圖5所示：圖5代碼示例運行示例，效果如圖6所示：圖5運行效果編碼步驟：根據(jù)效果圖，結(jié)合data中的數(shù)據(jù)，在模板中插入{{}}符號，并在該符號中編寫正確的表達式。年齡：直接插入age。哥哥的年齡：算術(shù)運算符+的表達式。所在城市：字符串方法split成年人：三元表達式教師講解Vue.js模板語法的定義和作用。教師通過語法展示，講解插值法的作用和使用場景后，按編碼步驟進行編碼，完成插值法的示例，并運行。教師隱去編碼步驟和部分代碼，引導(dǎo)學(xué)生總結(jié)編碼步驟。教師通過語法展示，講解插值表達式法的作用和使用場景后。展示相關(guān)示例的運行結(jié)果和部分代碼。根據(jù)現(xiàn)有結(jié)果和部分代碼，引導(dǎo)學(xué)生補充代碼。學(xué)生根據(jù)教師的闡述理解并表達自己的理解學(xué)生根據(jù)已有的知識體系理解Vue.js的特點。學(xué)生內(nèi)化插值語法并總結(jié)示例編碼步驟和編碼內(nèi)容。學(xué)生舉手總結(jié)編碼步驟，然后根據(jù)示例效果，完成示例編碼。學(xué)生在思考后，舉手上講臺補充代碼。通過講解語法、示例效果展示、示例代碼完善、步驟總結(jié)，幫助學(xué)生理解模板語法的使用；再隱去部分內(nèi)容，檢驗學(xué)生對知識的內(nèi)化效果，查漏補缺。插值法使用的案例，融入思政，激勵學(xué)生奮勇向前。4.學(xué)新知-響應(yīng)式聲明渲染機制Vue.js使用響應(yīng)式系統(tǒng)，當Vue.js中的數(shù)據(jù)發(fā)生變化，視圖中的數(shù)據(jù)會更新。（1）理解MVVM模式MVVM模式實現(xiàn)了“雙向綁定”的核心功能，可以使用簡潔的模板語法將數(shù)據(jù)聲明式渲染進DOM。MVVM模式如圖6所示，View：視圖，用戶界面Model：數(shù)據(jù)部分。ViewModel：連接視圖和數(shù)據(jù)模型，監(jiān)聽Model或View的變化。圖6MVVM模型圖（2）響應(yīng)式聲明渲染機制概念：模型（Model）層是普通的JavaScript對象，當視圖（View）層中的DOM節(jié)點上綁定了Vue.js的對象時，如果這個對象的屬性發(fā)生了任何改變，無須進行其他操作，頁面上的對應(yīng)的數(shù)據(jù)會自動發(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)式聲明渲染機制的概念。教師分別講解聲明響應(yīng)式狀態(tài)和聲明響應(yīng)式方法，并提問這些方法和狀態(tài)對應(yīng)MVVM模塊的哪部分？教師講解聲明響應(yīng)式狀態(tài)和聲明響應(yīng)式方法在模板中的使用，并提問使用的位置對應(yīng)MVVM模塊的哪部分？教師使用var定義數(shù)據(jù)、function定義方法，并插入模板中，提問是否能夠展示數(shù)據(jù)？為什么？學(xué)生理解MVVM后，畫出MVVM圖，并舉手展示。學(xué)生內(nèi)化理解聲明式渲染的概念。學(xué)生積極思考，舉手回答狀態(tài)和方法對應(yīng)Model部分。學(xué)生積極思考，舉手回答狀態(tài)和方法對應(yīng)View部分。學(xué)生根據(jù)響應(yīng)式聲明渲染機制的概念和應(yīng)用進行思考，舉手回答無法展示，因為只有定義在Model中的數(shù)據(jù)和方法才能應(yīng)用于模板中。先通過圖文幫助學(xué)上理解Vue.js的MVVM模式，有助于理解響應(yīng)式聲明渲染機制。結(jié)合MVVM機制講解響應(yīng)式聲明渲染機制的概念幫助學(xué)生理解。問題引導(dǎo)，幫助學(xué)生掌握響應(yīng)式渲染機制的概念和使用。5.練技能—BMI計算（1）實操任務(wù)：根據(jù)任務(wù)工單要求，完成BMI計算。編碼步驟：創(chuàng)建、掛載Vue實例創(chuàng)建響應(yīng)式數(shù)據(jù)：身高、體重插值法結(jié)合表達式渲染身高、體重、BMI教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師隨堂檢查每個學(xué)生的操作步驟，并指點。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過BMI計算的編碼任務(wù)，幫助學(xué)生通過獨立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計技術(shù)方案，并通過編碼完成。課后拓展學(xué)生完成課后作業(yè)：繪制MVVM圖，并解釋運行機制。解釋Vue.js模板語法是什么以及作用。使用插值法和聲明式響應(yīng)式機制等知識完成編碼任務(wù)。.在“智慧職教”平臺推送課后作業(yè)。在限定日期內(nèi)，于“智慧職教”平臺（云課堂）按要求完成課后作業(yè)。1.鞏固學(xué)習(xí)成果。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第2章Vue.js數(shù)據(jù)綁定單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標1.說出什么是屬性綁定2.說出屬性綁定的指令3.說出屬性綁定的數(shù)據(jù)來源4.說出計算屬性解決了什么問題5.說出計算屬性和方法的區(qū)別1.能夠正確定義響應(yīng)式數(shù)據(jù)，并通過屬性綁定指令綁定至DOM中。2.能夠定義、合理使用計算屬性中的方法。1.培養(yǎng)學(xué)生做事有計劃,有目標,一步步循序漸進完成目標教學(xué)重難點教學(xué)重點屬性綁定的使用教學(xué)難點理解計算屬性教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單（AA制）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)了解屬性綁定的概念了解計算屬性1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧根據(jù)作業(yè)批改的情況，總結(jié)學(xué)生作業(yè)中存在的問題。講解作業(yè)題目，在講解過程中回顧模板語法、響應(yīng)式渲染機制等知識點。點評班級作業(yè)。講解、編碼演示作業(yè)的解題思路和過程。反思課后作業(yè)存在的問題。一起參與作業(yè)題目的解答。助力學(xué)生回顧知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）聚餐AA制的技術(shù)方案根據(jù)圖1給出的代碼塊，實現(xiàn)圖2所示的效果：圖1代碼片段圖2效果方案1：使用插值表達式計算費用，但是現(xiàn)掌握的知識無法實現(xiàn)title提示，并且存在重復(fù)的計算表達式。方案2：插值法，結(jié)合屬性綁定，屬性計算等方法。教師課前提前主備好代碼文檔和效果圖。教師引導(dǎo)學(xué)生根據(jù)現(xiàn)有知識儲備提出方案1實現(xiàn)。教師引出本節(jié)課的知識點，提出還有更為高效、全面的方案2.學(xué)生根據(jù)代碼和效果圖，獨立思考解決方案。學(xué)生在引導(dǎo)下，完成編碼，并舉手展示效果。通過聚餐AA制的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—屬性綁定（1）問題引導(dǎo)—請列舉出你所指導(dǎo)的HTML屬性如：src、href、title、class、id。屬性綁定的概念將數(shù)據(jù)響應(yīng)式地綁定到一個HTML屬性上。屬性綁定指令屬性綁定指令為：v-bind，語法如下：v-bind:屬性名=”數(shù)據(jù)”簡寫為：:屬性名=”數(shù)據(jù)”代碼實例，如圖3所示。圖3代碼示例運行示例，效果如圖4所示：圖4運行效果編碼步驟：創(chuàng)建Vue實例，并掛載至id為app的元素上在data中創(chuàng)建響應(yīng)式數(shù)據(jù)。使用v-bind將響應(yīng)式數(shù)據(jù)綁定為HTML元素的屬性。案例新需求要求：當前案例中添加響應(yīng)式數(shù)據(jù)name，并賦值為代碼編輯者的姓名，實現(xiàn)如圖5的運行效果。圖5運行效果教師在智慧職教平臺發(fā)布列舉HTML屬性的問題，并一一點評討論區(qū)的發(fā)言。教師詳解屬性綁定的概念和語法，通過編碼示例及其運行效果將理論轉(zhuǎn)換成實踐。教師提問插值法和屬性綁定有何不同，有何相同？教師根據(jù)當前示例代碼，發(fā)布編碼需求。教師巡查學(xué)生編碼過程后。展示舉手學(xué)生的編碼效果。學(xué)生在討論區(qū)發(fā)言，列舉HTML屬性。學(xué)生花幾分鐘內(nèi)化屬性綁定的概念和語法、使用。學(xué)生回答不同在于插值法用于標簽對中、屬性綁定用于標簽上；相同之處在于數(shù)據(jù)均來源于定義的響應(yīng)式數(shù)據(jù)。學(xué)生根據(jù)需求要求，進行編碼。學(xué)生舉手，屏幕共享編碼效果。問題引導(dǎo)學(xué)生回顧HTML屬性是什么。為屬性綁定的學(xué)習(xí)鋪墊；通過理論、編碼實踐幫助學(xué)生深入理解屬性綁定；通過案例的新需求，考驗學(xué)生對知識點的掌握?！舅颊浚壕幋a過程中，通過編碼步驟的總結(jié)，培養(yǎng)學(xué)生做事有計劃,有目標,一步步循序漸進完成目標4.學(xué)新知-計算屬性（1）問題引入根據(jù)圖6所示的代碼，結(jié)合圖7所示的運行效果，補充圖6中的代碼。圖6代碼片段圖7運行效果解題答案：通過插值表達式實現(xiàn)，表達式為三元表達式。提問：當頁面運行效果如圖8所示，該怎么解答。圖8運行效果解題答案：通過插值表達式實現(xiàn)，表達式為三元表達式。存在的問題：模板中存在太多邏輯難以維護；大量重復(fù)代碼。解決辦法：將所有的邏輯抽取到一個方法中。計算屬性computedcomputed是一個對象，包含了多個自定義方法，用于計算屬性。代碼示例，如圖9所示：圖9示例代碼開發(fā)步驟：創(chuàng)建computed對象，并于該對象中定義bookCount方法。bookCount通過三元表達式判斷是否包含庫存，并將判斷結(jié)果返回。將bookCount作為變量名稱插入模板。計算屬性和方法的區(qū)別區(qū)別：計算屬性有緩存，只有當依賴數(shù)據(jù)發(fā)生變化，計算屬性才會進行計算。而方法則不然，不存在數(shù)據(jù)緩存。計算屬性的性能更高。根據(jù)教材提供的代碼片段和運行效果圖對比兩者的不同教師將準備好的案例代碼文檔發(fā)給學(xué)生，以供編碼使用。教師檢查第一次代碼補充的完成情況。教師展示多次提問庫存要求的運行效果，要求學(xué)生繼續(xù)補充代碼。教師檢查第二次代碼補充的完成情況。并提出當前解題存在的問題，并引出新的知識點。教師通過案例詳解計算屬性computed。隱藏部分代碼，給與學(xué)生使用computed補充代碼。教師提出將bookCount設(shè)置為方法而非computed計算屬性，然后通過插值表達式實現(xiàn)，會存在什么問題呢？接收案例代碼文檔，補充代碼。舉手，屏幕展示編碼成果。按要求，再次編碼。舉手，屏幕展示再次編碼成果。學(xué)生內(nèi)化computed計算屬性知識點后，完成編碼。學(xué)生翻閱教材中有關(guān)計算屬性和方法的區(qū)別這一小節(jié)中的案例，自學(xué)后，舉手回答存在的問題。學(xué)生通過已學(xué)知識編碼來體驗存在的問題，再通過新學(xué)知識編碼，從而使得學(xué)生在理論學(xué)習(xí)、實踐過程中體會新知識的優(yōu)點，深入理解、掌握computed計算屬性的使用場景和使用方法。5.練技能—聚餐AA制編碼（1）實操任務(wù)：根據(jù)任務(wù)工單要求，完成聚餐AA制。教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師隨堂檢查每個學(xué)生的操作步驟，并指點。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過聚餐AA制的編碼任務(wù)，幫助學(xué)生通過獨立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計技術(shù)方案，并通過編碼完成。課后拓展學(xué)生用思維導(dǎo)圖對本次課學(xué)習(xí)內(nèi)容進行小結(jié)。1.在“智慧職教”平臺推送課后任務(wù)。對本次課學(xué)習(xí)內(nèi)容回顧梳理小結(jié)（用XMind繪制思維導(dǎo)圖）。在“智慧職教”平臺（云課堂）按要求完成課后任務(wù)。1.復(fù)習(xí)鞏固。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第2章Vue.js數(shù)據(jù)綁定單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標1.說出Vue.js雙向數(shù)據(jù)綁定的概念。2.說出Vue.js雙向數(shù)據(jù)綁定的指令及其使用場景。3.說出Vue.js的生命周期有哪些，分別表示什么意思？1.能夠合理使用雙向數(shù)據(jù)綁定設(shè)置、獲取用戶輸入2.能夠區(qū)分出生命周期函數(shù)1.引導(dǎo)學(xué)生認識到在學(xué)習(xí)和成長過程中，要耐得住寂寞，腳踏實地積累知識，提升自身能力，為未來的發(fā)展筑牢根基教學(xué)重難點教學(xué)重點雙向數(shù)據(jù)綁定的使用教學(xué)難點區(qū)分周期函數(shù)教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單（奶茶訂單）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)了解什么是模板語法了解MVVM模式1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧回顧上節(jié)課的知識點：什么是屬性綁定？屬性綁定的指令？屬性綁定的數(shù)據(jù)來源？說出計算屬性解決了什么問題？計算屬性和方法的區(qū)別基于上節(jié)課的學(xué)習(xí)內(nèi)容，生成問題列表。指導(dǎo)學(xué)生分組，隨機選擇不同組同號學(xué)生回答問題。主動參與課堂教學(xué)，通過回答問題回顧知識。助力學(xué)生梳理知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）奶茶訂單根據(jù)圖1給出的代碼塊，實現(xiàn)圖2所示的效果：圖1代碼片段圖2效果技術(shù)方案討論使用當前所掌握的Vue.js知識，是否能實現(xiàn)頁面效果？如果能，請給出技術(shù)方案，反之說出存在的問題。答案：不能，因為無法獲取用戶的輸入，即視圖所展示數(shù)據(jù)的變化。雙向數(shù)據(jù)綁定指令v-model可以實現(xiàn)頁面效果。教師課前提前主備好需要補充的代碼文檔，并且使用已代碼實現(xiàn)的文檔演示頁面效果。教師引導(dǎo)學(xué)生根據(jù)現(xiàn)有知識儲備來進行技術(shù)方案的討論。教師引出本節(jié)課的知識點可實現(xiàn)頁面效果。學(xué)生根據(jù)頁面效果和代碼片段，總結(jié)出代碼層面需要實現(xiàn)數(shù)據(jù)搜集、展示的邏輯。學(xué)生在引導(dǎo)下，舉手回答當前需要Vue.js提供的技術(shù)實現(xiàn)頁面數(shù)據(jù)的獲取。通過“奶茶訂單”的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—雙向數(shù)據(jù)綁定（1）雙向數(shù)據(jù)綁定的概念當數(shù)據(jù)發(fā)生變化，視圖隨之更新，視圖發(fā)生變化，數(shù)據(jù)也會隨之更新。（2）Vue.js的v-model指令v-model指令用于雙向數(shù)據(jù)綁定，一般應(yīng)用于表單元素的數(shù)據(jù)綁定。語法：<inputv-model=”數(shù)據(jù)名稱”/>代碼示例，如圖3所示：圖3代碼示例運行示例，效果如圖4所示：圖4運行效果編碼步驟：獲取CreateApp方法調(diào)用CreateApp方法創(chuàng)建Vue實例調(diào)用實例方法mount掛載至DOM上創(chuàng)建data數(shù)據(jù)country，并賦值china使用v-model將country綁定至input文本輸入框。使用插值法將country插入到p標簽中。更多類型表單元素的雙向數(shù)據(jù)綁定除文本框input外，v-model還可應(yīng)用于textarea多行文本輸入、select選擇框、radio單選框、checkbox多選框等表單元素的雙向數(shù)據(jù)綁定。需要補充代碼的案例如圖5所示，補充代碼后，運行效果如圖6所示。圖5代碼片段注意：v-model綁定的是表單元素上的value值，同一個數(shù)據(jù)對于同一屬性的元素可能需要多次綁定，如checkbox多選框，并且，數(shù)據(jù)的類型也不同（多選框所對應(yīng)的數(shù)據(jù)類型為數(shù)組）編碼步驟根據(jù)表單元素的類型，在data中創(chuàng)建響應(yīng)式數(shù)據(jù)，并賦予初始值為空字符串，當數(shù)據(jù)對應(yīng)的是checkout，則該數(shù)據(jù)初始值為數(shù)組。依次在表單元素上運用v-model綁定定義的響應(yīng)式數(shù)據(jù)。使用插值法，將響應(yīng)式數(shù)據(jù)插入DOM中。圖6補充代碼后的運行效果教師講解Vue.js中雙向數(shù)據(jù)綁定的概念。教師詳解v-model語法，通過編碼示例及其運行效果將理論轉(zhuǎn)換成實踐。教師隱去編碼步驟和部分代碼后，巡視學(xué)生的編碼過程，并展示舉手學(xué)生的編碼效果。教師展示待補充代碼的HTML文檔，并演示補充代碼后的運行效果，提出通過v-model編碼實現(xiàn)。教師將待補充代碼的HTML文檔發(fā)送給學(xué)生，并且每過5分鐘，點評舉手同學(xué)所完成的一個雙向數(shù)據(jù)綁定。學(xué)生根據(jù)教師的闡述理解并表達自己的理解學(xué)生內(nèi)化v-model語法并總結(jié)示例編碼步驟和編碼內(nèi)容。學(xué)生根據(jù)對v-model所掌握的情況，以及對案例的理解進行編碼，然后舉手屏幕共享編碼效果。學(xué)生觀看HTML文檔以及演示效果。學(xué)生收到HTML文檔，根據(jù)演示效果，每完成一個表單元素的雙向數(shù)據(jù)綁定，即可舉手屏幕共享編碼效果。通過講解語法、示例效果展示、示例代碼完善，幫助學(xué)生理解v-model的使用；再隱去部分內(nèi)容，檢驗學(xué)生對知識的內(nèi)化效果，查漏補缺。通過案例拓展，幫助學(xué)生通過自主思考、創(chuàng)新思維來實現(xiàn)編碼效果。4.學(xué)新知-生命周期在生物學(xué)上，生命周期指的是一個生物體從生命開始到結(jié)束周而復(fù)始所歷經(jīng)的一系列變化過程。（1）Vue.js生命周期概念：每個組件從創(chuàng)建開始都可能需要經(jīng)歷掛載、更新、卸載等一系列的過程。生命周期函數(shù)：一些鉤子函數(shù)（回調(diào)函數(shù)），在某個時間會被Vue.js源碼內(nèi)部進行回調(diào)，在生命周期函數(shù)中可以編寫屬于自己的邏輯代碼。生命周期圖：圖7生命周期圖常用生命周期函數(shù)Vue.js各生命周期適合開發(fā)的業(yè)務(wù)邏輯。常用生命周期函數(shù)：Vue.js生命周期是：created、mounted、updated。主要業(yè)務(wù)應(yīng)用如下：created：進行AJAX請求異步數(shù)據(jù)的獲取，初始化數(shù)據(jù)。mounted：掛載元素內(nèi)DOM節(jié)點的獲取。updated：數(shù)據(jù)更新的統(tǒng)一業(yè)務(wù)邏輯處理。教師圖文詳解Vue.js生命周期，并隱去生命周期圖，提問Vue.js有哪些生命周期。教師結(jié)合常用的商品列表、廣告視頻等，提出生命周期函數(shù)在生命周期中的作用，并提問常見的網(wǎng)頁交互中，有什么功能依靠了什么生命周期。學(xué)生根據(jù)圖文詳解來理解Vue.js生命周期，并列舉出生命周期。學(xué)生思考，并上網(wǎng)搜索熟悉的網(wǎng)頁，然后舉手回答網(wǎng)頁交互使用了什么生命周期函數(shù)。圖文詳解幫助學(xué)生更加生動形象來理解生命周期。通過舉例常用的網(wǎng)頁交互來介紹常用的生命周期函數(shù)，不僅幫助學(xué)生深刻理解周期函數(shù)的重要性，也減輕了記憶的負擔；通過提問學(xué)生生命周期函數(shù)在網(wǎng)頁交互中的使用，檢驗學(xué)生學(xué)習(xí)成果?！舅颊谌搿浚涸诮榻B生命周期時，引導(dǎo)學(xué)生認識到在學(xué)習(xí)和成長過程中，要耐得住寂寞，腳踏實地積累知識，提升自身能力，為未來的發(fā)展筑牢根基5.練技能—奶茶訂單（1）實操任務(wù)：根據(jù)任務(wù)工單要求，完成奶茶訂單。教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師隨堂檢查每個學(xué)生的操作步驟，并指點。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過奶茶訂單的編碼任務(wù)，幫助學(xué)生通過獨立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計技術(shù)方案，并通過編碼完成。課后拓展學(xué)生完成課后作業(yè)：屬性綁定、雙向數(shù)據(jù)綁定的編碼。.在“智慧職教”平臺推送課后作業(yè)。在限定日期內(nèi)，于“智慧職教”平臺（云課堂）按要求完成課后作業(yè)。1.鞏固學(xué)習(xí)成果。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第3章Vue.js指令單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標說出什么是指令說出v-text、v-html指令的作用說出v-if指令的作用根據(jù)業(yè)務(wù)場景合理使用v-text、v-html指令使用v-if、v-else-if、v-else等指令實現(xiàn)條件渲染1.培養(yǎng)學(xué)生積極進取,不斷進步,爭創(chuàng)佳績的精神教學(xué)重難點教學(xué)重點v-if的基本使用教學(xué)難點v-if衍生出的v-else-if的使用教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單（詩歌背誦）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)了解v-text、v-html了解v-if、v-else、v-else-if1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧根據(jù)作業(yè)批改的情況，總結(jié)學(xué)生作業(yè)中存在的問題。講解作業(yè)題目，在講解過程中回顧上節(jié)課中胡知識點。點評班級作業(yè)。講解、編碼演示作業(yè)的解題思路和過程。反思課后作業(yè)存在的問題。一起參與作業(yè)題目的解答。助力學(xué)生回顧知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）詩歌背誦的技術(shù)方案根據(jù)圖1給出的代碼塊，實現(xiàn)圖2所示的效果：圖1代碼片段圖2效果技術(shù)方案：v-model作用于表單元素，實現(xiàn)雙向數(shù)據(jù)綁定，v-if指令，實現(xiàn)渲染。教師課前提前主備好代碼文檔和效果圖。教師根據(jù)任務(wù)技術(shù)方案引出本節(jié)課的知識點學(xué)生根據(jù)代碼和效果圖，參與討論當前哪些知識點可以融入解決部分問題。通過詩歌背誦的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—v-text、v-html（1）問題引導(dǎo)問題1：根據(jù)圖3所示代碼，頁面將會展示出什么？答案：<spanstyle='color:red'>hello</span>圖3代碼示例問題2：要求展示的數(shù)據(jù)只包含被標簽包裹的文本，怎么解決？答案：v-html指令v-html指令作用：將實例中的數(shù)據(jù)當做HTML標簽解析后輸出。等同于innerHTML屬性。如：<pv-html="msg"></p>，效果如圖4所示。圖4v-html實現(xiàn)效果v-text指令作用：將實例中的數(shù)據(jù)當做純文本輸出。等同于innerText屬性。如：<pv-text="msg"></p>，效果如圖5所示。圖5v-text實現(xiàn)效果教師在智慧職教平臺發(fā)布問題1，并一一點評討論區(qū)的發(fā)言。教師在智慧職教平臺發(fā)布問題2，并一一點評討論區(qū)的發(fā)言。引出使用v-html實現(xiàn)問題2的效果。教師分別詳解v-html、v-text等指令的作用和使用。教師隱藏PPT，在智慧職教發(fā)布問題：v-text、v-html有什么區(qū)別？學(xué)生在討論區(qū)發(fā)言，討論問題1。學(xué)生在討論區(qū)發(fā)言，討論問題2。學(xué)生根據(jù)定義和使用理解v-html、v-text等指令。學(xué)生在討論區(qū)發(fā)言，回答兩個指令的區(qū)別。問題引導(dǎo)，引出知識點，通過與已經(jīng)學(xué)習(xí)過得innerHTML、innerText進行類似匹配，幫助理解;通過總結(jié)兩個指令的區(qū)別，考察學(xué)生的學(xué)習(xí)效果。4.學(xué)新知-v-if（1）v-if指令語法作用：實現(xiàn)條件渲染。語法:v-if=”表達式”。當表達式為真，則渲染元素，反之隱藏元素。v-if指令案例案例1：根據(jù)isLogin、age等數(shù)據(jù)展示相關(guān)的p標簽。案例代碼如圖6，效果如圖7.圖6代碼片段圖7運行效果案例2：計數(shù)器案例。案例代碼如圖8所示。圖8代碼片段考一考v-if編碼1：補充圖9所示代碼片段，當isLogin為真，則展示歡迎您，反之展示請登錄的提示。圖9代碼片段v-else編碼2：使用var什么isLogin變量，并賦值為false,當isLogin為真，則打印歡迎您，反之打印請登錄的提示。答案：如圖10所示。圖10代碼片段同樣，v-if有相搭配的指令v-else，實現(xiàn)兩個條件的選擇，當v-if為假，則展示v-else所在的元素。編碼3：根據(jù)教材提供的案例3-14，對圖9所示的代碼進行補充，由isLogin數(shù)據(jù)決定元素的展示。v-else-if編碼4：使用var什么score變量，并賦值為90,根據(jù)score，打印出優(yōu)秀、良好、及格、不及格等成績等級。答案：如圖11.圖11代碼片段同樣，v-if有相搭配的指令v-else-if，實現(xiàn)多個條件的選擇，條件判斷的邏輯和if-else-if是一致的。提問：根據(jù)案例3-15的編碼，請講解該案例代碼的運行邏輯。教師分別詳解v-if指令的作用和語法。并通過兩個案例來演示v-if的使用。教師發(fā)布代碼文檔，投屏舉手學(xué)生的編碼1的效果。教師發(fā)布代碼文檔，投屏舉手學(xué)生的編碼2的效果。并引入v-else。教師引導(dǎo)學(xué)生學(xué)習(xí)教材案例3-14，完成編碼3，投屏舉手學(xué)生的編碼3的效果。教師發(fā)布代碼文檔，投屏舉手學(xué)生的編碼4的效果。并引入v-else-if。教師引導(dǎo)學(xué)生學(xué)習(xí)教材案例3-15，點評舉手學(xué)生的對該案例運行邏輯的解釋。學(xué)生理解v-if的作用和使用，接收案例代碼文檔，補充代碼。舉手，屏幕展示編碼成果1。舉手，屏幕展示編碼成果2。自學(xué)教案案例3-14，編碼并舉手，屏幕展示編碼成果3。舉手，屏幕展示編碼成果4。自學(xué)教案案例3-15，舉手解釋該案例的運行邏輯。通過與js的條件選擇語句if、else、else-if相結(jié)合，幫助學(xué)生理解v-if、v-else、v-else-if等條件渲染語句；要求學(xué)生通過已學(xué)的知識自學(xué)新的知識，提高其自學(xué)能力?！舅颊谌搿浚涸谝粋€又一個編碼挑戰(zhàn)下，鼓勵學(xué)生繼續(xù)努力，培養(yǎng)學(xué)生積極進取,不斷進步,爭創(chuàng)佳績的精神5.練技能—詩歌背誦編碼（1）實操任務(wù)：根據(jù)任務(wù)工單要求，完成詩歌背誦。教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師隨堂檢查每個學(xué)生的操作步驟，并指點。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過詩歌背誦的編碼任務(wù)，幫助學(xué)生通過獨立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計技術(shù)方案，并通過編碼完成。課后拓展學(xué)生用思維導(dǎo)圖對本次課學(xué)習(xí)內(nèi)容進行小結(jié)。1.在“智慧職教”平臺推送課后任務(wù)。對本次課學(xué)習(xí)內(nèi)容回顧梳理小結(jié)（用XMind繪制思維導(dǎo)圖）。在“智慧職教”平臺（云課堂）按要求完成課后任務(wù)。1.復(fù)習(xí)鞏固。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第3章Vue.js指令單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標說出v-show指令的作用說出v-on指令的作用說出v-for指令的作用區(qū)別出v-show、v-if使用v-on綁定事件處理函數(shù)使用v-for循環(huán)渲染列表1.對他人產(chǎn)生積極影響而不是消極影響教學(xué)重難點教學(xué)重點v-on綁定事件處理函數(shù)教學(xué)難點v-for列表循環(huán)教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單（數(shù)據(jù)比較）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)了解v-show指令了解v-on指令了解v-for指令1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧根據(jù)作業(yè)批改的情況，總結(jié)學(xué)生作業(yè)中存在的問題。講解作業(yè)題目，在講解過程中回顧上節(jié)課中胡知識點。點評班級作業(yè)。講解、編碼演示作業(yè)的解題思路和過程。反思課后作業(yè)存在的問題。一起參與作業(yè)題目的解答。助力學(xué)生回顧知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）數(shù)據(jù)計算的技術(shù)方案根據(jù)圖1給出的代碼塊，實現(xiàn)圖2所示的效果：圖1代碼片段圖2效果技術(shù)方案：v-model作用于表單元素，實現(xiàn)雙向數(shù)據(jù)綁定，v-on指令實現(xiàn)按鈕的點擊事件綁定，v-for循環(huán)列表展示，v-if結(jié)合v-else展示比較列表或者提示文案。教師課前提前主備好代碼文檔和效果圖。教師根據(jù)任務(wù)技術(shù)方案引出本節(jié)課的知識點學(xué)生根據(jù)代碼和效果圖，參與討論當前哪些知識點可以融入解決部分問題。通過數(shù)據(jù)計算的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—v-show（1）問題引導(dǎo)問題1：v-if的作用是什么？答案：實現(xiàn)條件渲染問題2：v-if為false，隱藏的元素是否仍然存在于html文檔中。答案：不存在。（2）v-show指令作用：實現(xiàn)條件渲染。語法:v-show=”表達式”。當表達式為真，則渲染元素，反之隱藏元素。問題3：隱藏的元素是否存在于HTML中？答案：存在。教師在智慧職教平臺發(fā)布問題1、問題2，并一一點評討論區(qū)的發(fā)言。教師對照v-if詳解v-show，在智慧職教平臺發(fā)布問題3，并一一點評討論區(qū)的發(fā)言。學(xué)生在討論區(qū)發(fā)言，討論問題1、問題2。學(xué)生通過編碼嘗試，并使用谷歌瀏覽器調(diào)試，得出問題3的答案，并在在討論區(qū)發(fā)言。問題引導(dǎo)，引出知識點，通過對照學(xué)習(xí)，幫助學(xué)生理解v-show，通過自學(xué)和調(diào)試的方式，找到問題的答案，提高學(xué)生的課堂參與度。4.學(xué)新知-v-on（1）問題引導(dǎo)問題1：請列舉出網(wǎng)頁中常見的事件類型。答案：如點擊、滾動、鼠標進入、鼠標離開，雙擊等。簡單的事件類型引出vue.js同樣需要處理這些事件。v-on指令作用：監(jiān)聽事件，綁定事件處理好函數(shù)。語法：v-on:事件類型=“事件處理函數(shù)”。簡寫：@事件類型=“事件處理函數(shù)”。案例：代碼如圖1所示，methods中定義事件處理函數(shù)，通過v-on綁定至元素上。圖2代碼片段考一考編碼1：根據(jù)圖3所示的代碼，實現(xiàn)圖4所示的效果。圖3代碼片段圖4頁面效果教師在智慧職教發(fā)布問題1，并一一點評討論區(qū)的發(fā)言。教師詳解v-on指令的作用和語法。并通過案例來演示v-on的使用。教師發(fā)布代碼文檔，投屏舉手學(xué)生的編碼1的效果。學(xué)生在討論區(qū)發(fā)言，討論問題1。學(xué)生理解v-on的作用和使用，完成編碼1。舉手，屏幕展示編碼1。通過熟悉的知識點引入新的知識點，理論結(jié)合實際講解知識點，幫助學(xué)生理解，在通過編碼挑戰(zhàn)來考察學(xué)習(xí)成果。4.學(xué)新知-v-for（1）引出新知編碼1：使用var聲明變量list，賦值為["流浪地球","滿江紅","無名"]，使用for循環(huán)打印每個數(shù)據(jù)元素。Vue.js的v-for能夠循環(huán)列表展示list中的數(shù)據(jù)。v-for指令作用：遍歷數(shù)組、對象，基于這些數(shù)據(jù)多次渲染元素或模版語法：v-for=”（item,idx)in數(shù)據(jù)”。其中，item為數(shù)據(jù)元素,id為該數(shù)據(jù)元素的序號。案例1：代碼如圖5所示。圖5代碼片段教師發(fā)布編碼1，投屏舉手學(xué)生的編碼1的效果。教師詳解v-on指令的作用和語法。并通過案例來演示v-on的使用。教師將案例1的部分代碼隱去，讓學(xué)生自己根據(jù)理解來補充代碼。舉手學(xué)生的編碼效果，點評學(xué)生的邏輯思路。完成編碼1，并舉手展示。理解v-for的語法和使用，補充代碼后，舉手展示，并闡述思路。通過熟悉的編碼題引出類似的知識點v-for，通過理論結(jié)合實踐幫助學(xué)生掌握知識點，再隱去部分代碼，鼓勵學(xué)生自主梳理邏輯并編碼，檢驗學(xué)習(xí)效果?！舅颊谌搿浚喊咐锏牧斜砹信e了一些比較優(yōu)秀的電影，尤其是滿江紅中的故事人物的互相影響，從而引導(dǎo)學(xué)生對他人產(chǎn)生積極影響而不是消極影響。5.練技能—數(shù)據(jù)比較編碼（1）實操任務(wù)：根據(jù)任務(wù)工單要求，完成詩數(shù)據(jù)比較。教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師隨堂檢查每個學(xué)生的操作步驟，并指點。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過數(shù)據(jù)比較的編碼任務(wù)，幫助學(xué)生通過獨立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計技術(shù)方案，并通過編碼完成。課后拓展學(xué)生完成課后作業(yè)：回答題、編碼題。.在“智慧職教”平臺推送課后作業(yè)。在限定日期內(nèi)，于“智慧職教”平臺（云課堂）按要求完成課后作業(yè)。1.鞏固學(xué)習(xí)成果。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第3章Vue.js指令單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標說出事件處理器訪問觸發(fā)事件的DOM元素說出什么是內(nèi)聯(lián)事件處理器列舉出事件修飾符及其作用列舉出常用的按鍵修飾符能夠根據(jù)業(yè)務(wù)場景的復(fù)雜性，靈活使用方法事件處理器和內(nèi)聯(lián)事件處理器能夠通過事件修飾符合理處理事件。能夠使用常用的按鍵修飾符完成特定的交互需求。1.告誡學(xué)生物以類聚、人以群分，近朱者赤、近墨者黑教學(xué)重難點教學(xué)重點多種按鍵修飾符教學(xué)難點內(nèi)聯(lián)事件處理器的使用教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備編碼任務(wù)的代碼文件（task01.html，task02.html,task03.html）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)了解事件處理器了解事件修飾符了解按鍵修飾符1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧根據(jù)作業(yè)批改的情況，總結(jié)學(xué)生作業(yè)中存在的問題。講解作業(yè)題目，在講解過程中回顧上節(jié)課中胡知識點。點評班級作業(yè)。講解、編碼演示作業(yè)的解題思路和過程。反思課后作業(yè)存在的問題。一起參與作業(yè)題目的解答。助力學(xué)生回顧知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）問題引導(dǎo)問題1：請列舉出你所熟知的頁面事件？問題2：當前使用Vue.js是否能夠處理這些事件？教師提問引出本節(jié)課的知識點學(xué)生思考，列舉出問題1的答案，并指出目前只能處理點擊事件。通過問題引出本節(jié)課的內(nèi)容。3.學(xué)新知—事件處理器（1）編碼引導(dǎo)編碼1：根據(jù)task01.html文檔，實現(xiàn)如圖1所示效果。圖1效果對于圖1所示的效果，可以使用方式事件處理器或內(nèi)聯(lián)事件處理器。方法事件處理器方法定義于methods中，通過v-on指令綁定該方法名，當監(jiān)聽到事件后，根據(jù)該方法名調(diào)用該方法。該方式已經(jīng)在前面的指令章節(jié)學(xué)習(xí)過。通過方法事件處理器可以訪問觸DOM元素。如圖2所示，event和js中事件一致，所包含的方法和屬性也是一致的。圖2訪問DOM元素內(nèi)聯(lián)事件處理器通常用于較簡單的場景，將js代碼直接寫入模板中。對于如圖1所示的效果，第二種解決方案的代碼如圖3所示：圖3內(nèi)聯(lián)事件處理器考一考編碼2：代碼補充task02.html，請使用內(nèi)聯(lián)事件處理器調(diào)用methods中定義的方法。教師發(fā)布編碼1任務(wù)。點評舉手學(xué)生的編碼1效果。并引出事件處理器。教師根據(jù)js中的事件，結(jié)合方法事件處理器，講解如何通過方法獲取DOM元素教師講解內(nèi)聯(lián)事件處理器，并演示如何使用內(nèi)聯(lián)方法處理器實現(xiàn)編碼1.教師發(fā)布編碼2，并點評舉手學(xué)生的編碼2.學(xué)生完成編碼1，并舉手展示編碼。學(xué)生理解方法事件處理器和內(nèi)聯(lián)事件處理器的區(qū)別。學(xué)生完成編碼2，并舉手展示編碼效果。通過一個需求的兩中編碼方式引出事件處理器；通過編碼2考考學(xué)生對兩種編碼的理解。4.學(xué)新知-事件修飾符（1）問題引導(dǎo)問題1：DOM事件傳播的順序答案：事件捕獲-目標階段-事件冒泡。問題2：阻止事件傳播的js方法是什么？答案：stopPropagation問題3：阻止事件默認行為的方法是什么？答案：preventDefault以上問題均為js基礎(chǔ)，在Vue.js中由新的方法和屬性來實現(xiàn)。（2）事件修飾符常見的事件修飾符：:stop：阻止事件傳播:prevent:阻止事件默認行為:self：僅元素自身觸發(fā)事件修飾符綁定在事件類型后，無需在事件處理函數(shù)中調(diào)用方法，使用簡便。代碼案例如圖4所示圖4代碼片段（3）練一練隱去圖4所示代碼片段中的部分代碼，如圖5所示，補充代碼，完成需求。圖5隱去代碼后教師依次發(fā)布問題1、2、3，點評學(xué)生的回答。教師講隱去部分代碼的問題發(fā)布給學(xué)生。并點評舉手學(xué)生的代碼補充效果。學(xué)生舉手回答問題1、2、3.學(xué)生接受代碼文件，并舉手展示編碼效果通過問題幫助學(xué)生回顧已學(xué)習(xí)的事件方法，從而更加容易理解新的知識點；通過代碼隱去和補充，檢查學(xué)生的學(xué)習(xí)成果【思政融入】：在講解事件傳播時，告誡學(xué)生物以類聚、人以群分，近朱者赤、近墨者黑學(xué)新知-按鍵修飾符按鍵修飾符有些事件時通過按鍵觸發(fā)的，因此在監(jiān)聽鍵盤時需要檢查特定的按鍵。按鍵事件：keyup常用的修飾符如：enter、tab、delete、esc、space、up、down、left、right.代碼案例使用enter、down修飾符，代碼案例如圖6所示。圖6代碼片段練一練隱去圖6所示代碼片段中的部分代碼，如圖7所示，補充代碼，完成需求。圖7代碼片段教師分別詳解常見的按鍵修飾符教師講隱去部分代碼的問題發(fā)布給學(xué)生。并點評舉手學(xué)生的代碼補充效果。學(xué)生接受代碼文件，并舉手展示編碼效果通過代碼隱去和補充，檢查學(xué)生的學(xué)習(xí)成果5.總結(jié)歸納（1）事件處理器的種類以及如何使用（2）如何獲取DOM元素（3）常用事件修飾符有哪些，分別能夠使用在什么業(yè)務(wù)場景下。（4）常用的按鍵修飾符有哪些，分別代表什么，在什么業(yè)務(wù)場景下使用。教師列舉需要歸納總結(jié)的內(nèi)容，并點評舉手學(xué)生的回答學(xué)生舉手通過回答問題總結(jié)歸納。歸納總結(jié)，檢查學(xué)習(xí)成果，并鍛煉歸納能力。課后拓展學(xué)生用思維導(dǎo)圖對本次課學(xué)習(xí)內(nèi)容進行小結(jié)。1.在“智慧職教”平臺推送課后任務(wù)。對本次課學(xué)習(xí)內(nèi)容回顧梳理小結(jié)（用XMind繪制思維導(dǎo)圖）。在“智慧職教”平臺（云課堂）按要求完成課后任務(wù)。1.復(fù)習(xí)鞏固。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第4章事件處理單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標說出watch偵聽器的作用定義watch偵聽器根據(jù)業(yè)務(wù)場景合理使用watch偵聽器能夠區(qū)別watch偵聽器和v-model1.開展愛國主義教育，提高警惕，維護國家安全教學(xué)重難點教學(xué)重點watch偵聽器的使用教學(xué)難點區(qū)分watch偵聽器和v-model教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單（年齡變化）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)了解watch1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧根據(jù)作業(yè)批改的情況，總結(jié)學(xué)生作業(yè)中存在的問題。講解作業(yè)題目，在講解過程中回顧上節(jié)課中知識點。點評班級作業(yè)。講解、編碼演示作業(yè)的解題思路和過程。反思課后作業(yè)存在的問題。一起參與作業(yè)題目的解答。助力學(xué)生回顧知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）年齡變化根據(jù)提供的代碼文件，完成圖1所示的效果。圖1頁面效果知識點：v-model、v-on、watch教師課前提前主備好代碼文檔和效果圖。教師根據(jù)任務(wù)技術(shù)方案引出本節(jié)課的知識點學(xué)生根據(jù)代碼和效果圖，參與討論當前哪些知識點可以融入解決部分問題。通過數(shù)據(jù)計算的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—watch（1）編碼引入編碼1：根據(jù)如圖2所示的代碼片段及其注釋的要求，補充代碼。圖2代碼片段問題1：當商品數(shù)量發(fā)生變化時，打印出變化前的數(shù)量和變化后的數(shù)量，目前是否可以實現(xiàn)？答案：不可以。編碼中通過v-model實現(xiàn)數(shù)據(jù)的雙向綁定，遵循MVVM模式，使得頁面數(shù)據(jù)變化后，data中定義的數(shù)據(jù)自動變化，。但是目前無法監(jiān)聽到數(shù)據(jù)變化前后的不同。需要通過watch實現(xiàn)。watch偵聽作用：當數(shù)據(jù)狀態(tài)發(fā)生變化時，可實時地偵聽這個數(shù)據(jù)。語法：如下所示。watch:{數(shù)據(jù)名(newValue,oldValue){}}代碼演示在編碼1中修改代碼，通過watch監(jiān)聽數(shù)據(jù)變化，如圖3所示。圖3代碼片段深層次偵聽器watch默認的偵聽方式為淺層次偵聽，若偵聽的數(shù)據(jù)為對象，僅在對象被重新賦值時才會觸發(fā)回調(diào)函數(shù)，當數(shù)據(jù)屬性發(fā)生變化，則不會觸發(fā)。若需要偵聽對象屬性的變化，則需要使用深層次偵聽器。語法如下：watch:{數(shù)據(jù)名：｛handler(newValue,oldValue)｛｝,deep:true｝}代碼案例如圖4所示代碼，當info對象的id發(fā)生變化，則監(jiān)聽器將會調(diào)用info對應(yīng)的處理函數(shù)。圖4代碼片段考一考編碼2：隱藏watch所有案例的部分代碼，如圖5所示，補充代碼。圖5代碼片段教師發(fā)布編碼1的HTML文件，并點評舉手學(xué)生的代碼展示。教師發(fā)布問題1，點評舉手學(xué)生的回答。教師發(fā)布隱藏代碼后的HTML文件；點評舉手學(xué)生展示的代碼。學(xué)生接收編碼1的代碼文件并按要求補充，然后舉手展示代碼。學(xué)生舉手回答問題1。學(xué)生接受編碼2對應(yīng)的文件，完成編碼，并舉手展示成果。通過編碼和問題引導(dǎo)出目前需要watch解決編碼問題；理論結(jié)合案例講解后，通過隱藏代碼后重新編碼，檢查學(xué)習(xí)效果。5.練技能—年齡變化編碼（1）實操任務(wù)：根據(jù)任務(wù)工單要求，完成年齡變化。教師發(fā)布任務(wù)，強調(diào)任務(wù)要求。教師隨堂檢查每個學(xué)生的操作步驟，并指點。學(xué)生按要求編碼。學(xué)生舉手展示任務(wù)完成情況。通過年齡變化的編碼任務(wù)，幫助學(xué)生通過獨立思考，根據(jù)今天所學(xué)內(nèi)容，設(shè)計技術(shù)方案，并通過編碼完成。課后拓展學(xué)生完成課后作業(yè)：回答題、編碼題。.在“智慧職教”平臺推送課后作業(yè)。在限定日期內(nèi)，于“智慧職教”平臺（云課堂）按要求完成課后作業(yè)。1.鞏固學(xué)習(xí)成果。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第4章Vue.js事件處理單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標掌握Vue項目的創(chuàng)建掌握組件結(jié)構(gòu)的編寫。根據(jù)項目效果，分析、梳理項目功能。能夠根據(jù)項目效果，獨立搭建項目，并實現(xiàn)項目的靜態(tài)頁面效果。培養(yǎng)學(xué)生的分析、總結(jié)能力。教學(xué)重難點教學(xué)重點組件結(jié)構(gòu)的編寫教學(xué)難點項目的功能分析教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單資源準備智慧職教平臺項目代碼教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前自學(xué)復(fù)習(xí)第1周-第4周的學(xué)習(xí)內(nèi)容。復(fù)習(xí)HTML中的表單、表格1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。1.通過發(fā)布自學(xué)任務(wù)，為本節(jié)課的實踐做準備。課中導(dǎo)學(xué)“學(xué)習(xí)計劃表”的功能分析運行、演示“學(xué)習(xí)計劃表”項目。發(fā)布任務(wù)：請根據(jù)演示的效果，在智慧職教討論區(qū)寫出功能點。在智慧職教逐個檢查、閱讀學(xué)生編寫的功能點，并點評?？偨Y(jié)、分條列出功能點。學(xué)生觀看、分析項目效果。學(xué)生在智慧職教討論區(qū)列出功能點。學(xué)生一起閱讀其他學(xué)生列出的功能點，并給出補充。學(xué)生和教師一起總結(jié)功能點。通過項目演示，使得項目的實現(xiàn)效果更加生動。通過分析、總結(jié)、點評、總結(jié)等多個環(huán)節(jié)，鍛煉學(xué)生的分析歸納能力。制定“添加”模塊結(jié)構(gòu)發(fā)布任務(wù)：分析、列出“添加”模塊的構(gòu)成，請在智慧職教討論區(qū)發(fā)表。在智慧職教閱讀學(xué)生列出有關(guān)“添加模塊”的構(gòu)成，并點評。教師編碼“添加”模塊的結(jié)構(gòu)。發(fā)布任務(wù)：根據(jù)編碼演示，自行補充完成“添加模塊”的HTML結(jié)構(gòu)編碼。學(xué)生接收任務(wù)，并在智慧職教列出模塊的構(gòu)成。學(xué)生一起閱讀其他學(xué)生列出的功能點，并給出補充。學(xué)生和教師一起完成“添加”模塊結(jié)構(gòu)的編碼。學(xué)生完成HTML編碼。引導(dǎo)學(xué)生思考、分析出模塊的結(jié)構(gòu)。制定“計劃表”模塊結(jié)構(gòu)發(fā)布任務(wù)：分析、列出“計劃表”模塊的構(gòu)成，請在智慧職教討論區(qū)發(fā)表。在智慧職教閱讀學(xué)生列出有關(guān)“計劃表”的構(gòu)成，并點評。教師編碼“計劃表”模塊的結(jié)構(gòu)。發(fā)布任務(wù)：根據(jù)編碼演示，自行補充完成“計劃表模塊”的HTML結(jié)構(gòu)編碼。學(xué)生接收任務(wù)，并在智慧職教列出模塊的構(gòu)成。學(xué)生一起閱讀其他學(xué)生列出的功能點，并給出補充。學(xué)生和教師一起完成“計劃表”模塊結(jié)構(gòu)的編碼。學(xué)生完成HTML編碼。引導(dǎo)學(xué)生思考、分析出模塊的結(jié)構(gòu)。課后拓展根據(jù)功能點、模塊HTML結(jié)構(gòu)，分析、制定技術(shù)方案。發(fā)布項目功能點、HTML結(jié)構(gòu)，要求學(xué)生根據(jù)現(xiàn)有資料分析、制定技術(shù)方案。根據(jù)現(xiàn)有資料，分析、制定技術(shù)方案1.培養(yǎng)學(xué)生自主分析、獨立制定技術(shù)方案的能力。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元Vue.js開發(fā)基礎(chǔ)單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標深刻掌握雙向數(shù)據(jù)綁定知識點。深刻掌握列表渲染知識點。深刻掌握響應(yīng)式數(shù)據(jù)知識點。深刻掌握事件處理知識點。能夠根據(jù)雙向數(shù)據(jù)綁定來處理表單元素數(shù)據(jù)的收集。能夠根據(jù)列表渲染來渲染表格數(shù)據(jù)。能夠通過響應(yīng)式數(shù)據(jù)來實現(xiàn)數(shù)據(jù)和頁面的同步更新。能夠通過事件處理來處理用戶的頁面行為。培養(yǎng)學(xué)生的分析、總結(jié)能力。培養(yǎng)學(xué)生的綜合應(yīng)用能力。培養(yǎng)學(xué)生撰寫等能力。教學(xué)重難點教學(xué)重點雙向數(shù)據(jù)綁定教學(xué)難點響應(yīng)式數(shù)據(jù)教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備任務(wù)工單資源準備智慧職教平臺項目代碼教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前自學(xué)根據(jù)功能點、模塊HTML結(jié)構(gòu)，分析、制定技術(shù)方案。發(fā)布項目功能點、HTML結(jié)構(gòu)，要求學(xué)生根據(jù)現(xiàn)有資料分析、制定技術(shù)方案。根據(jù)現(xiàn)有資料，分析、制定技術(shù)方案1.培養(yǎng)學(xué)生自主分析、獨立制定技術(shù)方案的能力。課中導(dǎo)學(xué)制定項目整體技術(shù)方案提問：分別使用一句話概括“添加”模塊、“學(xué)習(xí)計劃表”的作用。總結(jié)兩個模塊的作用和聯(lián)系。并通過畫圖的方式描述。根據(jù)上一步的畫圖，使用Vue的數(shù)據(jù)模塊描述兩者的聯(lián)系，并提問使用什么用類型的數(shù)據(jù)存儲列表，數(shù)據(jù)是否需要響應(yīng)式？提問：添加、展示、刪除等操作，本質(zhì)上對什么進行操作？教師總結(jié)技術(shù)方案：添加模塊將收集數(shù)據(jù)存儲在響應(yīng)式數(shù)組中，列表模塊展示數(shù)組中的數(shù)據(jù)，刪除操作是對數(shù)組中的數(shù)據(jù)進行刪除。學(xué)生舉手概括兩個模塊的作用。深刻理解兩個模塊的作用和聯(lián)系。、學(xué)生舉手回答使用響應(yīng)式的數(shù)組來描述兩者的關(guān)系。學(xué)生舉手回答本質(zhì)是對響應(yīng)式數(shù)組進行操作。學(xué)生理解技術(shù)方案。通過問題引導(dǎo)，幫助學(xué)生透過現(xiàn)象看本質(zhì)，提煉出技術(shù)方案。制定“添加”模塊的方案細節(jié)提問：添加模塊使用到哪些Vue的知識點，每個知識點的能夠解決什么問題？點評學(xué)生回答?？偨Y(jié)“添加”模塊的技術(shù)方案。舉手回答使用了雙向數(shù)據(jù)綁定、響應(yīng)式數(shù)據(jù)、事件處理等知識點來收集數(shù)據(jù)、并添加數(shù)據(jù)至響應(yīng)式數(shù)組中。補充同學(xué)的回答。深刻理解“添加”模塊的技術(shù)方案問題引導(dǎo)，幫助學(xué)生獨立思考，自主制定技術(shù)方案細節(jié)。制定“計劃表”模塊的方案細節(jié)提問：“計劃表”模塊使用到哪些Vue的知識點，每個知識點的能夠解決什么問題？點評學(xué)生回答?？偨Y(jié)“計劃表”模塊的技術(shù)方案。舉手回答使用了列表渲染、事件處理等知識點來展示數(shù)據(jù)、并從響應(yīng)式數(shù)組中刪除數(shù)據(jù)。補充同學(xué)的回答。深刻理解“計劃表”模塊的技術(shù)方案問題引導(dǎo)，幫助學(xué)生獨立思考，自主制定技術(shù)方案細節(jié)。編碼項目功能，完成項目開發(fā)發(fā)布任務(wù)，根據(jù)總結(jié)的技術(shù)方案，編碼完成項目的開發(fā)編碼項目培養(yǎng)學(xué)生獨立自主的編碼能力，將理論轉(zhuǎn)換為實戰(zhàn)。課后拓展編寫該項目的說明書編寫“學(xué)習(xí)計劃表”項目說明書，包括項目的整體方案、各模塊的方案細節(jié)，實現(xiàn)的效果如何，經(jīng)驗總結(jié)。按照要求撰寫項目說明書，并提交至智慧職教。1.培養(yǎng)學(xué)生總結(jié)、歸納、撰寫等能力。教學(xué)評價1.評價構(gòu)成由“智慧職教”系統(tǒng)成績和學(xué)生實操演練成績構(gòu)成。從互評、師評等角度，對學(xué)生進行綜合評價考核。2.評價要素智慧職教平臺完成課中和課后全過程學(xué)習(xí)軌跡記錄和評價。主要包括：課堂簽到、課堂活動、課堂考核、課后拓展等要素。3.評價主體課堂簽到情況等由智慧職教平臺自動記錄并打分。課堂活動、課堂考核由學(xué)生和老師共同評價，課后拓展主要由教師評價。反思診改《JavaScript前端框架應(yīng)用》課程單元教學(xué)設(shè)計課程名稱JavaScript前端框架應(yīng)用授課單元第5章Vue.js樣式綁定單元學(xué)時2授課教師職稱授課地點教學(xué)目標知識目標能力目標素質(zhì)目標說出樣式綁定的指令說出樣式類綁定的常用數(shù)據(jù)類型（字符串、對象）能夠區(qū)分出靜態(tài)綁定和動態(tài)綁定樣式類的區(qū)別能夠使用字符串數(shù)據(jù)綁定樣式類能夠使用對象數(shù)據(jù)綁定樣式類引導(dǎo)學(xué)生樹立起責任擔當?shù)囊庾R，才能讓他們在學(xué)習(xí)和生活中更加積極主動，勇于承擔起自己的責任。教學(xué)重難點教學(xué)重點動態(tài)綁定樣式類的兩種使用教學(xué)難點將對象綁定給樣式類教學(xué)策略教學(xué)組織以任務(wù)為導(dǎo)向，將教學(xué)內(nèi)容進行結(jié)構(gòu)化，整個教學(xué)過程分為課前自學(xué)、課中導(dǎo)學(xué)、課后拓展三個教學(xué)環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學(xué)方法鑒于學(xué)生的學(xué)習(xí)積極性、主動性不高，分析、解決問題的能力較弱，教師采用小組搶答、任務(wù)驅(qū)動、讓學(xué)生多體驗、多積累。教學(xué)準備環(huán)境準備多媒體教室資料準備編碼任務(wù)的代碼文件（背景色變化，選項卡切換）資源準備教材配套教學(xué)視頻資源教學(xué)實施過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教師活動學(xué)生活動設(shè)計意圖（含思政融入點）課前預(yù)習(xí)樣式類綁定的指令樣式類綁定的數(shù)據(jù)類型1.在“智慧職教”平臺發(fā)布課前任務(wù)。1.在“智慧職教”查看課前任務(wù)要求。明確自學(xué)目標，通過自主學(xué)習(xí)，培養(yǎng)自主梳理知識的能力。課中導(dǎo)學(xué)1.知識回顧根據(jù)作業(yè)批改的情況，總結(jié)學(xué)生作業(yè)中存在的問題。講解作業(yè)題目，在講解過程中回顧上節(jié)課中胡知識點。點評班級作業(yè)。講解、編碼演示作業(yè)的解題思路和過程。反思課后作業(yè)存在的問題。一起參與作業(yè)題目的解答。助力學(xué)生回顧知識，讓學(xué)生盡快深度參與課堂。2.教學(xué)引入（1）背景色變化的技術(shù)方案根據(jù)圖1給出的代碼塊，實現(xiàn)圖2所示的效果：圖1代碼片段圖2運行效果技術(shù)方案：v-model作用于表單元素，實現(xiàn)雙向數(shù)據(jù)綁定，動態(tài)綁定樣式類實現(xiàn)背景色的切換。選項卡切換的技術(shù)方案根據(jù)圖2給出的代碼塊，實現(xiàn)圖3所示的效果：圖3代碼片段圖4運行效果技術(shù)方案：v-on作用于可點擊的選項來綁定點擊事件，動態(tài)綁定樣式類實現(xiàn)選項卡的切換。教師課前提前主備好代碼文檔，并演示運行效果。教師根據(jù)任務(wù)技術(shù)方案引出本節(jié)課的知識點學(xué)生根據(jù)代碼和效果圖，參與討論當前哪些知識點可以融入解決部分問題。通過背景色變化的技術(shù)方案的討論，引出本節(jié)課的內(nèi)容。3.學(xué)新知—動態(tài)綁定樣式類（字符串）（1）問題引導(dǎo)問題1：在style定義樣式類smallFont，如何能夠作用于HTML標簽。答案：賦值為HTML標簽的class屬性。代碼演示：demo5-01.html文件，定義三個樣式類分別作用于HTML標簽，代碼如圖4所示。圖5代碼片段問題2：當修改樣式類，或者添加樣式類需要哪些處理？答案：操作DOM及DOM屬性。以上代碼是靜態(tài)的樣式類綁定，通過操作DOM和DOM屬性來動態(tài)修改樣式類比較復(fù)雜，Vue.js提供的動態(tài)綁定樣式類能夠解決為樣式類綁定字符串語法：v-bind:class=”數(shù)據(jù)名稱”數(shù)據(jù)在data中定義，數(shù)據(jù)的賦值來自于定義好樣式。代碼演示如圖6所示：圖6代碼片段瀏覽器中運行，控制臺中查看標簽上的樣式類值如圖7所示。圖7運行效果教師提問1，并點評舉手學(xué)生的回答。教師代碼演示2，提問后，點評舉手學(xué)生的回答，并引出知識點。教師講解動態(tài)綁定樣式類（字符串）的語法、代碼演示。教師隱去代碼，發(fā)布代碼文件給學(xué)生來進行補充，并對舉手展示效果的學(xué)生進行點評。學(xué)生舉手回答問題1.學(xué)生舉手回答問題2學(xué)生根據(jù)講解和演示來理解動態(tài)綁定樣式類。接受文件，補充代碼，舉手展示補充結(jié)果。問題引導(dǎo)學(xué)生思考靜態(tài)綁定存在的問題，從而引出動態(tài)綁定的知識點，并理論結(jié)合實戰(zhàn)，幫助學(xué)生內(nèi)化知識點?！舅颊?/p>