《Vue.js前端框架技術(shù)與實戰(zhàn)》教學(xué)大綱與實訓(xùn)大綱

《Vuejs前端框架技術(shù)與實戰(zhàn)》

教學(xué)大綱與實訓(xùn)大綱學(xué)分:4學(xué)時：64（48時理論/16時上機(jī)）一、課程的性質(zhì)、地位與任務(wù)《Vue.js前端框架技術(shù)與實戰(zhàn)》課程是計算機(jī)科學(xué)與技術(shù)、信息管理與信息系統(tǒng)、軟件工程、網(wǎng)絡(luò)工程、數(shù)字媒體技術(shù)、物聯(lián)網(wǎng)工程等專業(yè)的一門專業(yè)（必修/選修）課程，也是其他計算機(jī)相關(guān)專業(yè)的普及型課程，通過對Vue.js的特性和開發(fā)環(huán)境配置的了解和Vue.js基礎(chǔ)語法、指令、組件、過渡與動畫、Vuex.VueRouter以及周邊生態(tài)系統(tǒng)的學(xué)習(xí)和研究，讓學(xué)生理解和掌握Vue.js這一漸進(jìn)式框架的核心概念（組件化、模塊化），通過項目實踐培養(yǎng)學(xué)生開發(fā)和設(shè)計復(fù)雜的單頁面應(yīng)用的基本技能和素質(zhì)要求，適應(yīng)目前Web前端工程師的崗位需要。二、課程的教學(xué)目標(biāo)與基本要求本課程教學(xué)基本要求是讓學(xué)生理解Vue.js漸進(jìn)式框架的核心概念，熟練掌握Vue.js前端項目開發(fā)基本流程、開發(fā)環(huán)境部署與配置、單頁面應(yīng)用項目目錄結(jié)構(gòu)定義等基礎(chǔ)知識。掌握Vue.js基礎(chǔ)語法、指令、組件開發(fā)、過渡與動畫等關(guān)鍵概念；掌握使用VueRouter實現(xiàn)單頁面內(nèi)導(dǎo)航與路由設(shè)置，結(jié)合Vuex解決大中型Web前端項目數(shù)據(jù)共享問題，初步熟悉Vue3.0新特性，能夠使用Vue3.0新特性解決簡易的web前端項目，通過比較法來加深對Vue3.0新特性的理解。本課程的教學(xué)目標(biāo)是讓學(xué)生運用HTML5、CSS3、JavaScript熟悉地理解和掌握Vue.js核心概念和基礎(chǔ)語法，掌握Vue指令、組件、過渡與動畫等語法與使用方法。熟練地使得VueRouter來構(gòu)建單頁面導(dǎo)航并渲染路由組件。在中小型項目中使用Vuex解決多組件狀態(tài)數(shù)據(jù)共享的問題。讓學(xué)生使用VueCLI腳手架來搭建Vue2.6和Vue3.0項目，通過項目實訓(xùn)，培養(yǎng)學(xué)生具有開發(fā)含狀態(tài)數(shù)據(jù)共享和路由導(dǎo)航功能于一體的中小型Web單頁面的能力。三、課程內(nèi)容（重點△,難點★）第1章.Vue.js概述.1了解Vue.js簡介△學(xué)會Vue.js生產(chǎn)環(huán)境配置2.1Vue.js引入方法2.2安裝VueDevtools△掌握VUE頁面基本結(jié)構(gòu)3.1template標(biāo)t己3.2script標(biāo)記3.3style標(biāo)記熟悉Vue.js開發(fā)工具（會熟練使用一種主流開發(fā)工具）4.1掌握VisualStudioCode【推薦】4.2SublimeText4.3WebStorm51.組件間通信(1)學(xué)會定義Vue組件，并學(xué)會注冊組件。(2)學(xué)會使用CSS定義div>button>input及img標(biāo)記的樣式。(3)學(xué)會使用事件總線來實現(xiàn)任意組件間相互通信，能夠使用$emil()和$on()來發(fā)送和接收消息。(4)學(xué)會定義Vue實例和配置相關(guān)選項，會定義相關(guān)方法。學(xué)會定義HTML5表單。22.插槽綜合實訓(xùn)一頁面布局換膚(1)學(xué)會全局定義Vue組件，并完成組件的設(shè)計。(2)學(xué)會使用CSS定義div、button.h3及slot等標(biāo)記的樣式。(3)利用props屬性實現(xiàn)父組件向子組件傳值。(4)學(xué)會定義具名插槽來展示傳遞信息，利用動態(tài)插槽名的變更實現(xiàn)內(nèi)容和樣式的更新傳遞。(5)學(xué)會定義Vue實例和配置相關(guān)選項，會定義相關(guān)方法實現(xiàn)相關(guān)功能。61.多組件過渡(1)學(xué)會定義Vue實例，并完成相關(guān)選項的配置。(2)學(xué)會使用CSS定義超鏈接等標(biāo)記的樣式，學(xué)會使用過渡類名，并完成多組件過渡樣式定義。(3)學(xué)會trsnaition組件及動態(tài)組件實現(xiàn)多個組件切換顯示。22.列表過渡實訓(xùn)一列表添加、刪除及重新排序(1)學(xué)會定義Vue實例，并完成相關(guān)選項的配置。(2)學(xué)會使用CSS3定義按鈕、列表及列表項的樣式效果。(3)學(xué)會使用lodash.js來定義列表項彈跳式動畫(洗牌(_.shuffle(arrayName))效果。(4)學(xué)會使用transition-group組件來實現(xiàn)列表的進(jìn)入/離開的過渡、排序過渡的效果。71.webpack打包資源(1)學(xué)會使用Vue創(chuàng)建工程項目。(2)學(xué)會編寫index,html、main,js、webpack,config,js等文件。(3)學(xué)會使用DOM操作創(chuàng)建、添加新元素。(4)學(xué)會導(dǎo)入CSS樣式文件、圖像文件到JavaScript文件中。(5)學(xué)會使用webpack編譯和打包工程文件，并能在調(diào)試狀態(tài)下運行項目。22.Vue-cli可視化創(chuàng)建項目實訓(xùn)一創(chuàng)建webpack-ex-2項目(1)學(xué)會使用VueUI啟動圖形化界面創(chuàng)建工程項目。(2)學(xué)會使用VueUI創(chuàng)建與管理Vue項目(創(chuàng)建、預(yù)設(shè)、配置等)。81.Vue+VueRouter+webpack組合實訓(xùn)(1)學(xué)會使用webpack模板創(chuàng)建Vue項目。(2)學(xué)會在項目中安裝和導(dǎo)入vue-router插件。(3)學(xué)會使用VueRouter設(shè)置導(dǎo)航、定義路由、定義路由組件、定義路由管理器實例。(4)參照天貓中”服飾主會場”中部分頁面效果。使用Vue+VueRouter+Webpack完成項目實訓(xùn)。22.VueRouter+webpack(1)學(xué)會使用webpack模板創(chuàng)建Vue項目。(2)學(xué)會在項目中安裝和導(dǎo)入vue-router插件。(3)學(xué)會使用VueRouter設(shè)置導(dǎo)航、定義路由及嵌套路由、定義路由組件、定義路由管理器實例。9LVuex項目實訓(xùn)一計數(shù)器counter(1)學(xué)會使用webpack模板創(chuàng)建Vue項目。(2)學(xué)會在項目中安裝和導(dǎo)入Vuexo(3)學(xué)會使用Vuex的state>getters>mutations、actions等核心概念解決工程應(yīng)用中狀態(tài)共享問題。(4)學(xué)會使用計算屬性和輔助函數(shù)獲取Vuex狀態(tài)。(5)學(xué)會在組件中使用this.$store.state獲取狀態(tài)，使用this.$store.commit觸發(fā)mutation及使用this.$store.dispatch分發(fā)actiono(6)學(xué)會編寫action和mutation函數(shù)，并習(xí)慣使用action去觸發(fā)mutation。22.Vuex項目實戰(zhàn)綜合運用Vuex的五大核心概念，使用多module來分割store,同時使用命名空間來區(qū)分使用不同模塊的action。以“IT管理學(xué)院信息管理系統(tǒng)”為例，簡易實現(xiàn)教師和學(xué)生的管理。(1)教師端。主要功能是輸入教師信息，并添加到教師列表中，然后可能給指定ID的教師增加薪酬，并將增加薪酬的教師信息添加背景顏色來標(biāo)識一下。⑵學(xué)生端。主要功能是給學(xué)生增加成績，每次遞增5分，最高成績?yōu)?00分，成績范圍：30?95。101.Vant官方示例合集實訓(xùn)一使用Vant搭建應(yīng)用(1)學(xué)會從GitHub上下載相關(guān)項目資源(https://github.com/youzan/vant-demo),并能夠按照README,md提示的步驟進(jìn)行項目部署。(2)熟悉Vant-Demo(vant-demo-master)項目中vant/base子項目所采用的技術(shù)棧(Vue、VueCli>VueRouter>Vant)。(3)學(xué)會使用VueRouter定義路由、定義路由組件、定義路由管理器實例。(4)熟悉使用Vue+VueRouter+Vant構(gòu)建項目，了解項目文件構(gòu)成結(jié)構(gòu)。0(課外實踐)2.Vue+Element表格組件實訓(xùn)一帶搜索功能的表格數(shù)據(jù)分頁顯示(1)學(xué)會使用CDN或本地引入Vue和ElementUI。(2)熟悉ElementUI組件庫中組件的分類，重點掌握輸入框組件(el-input),表格組件(el-table>el-table-column)>行/列組件(el-row、el-col)和按鈕(el-button)等組件的使用方法。(3)掌握分頁組件(el-pagination)的layout、backgroundssize、pager-count>total、small等屬性的含義與設(shè)置方法。11l.Vue.js高級應(yīng)用實訓(xùn)一友聯(lián)通訊錄自己動手，完成“友聯(lián)通訊錄”的所有功能實訓(xùn)練習(xí)。并嘗試對友聯(lián)通訊錄主頁面addressBook.vue文件進(jìn)行修改，使用ElementUI中Pagination分頁組件實現(xiàn)通訊錄按設(shè)定的“行/頁”格式顯示。0(課外實踐)2.Vue.js高級應(yīng)用實訓(xùn)一通用登錄/注冊管理系統(tǒng)熟悉Vue前后端分離項目的開發(fā)流程，自己動手，完成“通用登錄/注冊管理系統(tǒng)”的所有功能實訓(xùn)練習(xí)。(1)在數(shù)據(jù)庫login中增加一個數(shù)據(jù)表books,設(shè)置bookno(字符，13位)、bookname(字符，50位)、pubpress(字符，30位)、bookdate(日期,如“2020-09-21")、price(浮點)、count(整數(shù)，庫存)等字段。(2)參照user表，編寫圖書操作的CRUD的sqlMap.js和bookApi.js,并在左側(cè)導(dǎo)航中增加相應(yīng)的圖書操作的菜單和編寫相對應(yīng)的Vue組件。121.Vue3.0提供/注入實訓(xùn)一父組件操控子組件中div樣式(1)掌握使用VueCLI創(chuàng)建Vue3.0簡易工程項目的方法。(2)掌握Vue3.0中的提供/注入provideO/inject()函數(shù)的使用方法。(3)學(xué)會定義setup。函數(shù)和創(chuàng)建ref響應(yīng)式對象。2(4)學(xué)會使用provide。函數(shù)提供普通數(shù)據(jù)共享和ref響應(yīng)式數(shù)據(jù)共享。(5)學(xué)會按需導(dǎo)入項目中所需要的函數(shù)。(1)學(xué)會使用VueCLI創(chuàng)建集成Vuex和VueRouter功能的Vue3.0工程項目。會使用手動或自動方式進(jìn)行項目初始選項的設(shè)置。(2)熟悉默認(rèn)初始創(chuàng)建項目的文件結(jié)構(gòu)，并會與Vue2.x項目文件結(jié)構(gòu)進(jìn)行比較，總結(jié)Vue3.0項目文件結(jié)構(gòu)的特點。2.Vue3.0中Vuex和VueRouter實訓(xùn)一簡易圖書選購(3)學(xué)會使用VueRouter定義路由、定義路由組件。會使用createRouter、createWebllistory兩個API2.Vue3.0中Vuex和VueRouter實訓(xùn)一簡易圖書選購(4)學(xué)會使用createStore創(chuàng)建store對象。根據(jù)狀態(tài)數(shù)據(jù)的操作需要編寫相關(guān)的mutations和actionso(5)學(xué)會在組件中導(dǎo)入useStoreAPI函數(shù)，并在setup()函數(shù)內(nèi)觸發(fā)相關(guān)的mutations或分發(fā)actions。學(xué)會導(dǎo)入useRouterAPI函數(shù)，并在setup。函數(shù)中使用路由器來切換路由。(6)完成項目的開發(fā)任務(wù)。六、課內(nèi)實訓(xùn)(一)本課程實訓(xùn)的目的與要求通過本課程的課堂學(xué)習(xí)和實訓(xùn)，使學(xué)生加深理解Vue.js核心概念和基本語法，掌握內(nèi)部指令和自定義指令、組件定義與通訊和過渡與動畫等基礎(chǔ)知識。能夠熟練地運用VueRouter和Vuex組件技術(shù)解決實際工程中單頁面導(dǎo)航和組件渲染及多組件狀態(tài)數(shù)據(jù)共享。通過項目實訓(xùn)，讓學(xué)生使用VueCLI腳手架來搭建Vue2.6和Vue3.0項目，通過項目實訓(xùn)，培養(yǎng)學(xué)生具有開發(fā)含狀態(tài)數(shù)據(jù)共享和路由導(dǎo)航功肯汗一體的中小型Web單頁面的能力?；疽螅?熟練掌握Vue.js前端框架技術(shù)主流開發(fā)工具和環(huán)境部署方法。.掌握Vue項目的組件化和模塊化構(gòu)建技術(shù)的核心思想與方法。.深入學(xué)習(xí)VueRouter和Vuex組件技術(shù)，解決實際項目中路由導(dǎo)航和狀態(tài)數(shù)據(jù)共享問題。.學(xué)會使用VueCLI構(gòu)建Vue2.6和Vue3.0項目。(二)本課程實訓(xùn)的項目和主要內(nèi)容序號項目名稱學(xué)時主要內(nèi)容類型11-1.內(nèi)置指令v-model實訓(xùn)--下拉列表框綁定0(課外實踐)(1)學(xué)會定義Vue根實例對象及el和data選項。(2)學(xué)會引入Vue,完成Vue視圖的定義。(3)學(xué)會使用v-model指令綁zeselect兒系。設(shè)計性21-2.模板中v-bind指令實訓(xùn)—Vue實例中選項的配置⑴學(xué)會引入Vue、定義Vue實例及配置el、template和data的選項。(3)學(xué)會在template模板中使用data中的數(shù)據(jù)，并在模板中綁定classo設(shè)計性32T.偵聽屬性的綜合實訓(xùn)一動態(tài)觀察學(xué)生信息采集。2(1)學(xué)會引入Vue.js及定義Vue實例對象、配置el和data等選項。(2)學(xué)會配置methods和watch等選項，并完成函數(shù)的定義。(3)學(xué)會使用v-model>v-bind、v-on等指令來完成表單綁定、屬性綁定和事件綁定。設(shè)計性42-2.計算屬性、方法、過濾器的綜合實訓(xùn)一郵購商品業(yè)務(wù)(1)學(xué)會定義Vue實例對象、配置el和data、methods、computed等選項。(2)學(xué)會引入Vue.js,使用v-model、v-on、v-for等指令來完成表單綁定、事件綁定、遍歷商品。(3)學(xué)會定義filters和methods屬性。設(shè)計性53-1.內(nèi)置指令實訓(xùn)一人員添加并輸出2(1)學(xué)會引入Vue,定義Vue實例對象及配置el>data和methods等選項。(2)學(xué)會使用v-on、v-model>v-bind及v-for等內(nèi)部指令。設(shè)計性63-2.自定義指令實訓(xùn)一自定義字符裝飾(1)學(xué)會引入Vue,同時定義2個Vue實例對象，分別解決不同的應(yīng)用需求，并配置el>data和directives等選項。(2)學(xué)會使用自定義指令的注冊方法。會用全局注冊和局部注冊的方式定義相關(guān)的指令。(3)學(xué)會使用v-bind指令綁定style,給div設(shè)置相應(yīng)的樣式。設(shè)計性74-l.Vue.js基礎(chǔ)案例實訓(xùn)一簡易圖書管理0(課外實踐)使用HTML5表單元素，設(shè)計圖書信息添加界面完成圖書添加、圖書搜索、圖書刪除。圖書信息包含：圖書ID、圖書名稱、出版社、作者、插入日期等字段。綜合性84-2.Vue.js基礎(chǔ)案例實訓(xùn)--我的待辦事項使用HTML5表單完成界面設(shè)計。按“添加”按鈕將待辦事項添加到展示項目中。在復(fù)選框中打上勾號“ 標(biāo)記一下完成的待辦事項，單擊“X”符號冊U除該事項。完成狀態(tài)顯示欄設(shè)置。剩余項目數(shù)/項目數(shù)、全部、待完成、已完成、清除完成等功能。綜合性95T.組件間通信實訓(xùn)一友誼聊吧2(1)學(xué)會定義Vue組件，并學(xué)會注冊組件。(2)學(xué)會使用事件總線來實現(xiàn)任意組件間相互通信，能夠使用$emit()和$on()來發(fā)送和接收消息。(3)學(xué)會定義Vue實例和配置相關(guān)選項，會定義相關(guān)方法。學(xué)會定義HTML5表單。設(shè)計性105-2.插槽綜合實訓(xùn)一頁面布局換膚(1)學(xué)會全局定義Vue組件，并完成組件的設(shè)計。(2)利用props屬性實現(xiàn)父組件向子組件傳值。(3)學(xué)會定義具名插槽來展示傳遞信息，利用動態(tài)插槽名的變更實現(xiàn)內(nèi)容和樣式的更新傳遞。設(shè)計性116-1.多組件過渡實訓(xùn)一京東一智能生活-部分菜單仿真設(shè)計2(1)學(xué)會定義Vue實例，并完成相關(guān)選項的配置。(2)學(xué)會使用CSS定義超鏈接等標(biāo)記的樣式，學(xué)會使用過渡類名，并完成多組件過渡樣式定義。(3)學(xué)會trsnaition組件及動態(tài)組件實現(xiàn)多個組件切換顯示。設(shè)計性126-2.列表過渡實訓(xùn)一列表添加、刪除及重新排序(1)學(xué)會定義Vue實例，并完成相關(guān)選項的配置。(2)學(xué)會使用CSS3定義按鈕、列表及列表項的樣式效果。(3)學(xué)會使用lodash.js來定義列表項彈跳式動畫(洗牌(_.shuffle(arrayName))效果。(4)學(xué)會使用transition-group組件來實現(xiàn)列表的進(jìn)入/離開的過渡、排序過渡的效果。設(shè)計性137-1.webpack打包資源2(1)學(xué)會使用Vue創(chuàng)建工程項目。(2)學(xué)會編寫index.html>main.js>webpack,config.js等文件。(3)學(xué)會使用DOM操作創(chuàng)建、添加新元素。學(xué)會導(dǎo)入CSS樣式文件、圖像文件到JavaScript文件中。(4)學(xué)會使用webpack編譯和打包工程文件，并能在調(diào)試狀態(tài)下運行項目。設(shè)計性147-2.Vue-cli可視化創(chuàng)建項目實訓(xùn)一創(chuàng)建webpack-ex-2項目(1)學(xué)會使用VueUI啟動圖形化界面創(chuàng)建工程項目。(2)學(xué)會使用VueUI創(chuàng)建與管理Vue項目(創(chuàng)建、預(yù)設(shè)、配置等)。驗證性/操作性158-1.Vue+VueRouter+webpack組合2(1)學(xué)會使用webpack模板創(chuàng)建Vue項目。(2)學(xué)會在項目中安裝和導(dǎo)入vue-router插件。(3)學(xué)會使用VueRouter設(shè)置導(dǎo)航、定義路由、定義路由組件、定義路由管理器實例。(4)參照天貓中”服飾主會場”中部分頁面效果。使用Vue+VueRouter+Webpack完成項目實訓(xùn)。設(shè)計性168-2.VueRouter+webpack項目(1)學(xué)會使用webpack模板創(chuàng)建Vue項目。(2)學(xué)會在項目中安裝和導(dǎo)入vue-router插件。(3)學(xué)會使用VueRouter設(shè)置導(dǎo)航、定義路由及嵌套路由、定義路由組件、定義路由管理器實例。(4)參照“百度推廣”首頁導(dǎo)航(.baidu.com/ebaidu/home)。使用Vue+VueRouter+Webpack完成項目實訓(xùn)。設(shè)計性179-LVuex項目實訓(xùn)一計數(shù)器counter2(1)學(xué)會使用webpack模板創(chuàng)建Vue項目。(2)學(xué)會在項目中安裝和導(dǎo)入Vuexo(3)學(xué)會使用Vuex的state、getters、mutations、actions等核心概念解決工程應(yīng)用中狀態(tài)共享問題。(4)學(xué)會使用計算屬性和輔助函數(shù)獲取Vuex狀態(tài)。(5)學(xué)會在組件中使用this.$store.state獲取狀態(tài)，使用this.$store.commit觸發(fā)mutation及使用this.$store.dispatch分發(fā)actiono(6)學(xué)會編寫action和mutation函數(shù)，并習(xí)慣使用action去觸發(fā)mutation。設(shè)計性189-2.Vuex項目實戰(zhàn)—Vuex-IT管理學(xué)院信息管理系統(tǒng)綜合運用Vuex的五大核心概念，使用多module來分割store,同時使用命名空間來區(qū)分使用不同模塊的action。以“IT管理學(xué)院信息管理系統(tǒng)”為例，簡易實現(xiàn)教師和學(xué)生的管理。教師端。主要功能是輸入教師信息，并添加到教師列表中，然后可能給指定ID的教師增加薪酬，并將增加薪酬的教師信息添加背景顏色來標(biāo)識一下。學(xué)生端。主要功能是給學(xué)生增加成績，每次遞增5分，最高成績?yōu)?00分，成績范圍：30?95o綜合性1910-1.Vant官方示例合集實訓(xùn)一使用Vant搭建應(yīng)用0(課外實踐)(1)學(xué)會從Gitllub上下載相關(guān)項目資源(https://github.com/youzan/vant-demo),并能夠按照README,md提示的步驟進(jìn)行項目部署。(2)熟悉Vant-Demo(vant-demo-master)項目中vant/base子項目所采用的技術(shù)棧(Vue、VueCli>VueRouter、Vant)。(3)學(xué)會使用VueRouter定義路由、定義路由組件、定義路由管理器實例。(4)熟悉使用Vue+VueRouter+Vant構(gòu)建項目，了解項目文件構(gòu)成結(jié)構(gòu)。驗證性2010-2.Vue+Element表格組件實訓(xùn)一帶搜索功能的表格數(shù)據(jù)分頁顯示(1)學(xué)會使用CDN或本地引入Vue和ElementUI。(2)熟悉ElementUI組件庫中組件的分類，重點掌握輸入框組件(el-input)>表格組件(el-table、el-table-column)>行/列組件(el-row、el-col)和按鈕(el-button)等組件的使用方法。(3)掌握分頁組件(el-pagination)的layout、backgroundssize、pager-count>total、small等屬性的含義與設(shè)置方法。設(shè)計性2111-1.Vue.js高級應(yīng)用實訓(xùn)一友聯(lián)通訊錄0(課外實踐)自己動手，完成“友聯(lián)通訊錄”的所有功能實訓(xùn)練習(xí)。并嘗試對友聯(lián)通訊錄主頁面addressBook.vue文件進(jìn)行修改，使用ElementUI中Pagination分頁組件實現(xiàn)通訊錄按設(shè)定的“行/頁”格式顯示。綜合性2211-2.Vue.js高級應(yīng)用實訓(xùn)一通用登錄/注冊管理系統(tǒng)熟悉Vue前后端分離項目的開發(fā)流程，自己動手，完成“通用登錄/注冊管理系統(tǒng)”的所有功能實訓(xùn)練習(xí)。(1)在數(shù)據(jù)庫login中增加一個數(shù)據(jù)表books,設(shè)置bookno(字符，13位)、bookname(字符，50位)、pubpress(字符，30位)、bookdate(日期，如“2020-09-21")、price(浮點)、count(整數(shù)，庫存)等字段。(2)參照user表，編寫圖書操作的CRUD的sqlMap.js和bookApi.js,并在左側(cè)導(dǎo)航中增加相應(yīng)的圖書操作的菜單和編寫相對應(yīng)的Vue組件。綜合性2312-1.Vue3.0提供/注入實訓(xùn)一父組件操控子組件中div樣式2(1)掌握使用VueCLI創(chuàng)建Vue3.0簡易工程項目的方法。(2)掌握Vue3.0中的提供/注入provideO/inject()函數(shù)的使用方法。(3)學(xué)會定義setup()函數(shù)和創(chuàng)建ref響應(yīng)式對象。(4)學(xué)會使用provide()函數(shù)提供普通數(shù)據(jù)共享和ref響應(yīng)式數(shù)據(jù)共享。(5)學(xué)會按需導(dǎo)入項目中所需要的函數(shù)。綜合性2412-22.Vue3.0中Vuex和VueRouter實訓(xùn)一簡易圖書選購(1)學(xué)會使用VueCLI創(chuàng)建集成Vuex和VueRouter功能的Vue3.0工程項目。會使用手動或自動方式進(jìn)行項目初始選項的設(shè)置。(2)熟悉默認(rèn)初始創(chuàng)建項目的文件結(jié)構(gòu)，并會與Vue2.x項目文件結(jié)構(gòu)進(jìn)行比較，總結(jié)Vue3.0項目文件結(jié)構(gòu)的綜合性特點。⑶學(xué)會使用VueRouter定義路由、定義路由組件。會使用createRouter>createWebHistory兩個API創(chuàng)建路由管理器router和history對象。(4)學(xué)會使用createStore創(chuàng)建store對象。根據(jù)狀態(tài)數(shù)據(jù)的操作需要編寫相關(guān)的mutations和actionso(5)學(xué)會在組件中導(dǎo)入useStoreAPI函數(shù)，并在setup。函數(shù)內(nèi)觸發(fā)相關(guān)的mutations或分發(fā)actions。學(xué)會導(dǎo)入useRouterAPI函數(shù)，并在setup()函數(shù)中使用路由器來切換路由。(6)完成項目的開發(fā)任務(wù)。(三)實驗說明課程總學(xué)分4實驗學(xué)時數(shù)16實驗項目數(shù)24考核方式日常考核團(tuán)操作技能考核口卷面考核口提交實驗結(jié)果回面試口適用專業(yè)與年級：計算機(jī)科學(xué)與技術(shù)、軟件工程、信息管理與信息系統(tǒng)、網(wǎng)絡(luò)工程、數(shù)字媒體技術(shù)、物聯(lián)網(wǎng)工程等相關(guān)專業(yè)1-3年級七、課程實施計劃序號教學(xué)方式教學(xué)內(nèi)容作業(yè)要求教學(xué)目標(biāo)1課堂講課第1章Vue.js概述1了解Vue.js簡介△學(xué)會Vue.js生產(chǎn)環(huán)境配置△掌握VUE頁面基本結(jié)構(gòu)4熟悉Vue.js開發(fā)工具第2章Vue.js基礎(chǔ)1理解MVC與MWM模式1.1MVC模式1.2MVVM模式2.2△掌握數(shù)據(jù)綁定與插值2.2.1文本綁定2.2.2HTML代碼綁定2.2.3屬性綁定2.2.4JavaScript表iA式綁7E練習(xí)1掌握常用的Vue.js開發(fā)工具。學(xué)會配置Vue.js生產(chǎn)環(huán)境。掌握Vue.js頁面的基本組成。學(xué)會編寫最基本的Vue.js頁面。理解MVC、MVVM模式的工作機(jī)制。掌握多種類型數(shù)據(jù)綁定的方法。2課堂講課第2章Vue.js基礎(chǔ)△掌握計算屬性與方法3.1計算屬性基礎(chǔ)應(yīng)用3.2△計算屬性緩存與方法比較3.3計算屬性的setter和getter★掌握偵聽屬性WATCH掌握計算屬性與方法在使用上的區(qū)別。學(xué)會使用偵聽屬性處理數(shù)據(jù)變化的相關(guān)事務(wù)。學(xué)會基本的控制臺輸出語句【根據(jù)學(xué)時和教學(xué)要求自選確定教學(xué)內(nèi)容】2.4.1★watch屬性基本用法2.4.2★watch屬性高級用法2.5★理解生命周期鉤子函數(shù)2.5.1生命周期鉤子函數(shù)作用2.5.2生命周期鉤子函數(shù)應(yīng)用2.6學(xué)會使用控制臺CONSOLE對象2.6.1△顯示信息的命令占位符2.6.3console,group()分組顯示2.6.4△查看對象的信息console,dir()【選學(xué)】顯示某個節(jié)點的內(nèi)容console,dirxml()【選學(xué)】2.6.6判斷變量是否為真console,assert()【選學(xué)】2.6.7追蹤函數(shù)的調(diào)用軌跡console,trace()【選學(xué)】2.6?8計時功能【選學(xué)】性能分析【選學(xué)】表格形式輸出數(shù)組和對象console,table()理解生命周期鉤子函數(shù)在使用上的差異性。3課堂講課第2章Vue.js基礎(chǔ)2.7掌握數(shù)據(jù)與方法2.7.1△數(shù)據(jù)對象的定義與使用7.2△Vue實例屬性與方法2.8★掌握Vue中數(shù)組變動更新檢測2.8.1★變異方法2.8.2★非變異方法2.9理解并掌握Vue中過濾器學(xué)會定義及使用數(shù)據(jù)對象掌握數(shù)據(jù)實例的相關(guān)方法掌握數(shù)據(jù)中數(shù)組對象的變異與非變異方法學(xué)會定義與使用過濾器4上機(jī)實訓(xùn)實訓(xùn)2-1、實訓(xùn)2-2練習(xí)25課堂講課3.1△掌握Vue.js內(nèi)置指令3.1.1△條件渲染△用key管理可復(fù)用的元素△根據(jù)條件展示元素v-show1.4△列表渲染v-for指令理解Vue.js指令的定義與分類。掌握條件渲染指令的使用與注意事項。掌握列表渲染指令v-for的多種定義方法6課堂講課第3章Vue.js指令3.1.5△綁定屬性v-bind指令3.1.6△事件處理v-on指令3.1.7事件修飾符3.1.8按鍵修飾符v-for指令及v-bind:key屬性配合使用的方法。掌握數(shù)據(jù)綁定的多種方式。掌握事件處理指令及事件修飾符的使用方法。掌握HBuilderX【推薦】第2章Vue.js基礎(chǔ)1理解MVC與MWM模式1.1MVC模式1.2MVVM模式2.2△掌握數(shù)據(jù)綁定與插值2.1文本綁定2.2HTML代碼綁定2.3屬性綁定2.4JavaScript表達(dá)式綁定△掌握計算屬性與方法3.1計算屬性基礎(chǔ)應(yīng)用3.2△計算屬性緩存與方法比較3.3計算屬性的setter和getter★掌握偵聽屬性WATCH4.1★watch屬性基本用法4.2★watch屬性高級用法★理解生命周期鉤子函數(shù)5.1生命周期鉤子函數(shù)作用5.2生命周期鉤子函數(shù)應(yīng)用學(xué)會使用控制臺CONSOLE對象2.6.1△顯示信息的命令占位符2.6.3分組顯示console,group()2.6.4△查看對象的信息console,dir()2.6.5顯示某個節(jié)點的內(nèi)容console,dirxml()2.6.6判斷變量是否為真console,assert()2.6.7追蹤函數(shù)的調(diào)用軌跡console,trace()2.6.8計時功能2.6.9性能分析6.10表格形式輸出數(shù)組和對象console,table()掌握數(shù)據(jù)與方法7.1△數(shù)據(jù)對象的定義與使用7.2△Vue實例屬性與方法★掌握Vue中數(shù)組變動更新檢測8.1★變異方法8.2★非變異方法2.9理解并掌握Vue中過濾器7課堂講課第3章Vue.js指令3.1.9Av-model表單輸入綁定表單元素值綁定3.1.11v-model與修飾符3.1.12v-text與v-html指令3.1.13 △v-cloak、v-once、v-pre指令掌握v-model>v-text>v-html等內(nèi)置指令的作用與使用方法。掌握V-cloak、v-once>v-pre等其它內(nèi)置指令的作用與使用方法。8課堂講課第3章Vue.js指令3.2△★掌握Vue.js自定義指令3.2.1△自定義指令注冊3.2.2對象字面量3.2.3★動態(tài)指令參數(shù)3.2.4自定義指令實際應(yīng)用掌握Vue自定義指令定義與注冊的方法。9上機(jī)實訓(xùn)實訓(xùn)3-1、實訓(xùn)3-2練習(xí)310課堂講課第4章Vue.js基礎(chǔ)案例實戰(zhàn)簡易圖書管理.1.1簡易圖書管理項目需求.1.2簡易圖書管理項目實現(xiàn)我的待辦事項MyToDos.2.1我的待辦事項項目需求.2.2我的待辦事項項目實現(xiàn)課外實訓(xùn)4-1、4-2掌握Vue簡易項目基本組成。學(xué)會在項目中引入Vue.js。掌握常用v-for>v-bind>v-on>v-model>v-show等指令的使用方法。掌握Vue過濾器的定義方法。11課堂講課第5章Vue.js組件開發(fā)5.1掌握組件基礎(chǔ)5.1.1組件命名5.1.2組件注冊5.2★掌握組件間通信5.2.1★父組件向子組件傳值5.2.2★子組件向父組件傳值熟悉組件的命名規(guī)范。掌握全局、局部注冊組件的方法。掌握組件間常用的通信方法。12上機(jī)實訓(xùn)第5章Vue.js組件開發(fā)5.2.3★兄弟組件之間通信5.2.4★父鏈與子組件索引5.3掌握單文件組件掌握兄弟組件間通信方法。學(xué)會使用父鏈this.$parent和子組件索引this.$refs來使用組件的數(shù)據(jù)理解單文件組件的構(gòu)成。13課堂講課第5章Vue.js組件開發(fā)5.4★掌握插槽5.4.1★匿名插槽5.4.2★具名插槽5.4.3★作用域插槽5.4.4★動態(tài)插槽名掌握插槽的分類和定義方法。14上機(jī)實訓(xùn)實訓(xùn)5-1、實訓(xùn)5-2練習(xí)515課堂講課第6章Vue.js過渡與動畫△掌握單元素/組件的過渡1.1△過渡的類名1.2Z\CSS過渡1.3ZkCSS動畫1.4自定義過渡的類名1.5同時使用過渡和動畫.6顯性的過渡持續(xù)時間1.7JavaScript鉤子6.2掌握初始渲染的過渡熟悉過渡類名的含義和命名規(guī)范。掌握單元素/單組件的過渡方法。掌握初始渲染過渡的方法。16課堂講課第6章Vue.js過渡與動畫△掌握多個元素的過渡△掌握多個組件的過渡6.5掌握列表過渡6.5.1★列表的進(jìn)入/離開過渡6.5.2★列表的排序過渡6.5.3列表的交錯過渡掌握列表進(jìn)入/離開、排序和交錯過渡的實現(xiàn)方法。學(xué)會編寫帶有Vue.js過渡和動畫效果的頁面。17上機(jī)實訓(xùn)實訓(xùn)6-1、實訓(xùn)6-2練習(xí)618課堂講課第7章Vue項目開發(fā)環(huán)境與輔助工具部署理解部署node,js7.1.1Node,js簡介7.1.2Node,js部署7.1.3△Node,js模塊系統(tǒng)7.1.4Node,js創(chuàng)建第一個應(yīng)用7.2掌握Node包管理器npm7.2.1npm簡介7.2.2△npm常用命令7.3△掌握Node,js環(huán)境配置熟悉Vue項目基本開發(fā)環(huán)境和常用的輔助工具。掌握常用NPM包管理器命令。19課堂講課第7章Vue項目開發(fā)環(huán)境與輔助工具部署7.4掌握webpack打包工具7.4.1webpack簡介7.4.2△webpack使用與基本配置7.4.3△★webpack配置加載器loaders7.4.4★webpack配置插件7.4.5△webpack配置開發(fā)服務(wù)器7.5掌握VUECLI7.5.1VueCLI安裝7.5.2AVueCLI創(chuàng)建Vue項目7.5.3AVueCLI可視化創(chuàng)建Vue項目學(xué)會webpack安裝和配置。學(xué)會VueCLI安裝與項目創(chuàng)建。20上機(jī)實訓(xùn)實訓(xùn)7T、實訓(xùn)7-1練習(xí)721課堂講課第8章前端路由VueRouter8.1△掌握VueRouter概述8.1.1VueRouter安裝與使用8.1.2VueRouter基礎(chǔ)應(yīng)用8.2△掌握VueRouter高級應(yīng)用8.2.1△★動態(tài)路由匹配學(xué)會安裝和配置VueRoutero學(xué)會定義路由表和路由。掌握router-link和router-view標(biāo)記的基本語法。理解VueRouter的各種高級應(yīng)用-動態(tài)路由。22課堂講課第8章前端路由VueRouter8.2.2△嵌套路由8.2.3△編程式導(dǎo)航8.2.4△命名路由8.2.5△命名視圖8.2.6△重定向和別名8.2.7★路由組件傳參8.2.8Z\HTML5History模式理解VueRouter的各種高級應(yīng)用。學(xué)會使用VueRouter實現(xiàn)單頁應(yīng)用中的導(dǎo)航。23上機(jī)實訓(xùn)實訓(xùn)8-1、實訓(xùn)8-1練習(xí)824上機(jī)實訓(xùn)第9章狀態(tài)管理模式Vuex9.1掌握Vuex概述9.1.1Vuex定義簡單狀態(tài)管理-store模式△掌握Vuex基本使用△掌握Vuex核心概念9.3.1一個完整的store結(jié)構(gòu)9.3.2最簡單的store9.3.3Vuex中state9.3.4Vuex中g(shù)etter掌握Vuex的工作原理。掌握Vuex五個核心概念。25課堂講課第9章狀態(tài)管理模式Vuex9.3.5△★Vuex中mutation9.3.6△★Vuex中action9.3.7△★Vuex中module9.4理解并掌握Vuex多模塊實戰(zhàn)案例掌握Vuex中mutation和action的定義與使用方法。熟悉多模塊的應(yīng)用場景。26上機(jī)實訓(xùn)實訓(xùn)9-1、實訓(xùn)9-1練習(xí)927課堂講課第10章VueUI組件庫10.1理解并掌握VuePC端組件庫10.1.1△ElementUI10.1.2iViewUI10.1.3其它PC端UI組件庫10.2理解并掌握Vue移動端UI組件庫10.2.1MintUI10.2.2AVantUI掌握Element桌面端UI框架的引入與組件使用方法。掌握iView桌面端UI框架的引入與組件使用方法。掌握Mint移動端UI框架的引入與組件使用方法。掌握Vant桌面端U1框架的引入與組件使用方法。28課堂講課第11章Vue高級項目實戰(zhàn)11.1理解并掌握友聯(lián)通訊錄項目需求實現(xiàn)技術(shù)11.1.3環(huán)境配置11.1.4★項目實現(xiàn)課外實-VII11-1學(xué)會Vue-Router安裝與路由的配置方法。掌握WebStorage對象的常用方法。29課堂講課第11章Vue高級項目實戰(zhàn)11.2★理解并掌握通用登錄/注冊管理系統(tǒng)1項目需求實現(xiàn)技術(shù)環(huán)境配置★項目實現(xiàn)課外實UH11-2學(xué)會使用ElementUI相關(guān)組件解決實際工程問題。學(xué)會安裝與配置MySQL、Express、axios、body-parser等模塊。30課堂講課第12章Vue3.0基礎(chǔ)應(yīng)用1了解Vue3.0新特性新特性簡介下一階段工作1.3Vue3.0學(xué)習(xí)參考12.2學(xué)會Vue3.0初步體驗12.2.1Vue3.0下載與引用12.2.2Vue3.0創(chuàng)建簡易應(yīng)用12.2.3Vue3.0發(fā)布文檔的使用12.3△★掌握Vue3.0新特性應(yīng)用12.3.1使用腳手架創(chuàng)建項目12.3.2△組件選項setup()12.3.3ref()、reactive()和toRefs()12.3.4△watch、watchEffect和computed學(xué)會使用VueCLI腳手架創(chuàng)建Vue3.0工程項目學(xué)會使用crateApp函數(shù)創(chuàng)建實例對象。學(xué)會在Vue文件中script標(biāo)記中定義setup()函數(shù)學(xué)會使用ref和reactive函數(shù)來創(chuàng)建響應(yīng)式對象。學(xué)會使用toRefs將響應(yīng)式對象轉(zhuǎn)換為普通對象。學(xué)會使用computed、watch和watchEffect定義和監(jiān)聽響應(yīng)式數(shù)據(jù)。31課堂講課第12章Vue3.0基礎(chǔ)應(yīng)用12.3.5△ref引用DOM元素和組件實例12.3.6AVueRouter和Vuex12.3.7AVue3.0生命周期12.3.8△提供provide()和注入inject()12.3.9★組合式API12.3.10★模板refs12.4理解并掌握VUE3.0購物車實戰(zhàn)12.4.1項目設(shè)計要求12.4.2△★項目實現(xiàn)學(xué)會使用ref引用D0M元素和組件實例。學(xué)會使用Vue3.0中集成的Vuex和VueRouter來開發(fā)項目。學(xué)會使用Vue3.0中的provide和inject來解決數(shù)據(jù)共享問題。學(xué)會使用其它Vue3.0新特性。32上機(jī)實訓(xùn)實訓(xùn)12-1、實訓(xùn)12T練習(xí)12八、教學(xué)工具軟件教學(xué)工具軟件：建議使用VSCode.IIBuilderX等主流開發(fā)工具。瀏覽器工具：建議使用Chrome、Firefox等。調(diào)試工具：Vue2.x建議使用vue-devtoolsv5.x.x。Vue3.x建議使用Vue-devtoolsv6.0.0beta10以上。如果是混合開發(fā)，建議使用Vue-devtoolsv6.0.0beta10以上。執(zhí)筆人： 審核人:時間:第3章Vue.js指令1△掌握Vue.js內(nèi)置指令3.1.1△條件渲染3.1.2△用key管理可復(fù)用的元素3.1.3△根據(jù)條件展示元素v-show3.1.4△列表渲染v-for指令3.1.5△綁定屬性v-bind指令3.1.6△事件處理v-on指令3.1.7事件修飾符3.1.8按鍵修飾符3.1.9Av-model表單輸入綁定表單元素值綁定3.1.11v-model與修飾符3.1.12v-text與v-html指令3.1.13△v-cloak、v-once>v-pre指令3.2△★掌握Vue.js自定義指令3.2.1△自定義指令注冊3.2.2對象字面量3.2.3★動態(tài)指令參數(shù)2.4自定義指令實際應(yīng)用第4章Vue.js基礎(chǔ)案例實戰(zhàn)掌握簡易圖書管理.1.1簡易圖書管理項目需求.1.2簡易圖書管理項目實現(xiàn)掌握我的待辦事項MyToDos2.1我的待辦事項項目需求2.2我的待辦事項項目實現(xiàn)第5章Vue.js組件開發(fā)5.1掌握組件基礎(chǔ)1.1組件命名1.2組件注冊★掌握組件間通信2.1★父組件向子組件傳值2.2★子組件向父組件傳值2.3★兄弟組件之間通信2.4★父鏈與子組件索引掌握單文件組件★掌握插槽5.4.1★匿名插槽5.4.2★具名插槽5.4.3★作用域插槽5.4.4★動態(tài)插槽名第6章Vue.js過渡與動畫△掌握單元素/組件的過渡1.1△過渡的類名ZXCSS過渡1.3ZSCSS動畫自定義過渡的類名同時使用過渡和動畫顯性的過渡持續(xù)時間1.7JavaScript鉤子2掌握初始渲染的過渡△掌握多個元素的過渡△掌握多個組件的過渡5掌握列表過渡5.1★列表的進(jìn)入/離開過渡5.2★列表的排序過渡5.3列表的交錯過渡第7章Vue項目開發(fā)環(huán)境與輔助工具部署7.1理解部署node,js1.1Node,js簡介1.2Node,js部署1.3ZXNode.js模塊系統(tǒng)1.4Node,js創(chuàng)建第一個應(yīng)用2掌握Node包管理器npm2.1npm簡介2.2△npm常用命令7.3△掌握Node,js環(huán)境配置7.4掌握webpack打包工具4.1webpack簡介4.2△webpack使用與基本配置4.3△★webpack配置加載器loaders4.4★webpack配置插件4.5△webpack配置開發(fā)服務(wù)器5掌握VUECLI7.5.1VueCLI安裝7.5.2AVueCLI創(chuàng)建Vue項目7.5.3AVueCLI可視化創(chuàng)建Vue項目第8章前端路由VueRouter8.1△掌握VueRouter概述1.1VueRouter安裝與使用1.2VueRouter基礎(chǔ)應(yīng)用2△掌握VueRouter高級應(yīng)用2.1△★動態(tài)路由匹配2.2△嵌套路由2.3△編程式導(dǎo)航2.4△命名路由2.5△命名視圖2.6△重定向和別名2.7★路由組件傳參2.8AHTML5History模式第9章狀態(tài)管理模式Vuex1掌握Vuex概述9.1.1Vuex定義簡單狀態(tài)管理-store模式9.2△掌握Vuex基本使用9.3△掌握Vuex核心概念9.3.1一個完整的store結(jié)構(gòu)3.2最簡單的store3.3Vuex中state3.4Vuex中g(shù)etter3.5△★Vuex中mutation3.6△★Vuex中action3.7△★Vuex中module4理解并掌握Vuex多模塊實戰(zhàn)案例第10章VueUI組件庫10.1理解并掌握VuePC端組件庫1.1△ElementUI1.2iViewUI1.3其它PC端UI組件庫2理解并掌握Vue移動端UI組件庫2.1MintUI2.2AVantUI第11章Vue高級項目實戰(zhàn)理解并掌握友聯(lián)通訊錄項目需求1.2實現(xiàn)技術(shù)1.3環(huán)境配置1.4★項目實現(xiàn)11.2★理解并掌握通用登錄/注冊管理系統(tǒng)1項目需求實現(xiàn)技術(shù)環(huán)境配置★項目實現(xiàn)第12章Vue3.0基礎(chǔ)應(yīng)用12.1了解Vue3.0新特性12.1.1新特性簡介下一階段工作12.1.3Vue3.0學(xué)習(xí)參考2學(xué)會Vue3.0初步體驗2.1Vue3.0下載與引用2.2Vue3.0創(chuàng)建簡易應(yīng)用2.3Vue3.0發(fā)布文檔的使用3△★掌握Vue3.0新特性應(yīng)用3.1使用腳手架創(chuàng)建項目3.2△組件選項setup()3.4△watch、watchEffect和computed3.5△ref引用DOM元素和組件實例3.6AVueRouter和Vuex3.7△Vue3.0生命周期3.8△提供provide。和注入inject()3.9★組合式API3.10★模板refs12.4理解并掌握VUE3.0購物車實戰(zhàn)12.4.1項目設(shè)計要求12.4.2△★項目實現(xiàn)四、時間分配（以64學(xué)時為例）序號教學(xué)內(nèi)容教學(xué)環(huán)節(jié)（學(xué)時）講課實訓(xùn)小計課時教學(xué)形式內(nèi)容課時教學(xué)形式1第1章Vue.js概述第2章Vue.js基礎(chǔ)6講授+實操演示實訓(xùn)1-實訓(xùn)22視頻+上機(jī)演示82第3章Vue.js指令8講授+實操演示實訓(xùn)32視頻+上機(jī)演示103第4章Vue.js基礎(chǔ)案例實戰(zhàn)2講授+實操演示實訓(xùn)40視頻+自學(xué)24第5章Vue.js組件開發(fā)6講授+實操演示實訓(xùn)52視頻+上機(jī)演示85第6章Vue.js過渡與動畫4講授+實操演示實訓(xùn)62視頻+上機(jī)演示66第7章Vue項目開發(fā)環(huán)境與輔助工具部署4講授+實操演示實訓(xùn)72視頻+上機(jī)演示67第8章前端路由VueRouter4講授+實操演示實訓(xùn)82視頻+上機(jī)演示68第9章狀態(tài)管理模式Vuex4講授+實操演示實訓(xùn)92視頻+上機(jī)演示69第10章VueUI組件庫2講授+實操演示實訓(xùn)1100視頻+上機(jī)演示210第11章Vue高級項目實戰(zhàn)4講授+實操演示實訓(xùn)110自學(xué)411第12章Vue3.0基礎(chǔ)應(yīng)用4講授+實操演示實訓(xùn)122視