教案編號1學時2上課班級執行時間授課題目VSCode編輯器教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握VSCode編輯器的使用。教學重點、難點掌握VSCode編輯器的使用。教學資源范例及素材見“素材“文件夾教學內容與過程一、導入新課導入新課：介紹常用的編輯器，引入學習VSCode編輯器的使用。二、新課教學內容(操作演示講授)1、下載及安裝VSCode2、VSCode的界面介紹3、插件的獲取及安裝4、前端開發常用插件5、VSCode常用快捷操作三、課堂訓練1、安裝VSCode。2、漢化操作界面。3、安裝前端開發常用插件四、課堂小結五、布置作業在傳智教育.高校教輔平臺上注冊，并加入課堂/7-8班課堂序列號：29407c9-10班課堂序列號：29408g11-12-15班課堂序列號：29409d13-14-16班課堂序列號：29410f教學反思

教案編號2學時2上課班級執行時間授課題目ES6語法（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求1、掌握let定義變量。2、掌握變量的解構賦值3、掌握rest參數4、掌握箭頭函數定義和使用教學重點、難點掌握變量的解構賦值、箭頭函數定義和使用。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習二、新課教學內容(操作演示講授)1、變量、常量聲明2、變量的解構賦值3、rest參數4、箭頭函數三、課堂訓練1、上機訓練1-let命令使用。2、上機訓練2-對象的解構賦值使用。教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課作業。教學反思

教案編號3學時2上課班級執行時間授課題目ES6語法（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求1、掌握模板字符串2、了解Module的語法3、了解Promise的基本用法教學重點、難點重點掌握模板字符串；難點：Promise的基本用法。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習：上次課的內容。導入新課：ES6.0語法的學習二、新課教學內容(操作演示講授)1、模板字符串2、Module的語法3、Promise的基本用法三、課堂訓練上機訓練-使用timeout方法返回一個Promise實例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號4學時2上課班級執行時間授課題目Vue入門（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求1、掌握Vue的核心設計思想。2、掌握Vue開發的步驟。教學重點、難點Vue的核心設計思想、使用Vue開發開發步驟教學資源范例及素材見“素材“文件夾教學內容與過程一、復習二、新課教學內容(操作演示講授)1、Vue框架的優點2、Vue高效開發示例分析3、Vue是如何實現數據驅動的（MVVM開發模式）4、下載及安裝Vue5、使用Vue開發三、課堂訓練上機訓練-下載及安裝Vue，用VUE實現在計數的小應用，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號5學時2上課班級執行時間授課題目Vue入門（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握Vue開發和調試工具的使用教學重點、難點掌握Vue開發和調試工具的使用教學資源范例及素材見“素材“文件夾教學內容與過程一、復習復習MVVM開發模式。二、新課教學內容(操作演示講授)1、Vue開發計數的小應用。2、安裝和使用調試工具的使用三、課堂訓練上機訓練：上機完成教材第三章示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號6學時2上課班級執行時間授課題目Vue指令（1）數據綁定教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握Vue數據與頁面綁定的指令，條件與列表渲染。教學重點、難點掌握條件與列表渲染教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習使用Vue開發的步驟，MVVM開發模式。二、教學內容(操作演示)1、文本節點綁定指令2、屬性節點綁定3、樣式綁定4、條件渲染5、列表渲染6、v-pre指令和v-once指令三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號7學時2上課班級執行時間授課題目Vue指令（2）--數據雙向綁定教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握v-model指令的功能和使用方法，掌握頁面各種表單控制與Vue數據綁定教學重點、難點掌握頁面各種表單控制與Vue數據綁定教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、input和textarea元素2、radio和checkbox元素3、select元素4、雙向綁定修飾符三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號8學時2上課班級執行時間授課題目Vue指令（3）--事件綁定教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握v-on指令的功能和使用方法，掌握事件修飾符的意義及應用場景。教學重點、難點掌握事件修飾符的意義及應用場景。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、監聽事件2、事件修飾符三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號9學時2上課班級執行時間授課題目Vue實例對象（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求1、掌握配置對象常用的配置選項。2、掌握Vue實例生命周期。教學重點、難點掌握配置對象常用的配置選項、掌握Vue實例生命周期教學資源范例及素材見“素材“文件夾教學內容與過程一、復習二、新課教學內容(操作演示講授)1、配置對象常用的配置選項(1)methods方法(2)計算屬性computed(3)watch偵聽器(4)過濾器filters2、Vue實例生命周期(1)Vue實例生命周期各階段(2)Vue實例生命周期狀態與鉤子函數示例三、課堂訓練學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號10學時2上課班級執行時間授課題目Vue實例對象（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握常用的Vue實例屬性、和方法。教學重點、難點掌握常用的Vue實例屬性、和方法。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習二、新課教學內容(操作演示講授)1、常用的Vue實例屬性2、常用的Vue實例方法（1）實例方法/數據（2）實例方法/事件（3）實例方法/生命周期三、課堂訓練學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號11學時2上課班級執行時間授課題目Vue組件（1）組件定義及調用教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握Vue組件的意義及組件的定義和調用。教學重點、難點掌握Vue組件的意義及組件的定義和調用。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、Vue組件2、組件定義及調用（1）全局組件的定義及調用（2）局部組件的定義及調用三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業復習本次課的知識點，課堂練習沒有完成的，課后接著完成。教學反思

