PAGE16PAGE4Vue.js3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn)學(xué)分：3.5學(xué)時：56(40時理論/16時上機(jī))一、課程的性質(zhì)、地位與任務(wù)《Vue.js3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn)》課程是計(jì)算機(jī)類專業(yè)的一門專業(yè)（必修/選修）課程，通過對Vue.js3.x的新特性和開發(fā)環(huán)境配置的了解和Vue.js3.x基礎(chǔ)語法、指令、組件、過渡與動畫、Vuex4、VueRouter4、Axios和JSONServer、Vite4/5新前端構(gòu)建工具和ElementPlus等周邊生態(tài)系統(tǒng)的學(xué)習(xí)和研究，讓學(xué)生理解和掌握Vue.js3.x這一漸進(jìn)式框架的核心概念（組件化、模塊化），通過項(xiàng)目實(shí)踐培養(yǎng)學(xué)生開發(fā)和設(shè)計(jì)復(fù)雜的單頁面SPA（SinglePagewebApplication）應(yīng)用的基本技能和素質(zhì)要求，適應(yīng)互聯(lián)網(wǎng)行業(yè)Web前端開發(fā)相關(guān)崗位的需要。二、課程的教學(xué)目標(biāo)與基本要求教學(xué)基本要求是讓學(xué)生理解Vue.js漸進(jìn)式框架的核心概念，熟練掌握Vue.js3.x基礎(chǔ)語法、指令、組件開發(fā)、過渡與動畫及Vue3.x新特性等關(guān)鍵概念；掌握VueRouter4、Vuex4、Axios、JSONServer、Vite4/5、ElementPlus等周邊生態(tài)系統(tǒng)的應(yīng)用技術(shù)。本課程的教學(xué)目標(biāo)是以“社會主義核心價值觀”和“大國工匠精神”為主線，在教學(xué)和軟件開發(fā)過程中逐步培養(yǎng)學(xué)生“愛崗敬業(yè)、無私奉獻(xiàn)、持續(xù)專注、開拓進(jìn)取、精益求精，追求極致”的基本工程素質(zhì)，具有熟練地運(yùn)用VueCLI和Vite等前端開發(fā)和構(gòu)建工具和Vue.js周邊生態(tài)系統(tǒng)來構(gòu)建中小型Web單頁面應(yīng)用的能力。經(jīng)過完整的項(xiàng)目實(shí)戰(zhàn)能夠具備了勝任Web移動前端基礎(chǔ)開發(fā)的工程師的初步能力。三、課程內(nèi)容（重點(diǎn)△，難點(diǎn)★）第1章Vue.js發(fā)展概述1.1Vue.js簡介1.1.1Vue.js發(fā)展簡史1.1.2Vue3新特性簡介1.2Vue.js生產(chǎn)環(huán)境配置1.2.1Vue.js引入方法1.2.2安裝VueDevtools1.2.3Node.js環(huán)境配置1.2.4創(chuàng)建第一個Vue單頁程序1.3Vue.js開發(fā)工具1.3.1VisualStudioCode1.3.2HBuilderX1.4△★ECMAScript6.0基礎(chǔ)1.4.1let和const1.4.2解構(gòu)賦值1.4.3箭頭函數(shù)1.4.4展開運(yùn)算符1.4.5模板字符串第2章Vue.js基礎(chǔ)2.1MVVM模式2.1.1△MVVM模式簡介2.1.2MVVM模式的前端框架發(fā)展趨勢2.1.3MVVM模式的應(yīng)用2.2△數(shù)據(jù)綁定與插值2.2.1文本綁定2.2.2HTML代碼綁定2.2.3 屬性綁定2.2.4JavaScript表達(dá)式綁定2.3△計(jì)算屬性與方法2.3.1計(jì)算屬性基礎(chǔ)應(yīng)用2.3.2計(jì)算屬性的setter和getter2.4△偵聽屬性watch2.4.1watch屬性基本用法2.4.2watch屬性高級用法2.5★生命周期鉤子函數(shù)2.5.1生命周期鉤子函數(shù)作用2.5.2生命周期鉤子函數(shù)應(yīng)用2.6△Vue中數(shù)組變動更新2.6.1變異方法2.6.2非變異方法2.7控制臺console對象2.7.1顯示信息的命令2.7.2占位符2.7.3分組顯示console.group()2.7.4查看對象的信息console.dir()第3章Vue.js指令3.1△條件渲染3.1.1v-if/v-ele-if/v-else指令3.1.2Vue3.x中key值的應(yīng)用3.1.3v-show指令3.2△列表渲染（v-for指令）3.3△類與樣式綁定（v-bind指令）3.4△事件處理（v-on指令）3.5△表單輸入綁定（v-model指令）3.6v-html與v-text指令3.7v-once、v-cloak、v-pre指令3.8★Vue.js自定義指令3.8.1自定義指令注冊3.8.2對象字面量第4章Vue3新特性應(yīng)用4.1△響應(yīng)式基礎(chǔ)4.1.1組件選項(xiàng)setup()4.1.2ref()、reactive()、toRefs()和toRef()4.1.3watch、watchEffect和computed4.2★Vue3生命周期4.2.1Vue3生命周期函數(shù)（組合式API）4.2.2生命周期鉤子函數(shù)應(yīng)用第5章Vue.js組件開發(fā)5.1組件基礎(chǔ)5.1.1組件命名5.1.2△組件注冊5.2△★組件間通信5.2.1父組件向子組件傳值5.2.2子組件向父組件傳值5.2.3父鏈與子組件索引5.3△插槽5.3.1匿名插槽5.3.2具名插槽5.3.3作用域插槽5.3.4動態(tài)插槽名第6章Vue.js過渡與動畫6.1△單元素/組件的過渡6.1.1過渡的類名6.1.2CSS過渡6.1.3CSS動畫6.1.4自定義過渡的類名6.1.5同時使用過渡和動畫6.1.6顯性的過渡持續(xù)時間6.1.7JavaScript鉤子6.1.8Velocity動畫庫簡介6.2△初始渲染的過渡6.3△多個元素的過渡6.4△★多個組件的過渡6.5△★列表過渡6.5.1列表的進(jìn)入/離開過渡6.5.2列表的排序過渡6.5.3列表的交錯過渡第7章Vue開發(fā)環(huán)境與SFC新特性7.1Vue開發(fā)環(huán)境簡介7.1.1Node.js簡介7.1.2Node.js部署7.2Node包管理器npm7.2.1npm簡介7.2.2△npm常用命令7.3webpack打包工具7.3.1webpack簡介7.3.2webpack配置與應(yīng)用7.3.3webpack配置加載器loaders7.3.5webpack配置開發(fā)服務(wù)器7.4VueCLI7.4.1VueCLI安裝7.4.2△VueCLI創(chuàng)建Vue項(xiàng)目7.5★單文件組件SFC7.5.1單文件組件的結(jié)構(gòu)7.5.2單文件組件的新特點(diǎn)7.6△組合式API：依賴注入7.7組合式API模板引用7.7.1獲取節(jié)點(diǎn)7.7.2組件上使用ref7.8組合式函數(shù)7.9模板refs第8章路由VueRouter8.1VueRouter概述8.1.1VueRouter安裝與使用8.1.2△VueRouter基礎(chǔ)應(yīng)用8.2★VueRouter高級應(yīng)用8.2.1△動態(tài)路由匹配8.2.2△嵌套路由8.2.3△編程式導(dǎo)航8.2.4△命名路由8.2.5△命名視圖8.2.6重定向和別名8.2.7HTML5History模式8.2.8路由組件傳參第9章狀態(tài)管理Vuex9.1Vuex概述9.1.1Vuex定義9.1.2簡單狀態(tài)管理-store模式9.2Vuex基本使用9.3△★Vuex核心概念9.3.1一個完整的store結(jié)構(gòu)9.3.2最簡單的store9.3.3Vuex中state9.3.4Vuex中g(shù)etter9.3.5Vuex中mutation9.3.6Vuex中action9.3.7Vuex中module9.4 Vuex多模塊實(shí)戰(zhàn)案例第10章Vue3UI框架ElementPlus10.1ElementPlus概述10.1.1ElementPlus安裝與配置10.1.2ElementPlus導(dǎo)航10.1.3ElementPlus快速開始10.1.4ElementPlus全局配置10.2△ElementPlus組件10.3ElementPlus組件應(yīng)用10.3.1Basic基礎(chǔ)組件--Container布局容器10.3.2Basic基礎(chǔ)組件--Layout布局10.3.3配置組件--config-provider全局配置10.3.4Form表單組件10.3.5Data數(shù)據(jù)展示—Avatar、Badge、Calendar、Card、Carousel組件10.3.6Data數(shù)據(jù)展示--Table表格10.3.7Data數(shù)據(jù)展示--VirtualizedTable虛擬化表格組件10.3.8Navigation導(dǎo)航組件第11章Vue3.x構(gòu)建工具-Vite11.1Vite構(gòu)建項(xiàng)目11.1.1Vite簡介11.1.2△搭建第一個Vite項(xiàng)目11.2Vite創(chuàng)建‘惠民早點(diǎn)’項(xiàng)目11.2.1創(chuàng)建默認(rèn)項(xiàng)目11.2.2更新完善項(xiàng)目第12章網(wǎng)絡(luò)請求庫Axios與JSONServer12.1Axios概述12.1.1Axios簡介12.1.2Axios特性12.1.3Axios應(yīng)用12.2△Axios舉例12.2.1執(zhí)行g(shù)et請求12.2.2執(zhí)行post請求12.2.3一次執(zhí)行多個請求12.3JSONServer與Postman12.3.1JSONServer簡介12.3.2JSONServer應(yīng)用12.3.3Postman-接口測試工具12.4△★跨域請求數(shù)據(jù)12.4.1VueCLI創(chuàng)建項(xiàng)目跨域配置12.4.2Vite創(chuàng)建項(xiàng)目跨域配置12.5AxiosAPI12.5.1Axios可以通過配置（config）來發(fā)送請求12.5.2請求方式的別名。12.5.3請求配置。12.5.3Axios實(shí)例12.6Axios攔截器12.7Axios應(yīng)用實(shí)戰(zhàn)12.7.1請求本地JSON數(shù)據(jù)12.7.2請求遠(yuǎn)程天氣預(yù)報數(shù)據(jù)第13章Vue3+ElementPlus實(shí)戰(zhàn)--簡易圖書管理系統(tǒng)13.1簡易圖書管理系統(tǒng)需求13.1.1簡易圖書管理系統(tǒng)功能13.1.2簡易圖書管理系統(tǒng)實(shí)現(xiàn)技術(shù)13.2簡易圖書管理系統(tǒng)實(shí)現(xiàn)13.2.1項(xiàng)目創(chuàng)建13.2.2定義main.js13.2.3修改App.vue組件13.2.4定義BookView組件13.2.5定義Header.vue組件13.2.6定義Footer.vue組件13.2.7定義router/index.js13.2.8定義store/index.js13.2.9定義HomeView.vue組件13.2.10定義SettingView.vue組件13.2.11定義AboutView.vue組件13.2.12定義BookAdd.vue組件13.2.13定義BookModify.vue組件13.2.14定義BookQuery.vue組件四、時間分配課時內(nèi)容課時五、課程說明課程英文名稱Vue.js3.xFrontEndDevelopmentTechnologyAndPractice主要先修課程計(jì)算機(jī)導(dǎo)論、計(jì)算機(jī)網(wǎng)絡(luò)、Web前端開發(fā)基礎(chǔ)適用專業(yè)類別計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、網(wǎng)絡(luò)工程、信息管理與信息系統(tǒng)等相關(guān)專業(yè)主要教材（作者、教材名稱、出版社）儲久良.Vue.js3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn).北京:清華大學(xué)出版社.2023.12.課程性質(zhì)通識基礎(chǔ)□學(xué)科基礎(chǔ)□專業(yè)選修√集中實(shí)踐環(huán)節(jié)□《Vue.js3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn)》課程是計(jì)算機(jī)類專業(yè)的一門專業(yè)（必修/選修）課程，通過對Vue.js3.x的新特性和開發(fā)環(huán)境配置的了解和Vue.js3.x基礎(chǔ)語法、指令、組件、過渡與動畫、Vuex4、VueRouter4、Axios和JSONServer、Vite4/5新前端構(gòu)建工具和ElementPlus等周邊生態(tài)系統(tǒng)的學(xué)習(xí)和研究，讓學(xué)生理解和掌握Vue.js3.x這一漸進(jìn)式框架的核心概念（組件化、模塊化），通過項(xiàng)目實(shí)踐培養(yǎng)學(xué)生開發(fā)和設(shè)計(jì)復(fù)雜的單頁面SPA（SinglePagewebApplication）應(yīng)用的基本技能和素質(zhì)要求，適應(yīng)互聯(lián)網(wǎng)行業(yè)Web前端開發(fā)相關(guān)崗位的需要。Vue3.x初步應(yīng)用實(shí)戰(zhàn)—v-model綁定列表框(1)學(xué)會引入Vue3.X版本對應(yīng)的vue.global.js文件,完成Vue視圖的定義。(2)學(xué)會定義Vue實(shí)例對象的選項(xiàng),初步掌握data函數(shù)的定義方法。(3)學(xué)會使用v-model指令綁定select元素，通過列表框選擇相應(yīng)的選項(xiàng)(專業(yè)名稱)。(4)學(xué)會啟用瀏覽器輔助項(xiàng)目調(diào)試（按“F12”進(jìn)入）。2.Vue3.x基礎(chǔ)應(yīng)用實(shí)戰(zhàn)—Vue組件內(nèi)選項(xiàng)的配置(1)學(xué)會引入Vue.global.js,完成單頁基本結(jié)構(gòu)設(shè)計(jì)。(2)學(xué)會使用Vue3.x中的createApp()來定義Vue實(shí)例，學(xué)會配置組件內(nèi)的template和data的選項(xiàng)。(3)學(xué)會在template模板中使用data選項(xiàng)中的數(shù)據(jù)（如{{bookName}}），并在模板的根div中嵌套2個子div,用于圖書對應(yīng)的圖像和顯示圖書簡介。(4)學(xué)會使用CSS定義相關(guān)div的樣式。1.v-model指令&watch偵聽實(shí)戰(zhàn)—新生報道信息核對1.學(xué)會引入vue.global.js,在Vue視圖中定義HTML5表單。2.學(xué)會定義Vue組件(實(shí)例)，會配置組件（實(shí)例）的data選項(xiàng)。3.學(xué)會配置methods和watch等選項(xiàng)，并完成相關(guān)函數(shù)的定義。4.學(xué)會使用v-model、v-bind、v-on等指令來完成表單綁定、屬性綁定和事件綁定。5.學(xué)會使用CSS定義fieldset、input等標(biāo)記和屬性的樣式。2.計(jì)算屬性、方法的綜合實(shí)戰(zhàn)—計(jì)算區(qū)間整數(shù)累加和1.學(xué)會定義Vue組件，會配置組件data、methods、computed等選項(xiàng)。2.學(xué)會引入vue.global.js,并完成Vue視圖中的HTML5表單的定義。3.學(xué)會使用v-model、v-on、v-for等指令來完成表單綁定、事件綁定、遍歷數(shù)組。4.學(xué)會使用CSS定義span、fieldset、input等標(biāo)記的樣式。1.內(nèi)置指令實(shí)戰(zhàn)—課程模塊維護(hù)1.學(xué)會引入vue.global.js,完成簡易表單設(shè)計(jì)。2.學(xué)會定義Vue組件對象，會配置data和methods等選項(xiàng)。3.學(xué)會使用v-on、v-model及v-for等內(nèi)部指令。4.學(xué)會使用數(shù)組相關(guān)方法，完成課程增加與刪除操作。2.自定義指令實(shí)戰(zhàn)--自定義v-img指令1.學(xué)會引入vue.global.js,完成HTML文檔基本結(jié)構(gòu)的定義。2.學(xué)會定義Vue組件對象，并配置data和directives等選項(xiàng)。3.學(xué)會全局注冊自定義指令v-img。使用箭頭函數(shù)定義指令相關(guān)參數(shù)（el,binding）。4.學(xué)會使用el.style對象的相關(guān)DOM屬性，完成圖像加載等樣式設(shè)置。1.Vue3組件選項(xiàng)及響應(yīng)式API實(shí)戰(zhàn)—課程管理(1)學(xué)會使用組件選項(xiàng)setup()來定義響應(yīng)式對象和方法。(2)學(xué)會定義reactive()和ref()來定義響應(yīng)式對象。(3)學(xué)會在setup()函數(shù)中定義方法，并暴露方法和所有屬性。(4)學(xué)會在表單輸入域上綁定響應(yīng)式對象，實(shí)現(xiàn)雙向數(shù)據(jù)綁定。(5)學(xué)會使用v-for指令來遍歷courses課程對象，其屬性分別為name、teacher、classroom。2.Vue3中組合式API實(shí)戰(zhàn)—學(xué)生成績管理-成績預(yù)警(1)學(xué)會引用vue.global.js文件，并完成視圖和Vue實(shí)例。(2)學(xué)會在組件中使用setup()組件選項(xiàng)，并在其中定義響應(yīng)式對象及相關(guān)方法。(3)學(xué)會使用Vue3.x新增的toRefs()、watchEffect()、computed()、ref()、reactive()等組合式API函數(shù)。(4)學(xué)會使用v-bind指令綁定class，改變信息的顯示風(fēng)格。(5)按照圖4-10～圖4-11所示的頁面效果，完成相關(guān)屬性和方法的定義。1.父子組件間通信實(shí)戰(zhàn)--計(jì)算任意區(qū)間連續(xù)整數(shù)累加和。（1）學(xué)會定義Vue組件，并學(xué)會全局注冊組件。（2）學(xué)會使用CSS定義div、button、input標(biāo)記的樣式。（3）學(xué)會使用父子組件通信實(shí)現(xiàn)兩個組件間相互通信，能夠使用props、$emit()來傳遞和發(fā)送數(shù)據(jù)。（4）學(xué)會在Vue3.x中使用OptionsAPI來定義選項(xiàng)。（5）學(xué)會在body中定義模板(<templateid=‘temp1’></template>)供組件引用(通過ID號引用，如template:‘#temp1’)。2.插槽綜合實(shí)戰(zhàn)—父子組件數(shù)據(jù)傳遞（1）學(xué)會引用vue.global.js，學(xué)會定義Vue組件，構(gòu)建基本HTML文件。（2）學(xué)會使用CSS定義div、button、ul等標(biāo)記的樣式。（3）利用props屬性實(shí)現(xiàn)父組件向子組件傳值，子組件通過$emit()向父組件發(fā)送數(shù)據(jù)。（4）學(xué)會定義匿名插槽、具名插槽和作用域插槽，利用作用域插槽向父組件提供數(shù)據(jù)。（5）學(xué)會定義創(chuàng)建Vue實(shí)例和配置相關(guān)選項(xiàng)，會定義相關(guān)方法實(shí)現(xiàn)相關(guān)功能。1.多組件過渡實(shí)戰(zhàn)—三大前端框架技術(shù)簡介(1)學(xué)會使用createApp()來創(chuàng)建Vue實(shí)例，并掛載到id為#app的視圖上。(2)學(xué)會使用CSS定義超鏈接等標(biāo)記的樣式，學(xué)會使用過渡類名，并完成多組件過渡樣式定義。(3)學(xué)會transition組件和內(nèi)置組件+v-bind:is動態(tài)組件實(shí)現(xiàn)多個組件切換顯示。(4)利用多組件過渡設(shè)計(jì)“tab選項(xiàng)卡”式導(dǎo)航菜單，默認(rèn)渲染第一個組件（vueComp）。2.列表排序過渡實(shí)戰(zhàn)—題庫抽題題號添加、刪除及重新排序（1）學(xué)會導(dǎo)入vue.global.js和lodash.min.js，使用createApp()創(chuàng)建Vue實(shí)例，并掛載到指定#app視圖上。（2）學(xué)會使用CSS3定義按鈕、列表及列表項(xiàng)的樣式效果。（3）學(xué)會使用lodash.js（_.shuffle(arrayName)）來定義列表項(xiàng)彈跳式動畫（洗牌）效果。（4）學(xué)會使用transition-group組件來實(shí)現(xiàn)列表的進(jìn)入/離開的過渡、排序過渡的效果。1.webpack打包資源實(shí)戰(zhàn)—計(jì)算某一區(qū)間內(nèi)所有整數(shù)的累加和學(xué)會使用webpack打包項(xiàng)目。學(xué)會編寫index.html、main.js、webpack.config.js、index.js等文件。學(xué)會使用DOM操作創(chuàng)建、添加新元素。學(xué)會使用webpack編譯和打包工程文件，并能在調(diào)試狀態(tài)下運(yùn)行項(xiàng)目。2.Vue-cli創(chuàng)建項(xiàng)目實(shí)戰(zhàn)--創(chuàng)建vue-cli-ex-2項(xiàng)目（1）學(xué)會使用Vuecreate創(chuàng)建工程項(xiàng)目。（2）學(xué)會手動創(chuàng)建項(xiàng)目，并保存為預(yù)設(shè)。（3）熟悉創(chuàng)建項(xiàng)目的步驟，學(xué)會編寫簡單的Vue單文件組件文件。（4）學(xué)會使用windows對象的定時執(zhí)行函數(shù)和清除定時執(zhí)行函數(shù)完成計(jì)數(shù)器“開始計(jì)數(shù)”“停止計(jì)數(shù)”的功能。（5）學(xué)會使用Vue3.2的<scriptsetup>新特性來定義函數(shù)（defineProps()和響應(yīng)式對象（ref()）。1.Vue3.x+VueRouter4基礎(chǔ)項(xiàng)目實(shí)戰(zhàn)—選修課簡介1.學(xué)會使用vuecreate創(chuàng)建Vue項(xiàng)目。2.學(xué)會在項(xiàng)目中導(dǎo)入vue-router的createRouter和createWebHistory等API。3.學(xué)會使用VueRouter設(shè)置導(dǎo)航、定義路由、定義路由組件、定義路由管理器實(shí)例。4.使用VueRouter４完成項(xiàng)目實(shí)戰(zhàn)。2.VueRouter應(yīng)用實(shí)戰(zhàn)—網(wǎng)上商城產(chǎn)品簡介1.學(xué)會使用vuecreate創(chuàng)建Vue項(xiàng)目。2.學(xué)會在項(xiàng)目中導(dǎo)入vue-router的createRouter和createWebHistory等插件。3.學(xué)會使用VueRouter定義導(dǎo)航、路由及嵌套路由、定義路由組件、定義路由管理器實(shí)例。4.學(xué)會使用devtools調(diào)試和觀察VueRouter的路由、嵌套路由及關(guān)聯(lián)的路由組件。5.完成路由組件的定義、路由及嵌套路由的定義及項(xiàng)目所需要的其它功能。1.Vuex4基礎(chǔ)項(xiàng)目實(shí)戰(zhàn)--基于Vue3.2+Vuex4的水果零星采購應(yīng)用程序1.學(xué)會使用vuecreate創(chuàng)建Vue項(xiàng)目。2.學(xué)會在項(xiàng)目中安裝和導(dǎo)入Vuex。3.學(xué)會使用Vuex4的state、getters、mutations、actions等核心概念解決工程應(yīng)用中狀態(tài)共享問題。4.學(xué)會在組件的<scriptsetup>標(biāo)記中使用Vuex狀態(tài)和分發(fā)action或提交mutation。5.編程實(shí)現(xiàn)水果零星采購中采購數(shù)量的增加與減少（1或者many）功能，其中有兩個按鈕采用異步(setTimeout())操作實(shí)現(xiàn)批量增加或減少數(shù)量的功能。2.Vuex多模塊項(xiàng)目實(shí)戰(zhàn)—出版社圖書銷售統(tǒng)計(jì)1.學(xué)會使用vuecreate創(chuàng)建Vue項(xiàng)目。2.學(xué)會在項(xiàng)目中安裝和導(dǎo)入Vuex。3.學(xué)會使用Vuex4的state、mutations、modules等核心概念解決工程應(yīng)用問題。4.學(xué)會在組件的<scriptsetup>標(biāo)記中使用Vuex狀態(tài)和定義相關(guān)function來提交mutation。5.編程實(shí)現(xiàn)“出版社圖書銷售統(tǒng)計(jì)”單頁頁面。1.Vue3.2+ElementPlus導(dǎo)航+數(shù)據(jù)展示組件實(shí)戰(zhàn)--Web技術(shù)大學(xué)簡易網(wǎng)站(1)學(xué)會在ElementPlus（https://element-plus.gitee.io/zh-CN/）官網(wǎng)上查看相關(guān)組件的使用方法，能夠查看源代碼，并將源代碼粘貼到項(xiàng)目相關(guān)組件中進(jìn)行頁面調(diào)試（將TS代碼改為JS代碼）。(2)掌握Containter布局容器組件、Layout布局組件和Menu菜單組件的相關(guān)屬性和組件的事件與使用方法。(3)學(xué)會使用VueRouter定義路由、定義路由組件、定義路由管理器實(shí)例。(4)熟悉使用Vue3.2+VueCLI+VueRouter+ElementPlus組合構(gòu)建項(xiàng)目，了解項(xiàng)目文件構(gòu)成結(jié)構(gòu)。(5)學(xué)會在項(xiàng)目中安裝ElementPlus插件，并導(dǎo)入組件和樣式文件。(6)完成項(xiàng)目實(shí)戰(zhàn)要求。2.Vue3.2+VueRouter+ElementPlus表格組件實(shí)戰(zhàn)--圖書信息管理系統(tǒng)（1）學(xué)會使用多種方式引入ElementPlus組件庫。（2）熟悉Form表單組件、Data數(shù)據(jù)展示組件、BASIC基礎(chǔ)組件和Feedback反饋組件的組成和基本使用方法。（3）重點(diǎn)學(xué)會使用表單組件中的el-form、el-form-item、el-input、el-date-picker、el-table、el-table-column、el-button及ElMessage消息提示等組件的使用方法。（4）掌握表格組件中自定義表頭和自定義列模板的方法。（5）項(xiàng)目功能：采用表單組件來采集圖書信息并添加到表格。采用自定義表頭和自定義列模板的表格組件顯示圖書信息，可以“查看、刪除”圖書信息，可以根據(jù)輸入圖書名稱來檢索圖書信息。查看時采用ElMessage消息提示組件來顯示圖書基本信息(序號、圖書名稱、作者、出版社)。（6）學(xué)會使用vuecreateep-ex-10-2來創(chuàng)建項(xiàng)目，使用VueRouter來構(gòu)建頁面。1.Vite創(chuàng)建簡易項(xiàng)目實(shí)戰(zhàn)—圖書征訂(1)熟悉Vite構(gòu)建工具的組成與特性。學(xué)會安裝vite和使用Vite工具命令來創(chuàng)建Vue3.2簡易項(xiàng)目。(2)學(xué)會使用<scriptsetup>新組件標(biāo)記來定義組件，在<scriptsetup>標(biāo)記內(nèi)導(dǎo)入組件、ref、computed等API，定義defineProps(),并完成相關(guān)響應(yīng)式對象和函數(shù)的定義。(3)完成簡易圖書征訂功能。2.Vite創(chuàng)建簡易項(xiàng)目實(shí)戰(zhàn)—圖像縮放與旋轉(zhuǎn)(1)熟悉Vite構(gòu)建工具的組成與特性。學(xué)會安裝vite和使用Vite工具命令來創(chuàng)建Vue3.2簡易項(xiàng)目。(2)學(xué)會使用<scriptsetup>、stylev-bind組件新特性來定義組件，在<scriptsetup>標(biāo)記內(nèi)導(dǎo)入組件、ref、provide、inject等API，定義defineProps(),并完成相關(guān)響應(yīng)式對象。在<style>標(biāo)記上通過v-bind()CSS函數(shù)將CSS的值關(guān)聯(lián)到動態(tài)的組件狀態(tài)上。(3)實(shí)現(xiàn)圖像縮放與旋轉(zhuǎn)功能。1.Axios隨機(jī)獲取音樂--網(wǎng)易云音樂隨機(jī)歌曲(1)熟悉Vite構(gòu)建Vue3.2項(xiàng)目步驟。學(xué)會使用npminitvitevite-axios-ex-1--templatevue創(chuàng)建項(xiàng)目，并啟動本地開發(fā)服務(wù)。(2)學(xué)會導(dǎo)入axios和vue-axios，并配置全局可使用的axios。使用provide()和inject()函數(shù)實(shí)現(xiàn)全局提供和子組件中注入使用。(3)學(xué)會使用<scriptsetup>新組件標(biāo)記來定義組件，在<scriptsetup>標(biāo)記內(nèi)調(diào)用axios的get()方法完成“網(wǎng)易云音樂隨機(jī)點(diǎn)歌”的功能。在實(shí)戰(zhàn)中掌握Vue3.0與Vue3.2在組件的定義上的不同。(4)學(xué)會從/api/rand.music接口上獲取相關(guān)音樂的名稱、圖像和音樂URL。請求參數(shù)有sort(選擇輸出分類：熱歌榜、新歌榜、飆升榜、抖音榜、電音榜，為空輸出熱歌榜)、mid(網(wǎng)易云歌單ID)、format(選擇輸出格式)。返回格式：json/mp3。請求方式：get/post。(5)編程實(shí)現(xiàn)單頁面應(yīng)用。2.Axios跨域請求JSON數(shù)據(jù)實(shí)戰(zhàn)—手機(jī)號碼歸屬地查詢(1)熟悉Vite構(gòu)建Vue3.2項(xiàng)目步驟。學(xué)會使用npmcreatevitevite-axios-ex-2--templatevue創(chuàng)建項(xiàng)目，并啟動本地開發(fā)服務(wù)。(2)學(xué)會導(dǎo)入axios和vue-axios，并配置全局可使用的axios。使用provide()和inject()函數(shù)實(shí)現(xiàn)全局提供和子組件中注入使用。(3)學(xué)會使用<scriptsetup>新組件標(biāo)記來定義組件，在<scriptsetup>標(biāo)記內(nèi)調(diào)用axios的get()方法完成“手機(jī)歸屬地查詢”的功能。(4)學(xué)會在vite.config.js文件中配置跨域代理服務(wù)。其中server屬性的配置可以參照以下內(nèi)容：server:

{

proxy:

{

"/api":

{

target:

"/mobile/",

//要請求的第三方接口前綴

changeOrigin:

true,

//開啟代理

secure:

true,

//

設(shè)置支持https協(xié)議的代理

ws:

true,

//要代理websockets，配置這個參數(shù)

rewrite:

(path)

=>

path.replace(/^\/api/,

""),

},

},

},

(5)編程實(shí)現(xiàn)單頁面應(yīng)用。功能在文本輸入框中輸入正確的手機(jī)號碼后，單擊“查詢”按鈕，將在下面的div中顯示手機(jī)歸屬地等相關(guān)信息。六、課程實(shí)施計(jì)劃序號教學(xué)方式教學(xué)內(nèi)容作業(yè)要求教學(xué)目標(biāo)1課堂講課第1章Vue.js發(fā)展概述1.1Vue.js簡介1.1.1Vue.js發(fā)展簡史1.1.2Vue3新特性簡介1.2Vue.js生產(chǎn)環(huán)境配置1.2.1Vue.js引入方法1.2.2安裝VueDevtools1.2.3Node.js環(huán)境配置1.2.4創(chuàng)建第一個Vue單頁程序1.3Vue.js開發(fā)工具1.3.1VisualStudioCode1.3.2HBuilderX1.4ECMAScript6.0基礎(chǔ)1.4.1let和const1.4.2解構(gòu)賦值1.4.3箭頭函數(shù)1.4.4展開運(yùn)算符1.4.5模板字符串第2章Vue.js基礎(chǔ)2.1MVVM模式2.1.1MVVM模式簡介2.1.2MVVM模式的前端框架發(fā)展趨勢2.1.3MVVM模式的應(yīng)用2.2數(shù)據(jù)綁定與插值2.2.1文本綁定2.2.2HTML代碼綁定2.2.3 屬性綁定2.2.4 JavaScript表達(dá)式綁定練習(xí)1掌握常用的Vue.js開發(fā)工具。掌握Vue.js頁面的基本組成。學(xué)會使用Vue.js3.x編寫簡易的單頁面應(yīng)用。掌握ECMAScript基礎(chǔ)語法。理解MVVM模式的工作機(jī)制。掌握多種類型數(shù)據(jù)綁定的方法。2課堂講課第2章Vue.js基礎(chǔ) 2.3計(jì)算屬性與方法2.3.1計(jì)算屬性基礎(chǔ)應(yīng)用2.3.2計(jì)算屬性的setter和getter2.4偵聽屬性watch2.4.1watch屬性基本用法2.4.2watch屬性高級用法2.5生命周期鉤子函數(shù)2.5.1生命周期鉤子函數(shù)作用2.5.2生命周期鉤子函數(shù)應(yīng)用練習(xí)2掌握計(jì)算屬性與方法在使用上的區(qū)別。學(xué)會使用偵聽屬性處理數(shù)據(jù)變化的相關(guān)事務(wù)。理解生命周期鉤子函數(shù)在使用上的差異性。3課堂講課第2章Vue.js基礎(chǔ)2.6Vue中數(shù)組變動更新2.6.1變異方法2.6.2非變異方法2.7控制臺console對象2.7.1顯示信息的命令2.7.2占位符2.7.3分組顯示console.group()2.7.4查看對象的信息console.dir()練習(xí)2掌握數(shù)據(jù)中數(shù)組對象的變異與非變異方法學(xué)會使用console對象的相關(guān)方法4上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)1-實(shí)訓(xùn)2練習(xí)2實(shí)訓(xùn)１（二選一）、實(shí)訓(xùn)２（二選一）5課堂講課第3章Vue.js指令3.1條件渲染3.1.1v-if/v-ele-if/v-else指令3.1.2Vue3.x中key值的應(yīng)用3.1.3v-show指令3.2列表渲染（v-for指令）練習(xí)3理解Vue.js指令的定義與分類。掌握條件渲染指令的使用與注意事項(xiàng)。掌握列表渲染指令v-for的多種定義方法及與key屬性配合使用的方法。6課堂講課第3章Vue.js指令3.3類與樣式綁定（v-bind指令）3.4事件處理（v-on指令）3.5表單輸入綁定（v-model指令）練習(xí)3掌握數(shù)據(jù)綁定的多種方式。掌握表單輸入域綁定指令。掌握事件處理指令及事件修飾符的使用方法。7課堂講課第3章Vue.js指令3.6v-html與v-text指令3.7v-once、v-cloak、v-pre指令3.8Vue.js自定義指令3.8.1自定義指令注冊3.8.2對象字面量練習(xí)3掌握其它內(nèi)置指令的作用與使用方法。掌握Vue自定義指令定義與注冊的方法。8上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)3-1、實(shí)訓(xùn)3-2完成實(shí)訓(xùn)3的實(shí)戰(zhàn)任務(wù)9課堂講課第4章Vue3新特性應(yīng)用4.1響應(yīng)式基礎(chǔ)4.1.1組件選項(xiàng)setup()4.1.2ref()、reactive()、toRefs()和toRef()4.1.3watch、watchEffect和computed4.2Vue3生命周期4.2.1Vue3生命周期函數(shù)（組合式API）4.2.2生命周期鉤子函數(shù)應(yīng)用練習(xí)4學(xué)會使用ref和reactive函數(shù)來創(chuàng)建響應(yīng)式對象。學(xué)會使用toRefs將響應(yīng)式對象轉(zhuǎn)換為普通對象。學(xué)會使用computed、watch和watchEffect定義和監(jiān)聽響應(yīng)式數(shù)據(jù)。學(xué)會使用ref引用DOM元素和組件實(shí)例。理解Vue3生命周期鉤子并學(xué)會定義鉤子函數(shù)10課堂講課第5章Vue.js組件開發(fā)5.1組件基礎(chǔ)5.1.1組件命名5.1.2組件注冊5.2組件間通信5.2.1父組件向子組件傳值5.2.2子組件向父組件傳值練習(xí)5熟悉組件的命名規(guī)范。掌握全局、局部注冊組件的方法。掌握組件間常用的通信方法。11課堂講課課堂講課第5章Vue.js組件開發(fā)5.2.3父鏈與子組件索引5.3插槽5.3.1匿名插槽5.3.2具名插槽5.3.3作用域插槽5.3.4動態(tài)插槽名練習(xí)5掌握插槽的分類和定義方法。12上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)5-1、實(shí)訓(xùn)5-2完成實(shí)訓(xùn)5的實(shí)戰(zhàn)任務(wù)13課堂講課第6章Vue.js過渡與動畫6.1△掌握單元素/組件的過渡6.1.1△過渡的類名 6.1.2△CSS過渡 6.1.3△CSS動畫 6.1.4自定義過渡的類名 6.1.5同時使用過渡和動畫 6.1.6顯性的過渡持續(xù)時間 6.1.7JavaScript鉤子 6.1.8Velocity動畫庫簡介6.2掌握初始渲染的過渡 練習(xí)６熟悉過渡類名的含義和命名規(guī)范。掌握單元素/單組件的過渡方法。掌握初始渲染過渡的方法。14課堂講課第6章Vue.js過渡與動畫6.3△掌握多個元素的過渡6.4△掌握多個組件的過渡 6.5掌握列表過渡 6.5.1★列表的進(jìn)入/離開過渡 6.5.2★列表的排序過渡 6.5.3列表的交錯過渡 練習(xí)6掌握多個元素和多個組件過渡的方法掌握列表進(jìn)入/離開、排序和交錯過渡的實(shí)現(xiàn)方法。學(xué)會編寫帶有Vue.js過渡和動畫效果的頁面。15上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)6-1、實(shí)訓(xùn)6-2完成實(shí)訓(xùn)6的實(shí)戰(zhàn)任務(wù)16課堂講課第7章Vue開發(fā)環(huán)境與SFC新特性7.1Vue開發(fā)環(huán)境簡介7.1.1Node.js簡介7.1.2Node.js部署7.2Node包管理器npm7.2.1npm簡介7.2.2npm常用命令7.3webpack打包工具7.3.1webpack簡介7.3.2webpack配置與應(yīng)用練習(xí)７學(xué)會安裝Node.js掌握常用NPM包管理器命令。學(xué)會webpack安裝和配置。17第7章Vue開發(fā)環(huán)境與SFC新特性7.3.3webpack配置加載器loaders7.3.5webpack配置開發(fā)服務(wù)器7.4VueCLI7.4.1VueCLI安裝7.4.2VueCLI創(chuàng)建Vue項(xiàng)目7.5單文件組件SFC7.5.1單文件組件的結(jié)構(gòu)7.5.2單文件組件的新特點(diǎn)練習(xí)7熟悉VueCLI腳手架的安裝與使用方法。學(xué)會VueCLI創(chuàng)建項(xiàng)目。掌握單文件組件的結(jié)構(gòu)與新特性。18課堂講課第7章Vue開發(fā)環(huán)境與SFC新特性7.6組合式API：依賴注入7.7組合式API模板引用7.7.1獲取節(jié)點(diǎn)7.7.2組件上使用ref7.8組合式函數(shù)7.9模板refs練習(xí)7掌握組合式API-依賴注入的使用方法。了解組合式API模板引用的方法。學(xué)會通過ref引用元素和組件。19上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)7-1?實(shí)訓(xùn)7-2完成實(shí)訓(xùn)7的實(shí)戰(zhàn)任務(wù)20課堂講課第8章前端路由VueRouter8.1△掌握VueRouter概述 8.1.1VueRouter安裝與使用 8.1.2VueRouter基礎(chǔ)應(yīng)用8.2△掌握VueRouter高級應(yīng)用 8.2.1△★動態(tài)路由匹配 學(xué)會安裝和配置VueRouter。學(xué)會定義路由表和路由。掌握router-link和router-view標(biāo)記的基本語法。21課堂講課第8章前端路由VueRouter8.2.2嵌套路由8.2.3編程式導(dǎo)航8.2.4命名路由8.2.5命名視圖8.2.6重定向和別名8.2.7HTML5History模式【選講】8.2.8路由組件傳參理解VueRouter的各種高級應(yīng)用。學(xué)會使用VueRouter實(shí)現(xiàn)單頁應(yīng)用中的導(dǎo)航。22上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)8-1、實(shí)訓(xùn)8-1練習(xí)8完成實(shí)訓(xùn)8的實(shí)戰(zhàn)任務(wù)23課堂講課第9章狀態(tài)管理Vuex9.1Vuex概述9.1.1Vuex定義9.1.2簡單狀態(tài)管理-store模式9.2Vuex基本使用9.3Vuex核心概念9.3.1一個完整的store結(jié)構(gòu)9.3.2最簡單的store9.3.3Vuex中state9.3.4Vuex中g(shù)etter練習(xí)9掌握Vuex的工作原理。掌握Vuex中的store、state、getter等個核心概念。24課堂講課第9章狀態(tài)管理Vuex9.3.5Vuex中mutation9.3.6Vuex中action9.3.7Vuex中module9.4 Vuex多模塊實(shí)戰(zhàn)案例練習(xí)9掌握Vuex中mutation和action的定義與使用方法。熟悉多模塊的應(yīng)用場景。學(xué)會在Vue3.x中引入相關(guān)VuexAPI、使用store對象。25上機(jī)實(shí)訓(xùn)實(shí)訓(xùn)9-1、實(shí)訓(xùn)9-1完成實(shí)訓(xùn)9的實(shí)戰(zhàn)任務(wù)26課堂講課第10章Vue3UI框架ElementPlus1