《Vue.js3.0從入門到實(shí)踐》課程教學(xué)大綱課程編號(hào)：學(xué)分：4學(xué)分學(xué)時(shí)：70學(xué)時(shí)（其中，講授學(xué)時(shí)：48學(xué)時(shí)上機(jī)學(xué)時(shí)：22學(xué)時(shí)）先修課程：計(jì)算機(jī)基礎(chǔ)網(wǎng)頁設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)后續(xù)課程：無適用專業(yè)：軟件工程及計(jì)算機(jī)相關(guān)的其他專業(yè)開課部門：計(jì)算機(jī)系一、課程的性質(zhì)與目標(biāo)《》可作為一門計(jì)算機(jī)科學(xué)與技術(shù)的實(shí)戰(zhàn)教材，可用作專業(yè)拓展課或非計(jì)算機(jī)專業(yè)的選修課。本課程中內(nèi)容覆蓋全面、講解詳細(xì)，其中包括Vue.js簡(jiǎn)介、Vue.js環(huán)境搭建與項(xiàng)目創(chuàng)建、ECMAScript6語法、Vue.js的基本語法、事件處理與表單綁定的方法、組件的使用、CSS過渡與動(dòng)畫的實(shí)現(xiàn)、組合式API的使用、Vue工程化、VueRouter單頁面開發(fā)、axios數(shù)據(jù)請(qǐng)求的使用、Vuex狀態(tài)管理，最后通過農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)項(xiàng)目來鞏固本教材中學(xué)習(xí)的大部分知識(shí)點(diǎn)。通過對(duì)本教材內(nèi)容的學(xué)習(xí)，學(xué)生能夠掌握Vue.js3.0框架的基礎(chǔ)操作與核心概念，并且能夠制作出更具交互性、界面更美觀的前端應(yīng)用程序。二、課程設(shè)計(jì)理念與思路需的能力和終身學(xué)習(xí)的能力，實(shí)現(xiàn)一站式教學(xué)理念。為主體，以案例（項(xiàng)目）實(shí)訓(xùn)為手段，設(shè)計(jì)出理論學(xué)習(xí)與技能掌握相融合的課程內(nèi)容體系。三、教學(xué)條件要求開發(fā)工具：Vue.js3.0、VisualStudioCode1.67.0、vue-devtools四、課程的主要內(nèi)容及基本要求第一章 Vue.js簡(jiǎn)介學(xué)習(xí)單元Vue.js簡(jiǎn)介學(xué)時(shí)2學(xué)習(xí)目標(biāo)學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)Web前端發(fā)展歷程√MV*模式√√Vue的發(fā)展歷程√Vue的生態(tài)系統(tǒng)√漸進(jìn)式框架√√響應(yīng)式系統(tǒng)√√前端框架對(duì)比√√Vue.js3.0的新變化√√第二章 Vue.js環(huán)境搭建與項(xiàng)目創(chuàng)建學(xué)習(xí)單元Vue.js環(huán)境搭建與項(xiàng)目創(chuàng)建學(xué)時(shí)3學(xué)習(xí)目標(biāo)學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)安裝Vue.js√√Web前端開發(fā)工具√安裝VSCode√√安裝vue-devtools√√實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序√√√第三章 ECMAScript6語法學(xué)習(xí)單元ECMAScript6語法學(xué)時(shí)8學(xué)習(xí)目標(biāo)了解ECMAScript6基本知識(shí)掌握塊作用域構(gòu)造與模板字符串的使用掌握ECMAScript6默認(rèn)參數(shù)與rest參數(shù)的使用掌握展開運(yùn)算符、解構(gòu)賦值、箭頭函數(shù)的使用掌握Symbol、Promise、Class的基本語法掌握Module模塊與async函數(shù)的基本語法學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)ECMAScript6介紹√let聲明√√const聲明√√模板字面量√√默認(rèn)參數(shù)√√rest參數(shù)√√展開運(yùn)算符√√解構(gòu)的必要性√√對(duì)象解構(gòu)√√數(shù)組解構(gòu)√√箭頭函數(shù)的基本語法√√箭頭函數(shù)與this指向√√實(shí)驗(yàn)：用戶信息頁√√√Symbol的基本語法√√作為屬性名的Symbol√√共享的Symbol√√Promise的基本語法√√Promise的生命周期√√Promise的原型方法√√Class√√Module模塊√√async函數(shù)√√實(shí)訓(xùn)：商品訂單頁面√√√第四章 Vue的基本語法學(xué)習(xí)單元Vue的基本語法學(xué)時(shí)8學(xué)習(xí)目標(biāo)掌握Vue應(yīng)用程序?qū)嵗膭?chuàng)建掌握插值語法、方法選項(xiàng)與指令的使用掌握計(jì)算屬性與偵聽器的使用掌握Class與Style綁定的使用理解Vue的生命周期鉤子的執(zhí)行原理學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)創(chuàng)建應(yīng)用程序?qū)嵗獭涛谋静逯怠獭淘糎TML√√插值表達(dá)式√√實(shí)驗(yàn)：商品價(jià)格計(jì)算頁面√√√方法選項(xiàng)√√指令參數(shù)√√內(nèi)置指令√√自定義指令√√實(shí)驗(yàn)：商品信息管理表格√√√計(jì)算屬性的定義√√計(jì)算屬性的緩存√√計(jì)算屬性選擇性地渲染列表√√實(shí)驗(yàn)：購物車頁面√√√偵聽器√√綁定HTML樣式（Class）√√綁定內(nèi)聯(lián)樣式（Style）√√實(shí)驗(yàn)：斑馬紋商品表√√√生命周期鉤子√√實(shí)訓(xùn)：農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)√√√第五章事件處理與表單綁定學(xué)習(xí)單元事件處理與表單綁定學(xué)時(shí)6學(xué)習(xí)目標(biāo)掌握Vue中事件處理的技巧掌握多個(gè)表單控件的雙向數(shù)據(jù)綁定方法學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)方法事件處理器√√內(nèi)聯(lián)事件處理器√√事件修飾符√√按鍵修飾符√其他修飾符√√實(shí)驗(yàn)：賬戶信息管理頁面√√√單行文本輸入框√√多行文本輸入框√√復(fù)選框√√單選按鈕√√選擇框√√值綁定√√實(shí)驗(yàn)：用戶注冊(cè)頁面√√√實(shí)訓(xùn)：新增商品頁面√√√第六章組件學(xué)習(xí)單元組件學(xué)時(shí)6學(xué)習(xí)目標(biāo)理解組件化開發(fā)的思想掌握兩種常用的注冊(cè)組件的方式掌握組件間通信的方法掌握插槽的基本用法掌握具名插槽與作用域插槽的使用方式掌握動(dòng)態(tài)組件的使用方式學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)組件化開發(fā)√全局注冊(cè)√√局部注冊(cè)√√父組件向子組件傳遞數(shù)據(jù)√√單向數(shù)據(jù)流√prop校驗(yàn)√√子組件向父組件傳遞數(shù)據(jù)√√插槽的基本用法√√為插槽指定默認(rèn)內(nèi)容√√具名插槽√√作用域插槽√√使用$root訪問根組件實(shí)例√√使用$parent訪問父組件實(shí)例√√使用$refs訪問子組件實(shí)例或子元素√√依賴注入√√動(dòng)態(tài)組件√√實(shí)訓(xùn)：商品詳情頁面√√√第七章過渡與動(dòng)畫學(xué)習(xí)單元過渡與動(dòng)畫學(xué)時(shí)學(xué)習(xí)目標(biāo)熟悉過渡與動(dòng)畫的內(nèi)置組件掌握基于CSS的過渡與動(dòng)畫的應(yīng)用應(yīng)用JavaScript鉤子實(shí)現(xiàn)動(dòng)畫效果掌握Vue中元素間過渡的應(yīng)用掌握Vue中列表過渡的應(yīng)用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)過渡與動(dòng)畫的內(nèi)置組件√CSS過渡√√CSS動(dòng)畫√√自定義過渡類名√√JavaScript鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫效果√√元素間過渡√√列表過渡√√實(shí)訓(xùn)：商品列表頁面√√√第八章組合式API學(xué)習(xí)單元組合式API學(xué)時(shí)8學(xué)習(xí)目標(biāo)理解組合式API的必要性掌握setup()函數(shù)的應(yīng)用掌握ref()、reactive()、toRefs()與toRef()方法的應(yīng)用掌握組合式API中的計(jì)算屬性與偵聽器的應(yīng)用掌握組合式API中的依賴注入的應(yīng)用掌握組合式API中的生命周期鉤子的應(yīng)用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)組合式API的必要性√setup()函數(shù)的特性√setup()函數(shù)的基本語法√√實(shí)驗(yàn)：用戶信息展示頁面√√√ref()方法√√reactive()方法√√實(shí)驗(yàn)：密保問題管理頁面√√√toRefs()方法√√toRef()方法√√實(shí)驗(yàn)：銷售額展示頁面√√√computed()方法√√watchEffect()方法√√watch()方法√√實(shí)驗(yàn)：用戶查詢頁面√√√provide()與inject()√√組合式API中的生命周期鉤子√√實(shí)訓(xùn)：促銷活動(dòng)管理頁面√√√第九章Vue工程化學(xué)習(xí)單元Vue工程化學(xué)時(shí)6學(xué)習(xí)目標(biāo)掌握VueCLI工具的安裝與使用掌握VueCLI中圖形化工具的用法了解新一代前端構(gòu)建工具Vite的使用了解Element-Plus組件庫的使用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)VueCLI簡(jiǎn)介√VueCLI的環(huán)境配置√√安裝VueCLI√√使用VueCLI創(chuàng)建項(xiàng)目√√項(xiàng)目結(jié)構(gòu)分析√√實(shí)驗(yàn)：詩歌展示頁面√√√新一代前端構(gòu)建工具Vite√√安裝ElementPlus√√使用ElementPlus組件√√實(shí)驗(yàn)：使用ElementPlus重構(gòu)詩歌展示頁面√√√實(shí)訓(xùn)：物流公司管理頁面√√√第十章VueRouter單頁面開發(fā)學(xué)習(xí)單元VueRouter單頁面開發(fā)學(xué)時(shí)6學(xué)習(xí)目標(biāo)理解路由的定義與分類掌握路由的安裝與配置掌握嵌套路由、重定向與命名路由的用法掌握路由傳參與編程式路由的用法掌握3種導(dǎo)航守衛(wèi)與路由組合式API的用法學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)初識(shí)路由√路由的安裝與配置√√創(chuàng)建第一個(gè)路由項(xiàng)目√√嵌套路由√√重定向與命名路由√√路由傳參√√編程式導(dǎo)航√√實(shí)驗(yàn)：重構(gòu)農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)頁面√√√導(dǎo)航守衛(wèi)√√路由組合式API√√實(shí)訓(xùn)：蔬菜商品信息頁面√√√第十一章axios數(shù)據(jù)請(qǐng)求學(xué)習(xí)單元axios數(shù)據(jù)請(qǐng)求學(xué)時(shí)4學(xué)習(xí)目標(biāo)了解axios的特征、安裝與引入方法掌握axios的常用請(qǐng)求方式、JSON數(shù)據(jù)的使用與跨域請(qǐng)求的實(shí)現(xiàn)掌握axios請(qǐng)求配置的用法掌握axios并發(fā)請(qǐng)求、創(chuàng)建axios實(shí)例與配置axios默認(rèn)值的方法掌握攔截器的創(chuàng)建方法學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)初識(shí)axios√√axios的常用請(qǐng)求方式√√請(qǐng)求JSON數(shù)據(jù)√√跨域請(qǐng)求數(shù)據(jù)√√axios配置對(duì)象√√配置對(duì)象的應(yīng)用√√并發(fā)請(qǐng)求√√創(chuàng)建axios實(shí)例√√配置默認(rèn)值√√axios攔截器√√實(shí)訓(xùn)：銷售額查詢頁面√√√第十二章Vuex狀態(tài)管理學(xué)習(xí)單元Vuex狀態(tài)管理學(xué)時(shí)學(xué)習(xí)目標(biāo)理解Vuex狀態(tài)管理及其原理掌握Vuex的安裝與配置理解Vuex的核心概念掌握Vuex與組合式API的結(jié)合使用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)Vuex的簡(jiǎn)述√單組件與多組件的狀態(tài)管理√√Vuex的原理√√Vuex的安裝與配置√√State√√Getters√√Mutations√√Actions√√Modules√√Vuex與組合式API√√實(shí)訓(xùn)：糧食信息列表頁面√√√第十三章農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)學(xué)習(xí)單元農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)學(xué)時(shí)學(xué)習(xí)目標(biāo)掌握農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)的環(huán)境搭建掌握農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)項(xiàng)目分析√環(huán)境搭建√√首頁√√賬戶信息頁面√√用戶管理頁面√√商品管理頁面√√訂單管理頁面√√√物流公司管理頁面√√√登錄頁面√√404頁面√√路由配置√√六、考核模式與成績(jī)?cè)u(píng)定辦法績(jī)（20%）。七、選用教材和主要參考書八、大綱說明的程序設(shè)計(jì)或驗(yàn)證。五、學(xué)時(shí)分配章目講課上機(jī)合計(jì)第一章Vue.js簡(jiǎn)介202第二章Vue.js環(huán)境搭建與項(xiàng)目創(chuàng)建213第三章ECMAScr