教案編號12學時2上課班級執行時間授課題目Vue組件（2）--組件之間的通訊教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握組件的層級關系，掌握組件之間的通訊的方法。教學重點、難點掌握組件之間的通訊的方法。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、組件的層級關系2、組件之間的通訊（1）父組件傳遞數據給子組件（2）子組件傳遞數據給父組件（3）兄弟之間的數據傳遞三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號13學時2上課班級執行時間授課題目Vue過渡與動畫（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握transition組件、使用transition組件制作過渡動畫。教學重點、難點握transition組件、使用transition組件制作過渡動動。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習二、新課教學內容(操作演示講授)1、transition組件2、transition組件應用CSS過渡制作過渡動畫（1）單元素/組件過渡（2）多個元素過渡（3）多個組件過渡（4）列表過渡三、課堂訓練學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號14學時2上課班級執行時間授課題目Vue過渡與動畫（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習.教學目的及要求了解JavaScript鉤子及使用鉤子制作動畫。掌握CSS動畫。教學重點、難點難點：JavaScript鉤子及使用鉤子制作動畫教學資源范例及素材見“素材“文件夾教學內容與過程一、復習二、新課教學內容(操作演示講授)1、JavaScript鉤子2、CSS動畫三、課堂訓練學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號15學時2上課班級執行時間授課題目Vue路由（1）VueRouter安裝和基本用法教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握Vue路由的作用、及路由的基本用法。教學重點、難點路由的基本用法。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、安裝VueRouter2、VueRoute基本用法3、設置路由被激活的鏈接樣式4、設置路由切換過渡動畫三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業復習本次課的知識點。教學反思

教案編號16學時2上課班級執行時間授課題目Vue路由（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握嵌套路由、命名路由、路由別名教學重點、難點掌握嵌套路由教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、實驗內容(操作演示)1、嵌套路由2、命名路由3、路由別名三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業復習本次課的知識點。教學反思

教案編號17學時2上課班級執行時間授課題目Vue路由（3）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握路由重定向、命名視圖、路由傳遞參數、路由對象的使用教學重點、難點理解掌握路由對象、路由參數傳遞教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、路由重定向2、命名視圖3、路由傳遞參數（1）路由對象（2）路由傳遞參數（3）查詢字符串傳遞參數三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業復習本次課的知識點。教學反思

教案編號18學時2上課班級執行時間授課題目Vue路由（4）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握路由實例及路由的使用，編程導航在實際開發上的應用教學重點、難點掌握路由實例及路由的使用，編程導航在實際開發上的應用教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、路由實例及方法2、編程式的導航實例三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號19學時2上課班級執行時間授課題目VueCli腳手架（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握搭建VueCLI開發環境、使用vue-cli創建項目的步驟。教學重點、難點使用vue-cli創建項目的步驟教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、教學內容(操作演示)1、搭建VueCLI開發環境（1）安裝node.js（2）安裝VueCli腳手架構建工具2、使用vue-cli創建項目3、啟動項目4、項目的配置目錄及配置文件（1）項目根目錄（2）項目根目錄（3）public目錄（4）.src目錄（5）router目錄三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業復習本次課的知識點。教學反思

教案編號20學時2上課班級執行時間授課題目VueCli腳手架（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求掌握使用vue-cli開發項目。教學重點、難點使用vue-cli開發項目教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、實驗內容(操作演示)1、新建單個文件組件2、配置路由3、在App.vue頂級組件中配置路由出口4、在瀏覽器中測試項目三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業使用傳智播客.高校教輔平臺下發課后作業。教學反思

