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

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

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