《Vue 3基礎(chǔ)入門》教學大綱

《Vue3基礎(chǔ)入門》課程教學大綱（課程英文名稱）課程編號：學分：學分學時72學時（其中：講課學時36上機學時36）先修課程：計算機基礎(chǔ)、計算機網(wǎng)絡(luò)、HTML、CSS、JavaScript適用專業(yè)：信息技術(shù)及其計算機相關(guān)專業(yè)開課部門：計算機系一、課程的性質(zhì)與目標《Vue3基礎(chǔ)入門》是一本講解如何利用Vue.js框架進行Web前端組件化開發(fā)的教材，內(nèi)容涉及Vue的基本概念以及優(yōu)勢、Vue開發(fā)環(huán)境的搭建、Vue實例對象、內(nèi)置指令、組件、事件、生命周期、全局API以及實例屬性、過渡動畫、路由、狀態(tài)管理等。通過本課程的講解，讓學生掌握如何使用Vue快速創(chuàng)建單頁面應(yīng)用，如何實現(xiàn)頁面的交互效果以及購物車功能等。本課程提供了豐富的案例，讓學生能夠根據(jù)不同的業(yè)務(wù)需求開發(fā)出不同的功能，如組件過渡效果、購物車等，對于案例的實現(xiàn)思路進行了細致地分析和總結(jié)，讓學生理解復(fù)雜案例的實現(xiàn)過程。最后一章還講解了綜合實戰(zhàn)項目“紅色旅游APP項目”的開發(fā)過程，讓學生學會使用vue-cli腳手架工具快速搭建項目，把學習的理論知識靈活地運用到實際項目的開發(fā)過程中。二、教學條件要求操作系統(tǒng)：Windows7/8/10開發(fā)工具：Chrome、VisualStudioCode編輯器等工具三、課程的主要內(nèi)容及基本要求第一章Vue3簡介學習單元第一章Vue3簡介學時2學習目標了解Web前端框架認識Vue3選擇IDE掌握配置Node.js環(huán)境安裝Vue3熟悉vue-devtools調(diào)試工具學習內(nèi)容知識點了解掌握重點難點前端框架的誕生√MVC模式√從MVC模式到MVVM模式√什么是Vue3√Vue3的優(yōu)勢√選擇IDE√配置Node.js環(huán)境√√獨立版本安裝√CDN方式安裝√npm方式安裝√√使用前端腳手架安裝√√√vue-devtools調(diào)試工具√√第二章HelloWord與Vue3的基礎(chǔ)特性學習單元第二章HelloWord與Vue3的基礎(chǔ)特性學時2學習目標掌握HelloWord示例掌握Vue3組件的生命周期掌握Vue生命周期鉤子函數(shù)的使用掌握Vue組件之間的數(shù)據(jù)傳遞的方法掌握Vue的數(shù)據(jù)綁定學習內(nèi)容知識點了解掌握重點難點HelloWord示例√Vue3應(yīng)用的核心對象√√Vue3的組件結(jié)構(gòu)√√認識生命周期√√√Vue生命周期的鉤子函數(shù)√√√文本插值√插入原始HTML√利用表單實現(xiàn)簡單登錄頁面√利用過濾器過濾指定字符√第三章Vue基本指令學習單元第三章Vue3基本指令學時4學習目標掌握Vue條件渲染指令掌握Vue列表渲染指令v-for掌握數(shù)據(jù)綁定指令v-bind掌握v-model與表單掌握vue方法、計算屬性與監(jiān)聽屬性掌握vue事件處理掌握vue其他基本指令掌握vue自定義指令學習內(nèi)容知識點了解掌握重點難點條件渲染v-if、v-else-if、v-else√條件渲染v-show√v-show與v-if的選擇√列表渲染指令v-for√數(shù)組更新√v-for的其他操作√數(shù)據(jù)綁定指令v-bind√√V-bind動態(tài)綁定√√v-model與表單√√表單修飾符√Vue3中的方法√√√計算屬性√√√監(jiān)聽屬性√√方法、計算屬性與監(jiān)聽屬性的區(qū)別√√監(jiān)聽事件v-on√事件處理函數(shù)√內(nèi)聯(lián)處理函數(shù)√多事件監(jiān)聽√事件修飾符√按鍵修飾符√系統(tǒng)修飾鍵√首次渲染指令v-once√注冊自定義指令√鉤子函數(shù)√動態(tài)指令參數(shù)√函數(shù)簡寫與對象字面量√第四章Vue組件應(yīng)用學習單元第四章組件應(yīng)用學時4學習目標了解組件基礎(chǔ)概念掌握組件間數(shù)據(jù)傳遞掌握Vue3提供了一套內(nèi)容分發(fā)的API掌握vue3其他應(yīng)用掌握列表過渡的實現(xiàn)掌握封裝可復(fù)用過渡動畫的方法學習內(nèi)容知識點了解掌握重點難點基本使用方法√組件復(fù)用√組織結(jié)構(gòu)√鉤子函數(shù)√通過props屬性傳遞數(shù)據(jù)√√通過“總線”傳遞數(shù)據(jù)√√√通過監(jiān)聽事件傳遞數(shù)據(jù)√√√內(nèi)容分發(fā)api基本使用方法√√√編譯作用域√后備內(nèi)容√具名插槽√√√作用域插槽√動態(tài)插槽名√動態(tài)組件√異步組件√√實現(xiàn)日歷組件√利用組件實現(xiàn)“彈出層”√第五章樣式綁定學習單元第五章樣式綁定學時2學習目標掌握綁定HTML樣式熟練綁定內(nèi)聯(lián)樣式[實例]實現(xiàn)列表的奇偶行不同樣式學習內(nèi)容知識點了解掌握重點難點對象控制樣式√數(shù)組控制樣式√在組件中的應(yīng)用√√√對象描述樣式√√數(shù)組描述樣式√自動添加前綴√多重值樣式√代碼實現(xiàn)√【案例】實現(xiàn)列表的奇偶行不同樣式√第六章組件復(fù)用學習單元第六章組件復(fù)用學時2學習目標掌握DOM渲染函數(shù)實現(xiàn)復(fù)用掌握混入對象掌握插件復(fù)用【案例】使用渲染函數(shù)渲染列表學習內(nèi)容知識點了解掌握重點難點DOM基礎(chǔ)√JavaScript動態(tài)生成DOM對象√√引入JSX語法√函數(shù)式組件√√模版編譯√√選項合并復(fù)用√自定義選項合并策略√編寫插件√使用插件√√【案例】使用渲染函數(shù)渲染列表√第七章Vue路由學習單元第七章Vue路由學時4學習目標掌握路由基礎(chǔ)掌握動態(tài)路由熟悉路由進階使用掌握History模式掌握導航守衛(wèi)了解路由元信息了解過渡動效掌握數(shù)據(jù)獲取掌握路由懶加載掌握滾動行為學習內(nèi)容知識點了解掌握重點難點什么是VueRouter√在HTML中使用VueRouter√√在JavaScript代碼中使用VueRouter√√參數(shù)響應(yīng)√√捕獲所有路由√高級匹配模式和匹配優(yōu)先級√√√嵌套路由√√編程式導航√router.push()函數(shù)√√router.replace()√√router.go()√√命名路由√√命名視圖√√重定向與別名√路由組件參數(shù)傳遞√√√HTML5HistoryAPI√后端配置√全局守衛(wèi)√路由獨享守衛(wèi)√組件內(nèi)守衛(wèi)√導航解析流程√路由元信息√單路由過渡√路由動態(tài)過渡√導航完成后獲取數(shù)據(jù)√在導航完成前獲取數(shù)據(jù)√路由懶加載√滾動行為√第八章axios異步請求學習單元第八章axios異步請求學時2學習目標掌握axios基礎(chǔ)理解API介紹掌握適配網(wǎng)絡(luò)請求掌握攔截器介紹學習內(nèi)容知識點了解掌握重點難點axios簡介√安裝axios√基本使用方法√√API介紹√√√適配網(wǎng)絡(luò)請求√√√攔截器介紹√第九章VueCLI部署項目學習單元VueCLI部署項目學時2學習目標了解VueCLI的簡介了解webpack概述掌握構(gòu)建與部署VueCLI項目學習內(nèi)容知識點了解掌握重點難點什么是VueCLI√安裝VueCLI√創(chuàng)建HelloWord項目√√了解VueCLI項目結(jié)構(gòu)√了解webpack√配置webpack√鏈式操作√√替換一個規(guī)則里的loader√√√審查項目的webpack配置√以一個文件的方式使用解析好的配置√構(gòu)建目標√√部署√本地瀏覽√第十章Vuex組件狀態(tài)管理學習單元第十章Vuex組件狀態(tài)管理學時2學習目標了解Vuex介紹熟練Vuex安裝掌握Vuex狀態(tài)管理熟練Vuex狀態(tài)獲取方法掌握Vuex狀態(tài)同步更改方法掌握Vuex狀態(tài)異步更改方法掌握Vuex狀態(tài)模塊化管理學習內(nèi)容知識點了解掌握重點難點Vuex是什么√Vuex特點√通過npm或yarn安裝√獨立構(gòu)建√組件中獲取Vuex狀態(tài)√√輔助函數(shù)mapstate()√對象展開運算符√√屬性訪問√√函數(shù)訪問√√輔助函數(shù)mapGetters()√通過提交mutation更改Vuex狀態(tài)√√√提交payload√對象風格提交方式√分發(fā)action√√√在組件中分發(fā)action√組合action√模塊局部狀態(tài)√模塊命名空間√模塊動態(tài)注冊√模塊重用√第十一章紅色旅游App綜合項目學習單元第十一章紅色旅游App綜合項目學時8學習目標紅色旅游App總體規(guī)劃腳手架及項目搭建第三方依賴的安裝首頁功能開發(fā)產(chǎn)品列表頁功能開發(fā)搜索頁面功能開發(fā)產(chǎn)品詳情頁功能開發(fā)購物車頁面開發(fā)個人中心頁面的實現(xiàn)路由配置項目調(diào)試學習內(nèi)容知識點了解掌握重點難點功能結(jié)構(gòu)的說明√安裝axios√安裝ElementPlus√構(gòu)建統(tǒng)一頭部√廣告輪播組件√實現(xiàn)推薦內(nèi)容列表√√√首頁組件√√底部導航組件√√搜索框組件√√瀑布流組件改造√√√產(chǎn)品詳情組件√√用戶評價組件√√購物車頁面開發(fā)√√√個人中心頁面的實現(xiàn)√√路由配置√項目調(diào)試√√VisualStudioCode環(huán)境中調(diào)試√瀏覽器中調(diào)試√第十二章Vue3項目部署學習單元第十二章Vue3項目部署學時2學習目標了解構(gòu)建發(fā)布版本掌握部署學習內(nèi)容知識點了解掌握重點難點構(gòu)建發(fā)布版本√√√項目部署√√√四、學時分配 章目 講課上機合計第一章Vue3簡介224第二章HelloWord與Vue3的基礎(chǔ)特性224第三章Vue基本指令448第四章Vue組件應(yīng)用448第五章樣式綁定224第六章組件復(fù)用224第七章Vue路由448第八章axios異步請求224第九章VueCLI部署項目224第十章Vuex組件狀態(tài)管理224第十一章紅色旅游App綜合項目8816第十二章Vue3項目部署224合計363672五、考核模式與成績評定辦法本課程為考試課程，期末考試采用百分制的閉卷考試模式。學生的考試成績由平時成績（30%）和期末考試（70%）組成，其中，平時成績包括出勤（5%）、作業(yè)（5%）、上機成績（20%）。六、選用教材和主要參考書本大綱是根據(jù)教材《Vue3基礎(chǔ)入門》所設(shè)計的。參考資料：Vue官方網(wǎng)站《Vue.js官方使用