教案編號21學時2上課班級執行時間授課題目VueCli腳手架（3）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求綜合利用Vue.js技術，開發項目。教學重點、難點靈活應用Vue.js技術開發項目。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、實驗內容(操作演示)1、項目介紹2、創建項目3、項目的目錄及文件結構4、配置路由5、各模塊功能的實現三、學生上機操作四、課堂小結五、布置作業課后繼續完成。教學反思

教案編號22學時2上課班級執行時間授課題目VueCli腳手架（4）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求綜合利用Vue.js技術，開發項目。教學重點、難點靈活應用Vue.js技術開發項目。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習上次課的內容。二、實驗內容(操作演示)1、各模塊功能的實現2、在瀏覽器中測試項目3、項目打包三、學生上機操作學生上機操作練習課本上的示例，教師巡堂指導。四、課堂小結五、布置作業課后繼續完成。教學反思

教案編號23學時2上課班級執行時間授課題目Vuex狀態管理（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求1.掌握Vuex安裝和基本使用2.掌握Vuex配置選項教學重點、難點掌握Vuex配置選項。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習組件之間的通訊，引入Vue狀態管理。二、新課教學內容(操作演示講授)1、Vuex安裝和基本使用2、Vuex配置選項（1）state配置選項（2）getters配置選項（3）mutations配置選項（4）actions配置選項（5）modules配置選項三、課堂訓練學生上機操示例10-1至示例10-8，教師巡堂指導。四、課堂小結五、布置作業課后繼續完成。教學反思

教案編號24學時2上課班級執行時間授課題目Vuex狀態管理（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習。教學目的及要求1.掌握Vuex在模塊化的打包系統中的使用。2.掌握Vuex在項目開發中的應用。教學重點、難點掌握Vuex在項目開發中的應用。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習：Vuex配置選項。導入新課：在模塊化的打包系統使用Vuex二、新課教學內容(操作演示講授)1、模塊化的打包系統中使用Vuex（1）在創建項目時選擇安裝Vuex（2）npm安裝Vuex包2、通訊錄案例（1）案例分析（2）實現步驟三、課堂訓練1、創建創建通訊錄項目時選擇安裝Vuex。2、實現通訊錄的各個功能。教師巡堂指導。四、課堂小結五、布置作業通訊錄案例沒有完成，課后繼續完成。教學反思

教案編號25學時2上課班級執行時間授課題目前后臺數據交互技術（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習.教學目的及要求1、了解web前后臺數據交互方式。2、了解后臺接口文檔。3.、掌握接口調用技術—Axios。教學重點、難點掌握接口調用技術--Axios教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習：Vuex狀態管理。導入新課：前后臺數據交互。二、新課教學內容(操作演示講授)1、web前后臺數據交互方式2、后臺接口文檔3、接口調用技術（1）Axios基本介紹（2）Axios的基本用法（3）Axios的常用方法（4）axios全局配置（5）在VueCli項目中使用Axios三、課堂訓練操作在VueCli項目中使用Axios，教師巡堂指導。四、課堂小結五、布置作業使用高校教輔平臺下發課后作業。教學反思

教案編號26學時2上課班級執行時間授課題目前后臺數據交互技術（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習.教學目的及要求掌握Axios前后臺數據交互技術的應用。教學重點、難點掌握Axios前后臺數據交互技術的應用。教學資源范例及素材見“素材“文件夾教學內容與過程一、復習導入新課復習：在VueCli項目中使用Axios。導入新課：VueCli項目前后臺數據交互案例二、新課教學內容(操作演示講授)1、成語查詢前后臺數據交互案例（1）案例介紹（2）案例實現步驟三、課堂訓練上機操作實現成語查詢的功能，教師巡堂指導。四、課堂小結五、布置作業使用高校教輔平臺下發課后作業。教學反思

教案編號27學時2上課班級執行時間授課題目Vue移動端項目實踐（1）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習.教學目的及要求了解。掌握。。教學重點、難點掌握。。教學資源范例及素材見“素材“文件夾教學步驟、內容與時間分配一、復習導入新課復習：導入新課：javasript語言的學習二、新課教學內容(操作演示講授)三、課堂訓練四、課堂小結五、布置作業教學后記

教案編號28學時2上課班級執行時間授課題目Vue移動端項目實踐（2）教學方法教師先操作演示講解實例中的知識點，實例由淺入深。后讓學生上機驗證。再課堂綜合練習.教學目的及要求了解。掌握。。教學重點、難點