單元1 Vue.js　3入門基礎(chǔ)　1 單元導(dǎo)學(xué)　1 學(xué)習(xí)目標(biāo)　1 知識(shí)學(xué)習(xí)　1 1.1　前端開發(fā)模式的演變歷程　1 1.2　認(rèn)識(shí)Vue.js　2 1.3　項(xiàng)目開發(fā)準(zhǔn)備　3 1.3.1　了解相關(guān)工具　3 1.3.2　安裝開發(fā)和調(diào)試工具　4 應(yīng)用實(shí)踐　10 項(xiàng)目1　歷史名城簡(jiǎn)介頁(yè)面　10 任務(wù)1-1　構(gòu)建Vue應(yīng)用程序　10 任務(wù)1-2　運(yùn)行并調(diào)試Vue應(yīng)用程序　12 同步訓(xùn)練　12 單元小結(jié)　13 單元練習(xí)　13 單元2 基礎(chǔ)語法　14 單元導(dǎo)學(xué)　14 學(xué)習(xí)目標(biāo)　14 知識(shí)學(xué)習(xí)　15 2.1　剖析Vue應(yīng)用程序　15 2.2　單向綁定　17 2.3　雙向綁定　22 2.4　流程控制　25 2.4.1　條件渲染　25 2.4.2　列表渲染　27 2.5　事件處理　29 2.5.1　事件監(jiān)聽　29 2.5.2　事件修飾符　31 2.6　計(jì)算屬性　34 2.7　數(shù)據(jù)監(jiān)聽器　35 應(yīng)用實(shí)踐　37 項(xiàng)目2-1　簡(jiǎn)易計(jì)算器　37 任務(wù)2-1-1　構(gòu)建頁(yè)面布局　37 任務(wù)2-1-2　創(chuàng)建根組件和Vue應(yīng)用實(shí)例　38 項(xiàng)目2-2　歷史名城典故頁(yè)面　39 任務(wù)2-2-1　構(gòu)建頁(yè)面布局　39 任務(wù)2-2-2　創(chuàng)建根組件和Vue應(yīng)用實(shí)例　40 同步訓(xùn)練　40 單元小結(jié)　41 單元練習(xí)　42 單元3 組件基礎(chǔ)　43 單元導(dǎo)學(xué)　43 學(xué)習(xí)目標(biāo)　43 3.1　認(rèn)識(shí)組件　44 3.2　組件定義　45 3.3　組件注冊(cè)　47 3.3.1　全局注冊(cè)　47 3.3.2　局部注冊(cè)　48 3.4　組件間數(shù)據(jù)傳遞　49 3.4.1　props的使用　49 3.4.2　props的驗(yàn)證　52 3.5　組件事件　55 3.5.1　組件事件的監(jiān)聽與處理　55 3.5.2　組件事件的驗(yàn)證　57 3.5.3　v-model與自定義事件　59 3.6　組件插槽　61 3.6.1　默認(rèn)插槽　61 3.6.2　具名插槽　63 3.6.3　作用域插槽　64 3.7　動(dòng)態(tài)組件　66 應(yīng)用實(shí)踐　67 項(xiàng)目3　自定義頁(yè)面圖標(biāo)樣式　67 任務(wù)3-1　構(gòu)建頁(yè)面布局　68 任務(wù)3-2　實(shí)現(xiàn)自定義圖標(biāo)樣式　69 同步訓(xùn)練　70 單元小結(jié)　70 單元練習(xí)　71 單元4 組件進(jìn)階　72 單元導(dǎo)學(xué)　72 學(xué)習(xí)目標(biāo)　72 知識(shí)學(xué)習(xí)　72 4.1　組件生命周期　72 4.1.1　生命周期鉤子函數(shù)　73 4.1.2　實(shí)例創(chuàng)建　74 4.1.3　頁(yè)面掛載　75 4.1.4　數(shù)據(jù)更新　76 4.1.5　組件實(shí)例銷毀　77 4.2　Teleport　79 4.2.1　基本用法　79 4.2.2　結(jié)合組件使用　82 應(yīng)用實(shí)踐　83 項(xiàng)目4　彈出式登錄框　83 任務(wù)4-1　構(gòu)建頁(yè)面布局　84 任務(wù)4-2　創(chuàng)建登錄框組件　85 同步訓(xùn)練　86 單元小結(jié)　87 單元練習(xí)　87 單元5 過渡和動(dòng)畫　88 單元導(dǎo)學(xué)　88 學(xué)習(xí)目標(biāo)　88 知識(shí)學(xué)習(xí)　89 5.1　認(rèn)識(shí)過渡和動(dòng)畫　89 5.2　實(shí)現(xiàn)過渡和動(dòng)畫　90 5.2.1　Transition組件　90 5.2.2　過渡　92 5.2.3　動(dòng)畫　93 5.2.4　基于鉤子函數(shù)的過渡和動(dòng)畫　93 5.3　多個(gè)元素和組件過渡　97 5.4　列表過渡　100 應(yīng)用實(shí)踐　101 項(xiàng)目5　會(huì)員中心頁(yè)面　101 任務(wù)5-1　構(gòu)建頁(yè)面布局　102 任務(wù)5-2　創(chuàng)建局部組件　103 同步訓(xùn)練　105 單元小結(jié)　105 單元練習(xí)　105 單元6 組合式API　107 單元導(dǎo)學(xué)　107 學(xué)習(xí)目標(biāo)　107 知識(shí)學(xué)習(xí)　107 6.1　組合式API　107 6.1.1　認(rèn)識(shí)組合式API　108 6.1.2　setup函數(shù)　111 6.1.3　訪問生命周期鉤子函數(shù)　113 6.2　響應(yīng)性API　114 6.2.1　響應(yīng)性原理　114 6.2.2　響應(yīng)性API的應(yīng)用　117 6.3　provide/inject響應(yīng)式傳值　123 應(yīng)用實(shí)踐　126 項(xiàng)目6　查詢歷史名城相關(guān)詩(shī)詞　126 任務(wù)6-1　采用選項(xiàng)式API實(shí)現(xiàn)　126 任務(wù)6-2　利用組合式API重構(gòu)　130 同步訓(xùn)練　131 單元小結(jié)　131 單元練習(xí)　132 單元7 與后端交互——axios　134 單元導(dǎo)學(xué)　134 學(xué)習(xí)目標(biāo)　134 知識(shí)學(xué)習(xí)　134 7.1　認(rèn)識(shí)axios　134 7.1.1　異步編程　135 7.1.2　axios安裝與配置　140 7.2　axios處理HTTP請(qǐng)求　142 7.3　axios攔截器　145 應(yīng)用實(shí)踐　147 項(xiàng)目7　查詢旅游城市天氣　147 任務(wù)7-1　構(gòu)建頁(yè)面布局　148 任務(wù)7-2　實(shí)現(xiàn)天氣預(yù)報(bào)查詢　149 同步訓(xùn)練　152 單元小結(jié)　152 單元練習(xí)　153 單元8 路由管理——Vue　Router　154 單元導(dǎo)學(xué)　154 學(xué)習(xí)目標(biāo)　154 知識(shí)學(xué)習(xí)　155 8.1　認(rèn)識(shí)Vue Router　155 8.1.1　前端路由　155 8.1.2　Vue Router安裝與使用　156 8.2　路由屬性　157 8.2.1　嵌套路由　157 8.2.2　命名路由　159 8.2.3　命名視圖　160 8.3　動(dòng)態(tài)路由　161 8.3.1　路由傳參　161 8.3.2　路由函數(shù)　162 8.4　導(dǎo)航　164 8.4.1　聲明式導(dǎo)航　164 8.4.2　編程式導(dǎo)航　166 8.5　導(dǎo)航守衛(wèi)　168 8.5.1　全局導(dǎo)航守衛(wèi)　168 8.5.2　路由導(dǎo)航守衛(wèi)　170 應(yīng)用實(shí)踐　171 項(xiàng)目8　用戶登錄及注冊(cè)　171 任務(wù)8-1　構(gòu)建頁(yè)面頭部布局　172 任務(wù)8-2　實(shí)現(xiàn)登錄和注冊(cè)功能　173 同步訓(xùn)練　176 單元小結(jié)　176 單元練習(xí)　177 單元9 狀態(tài)管理——Vuex　179 單元導(dǎo)學(xué)　179 學(xué)習(xí)目標(biāo)　179 知識(shí)學(xué)習(xí)　179 9.1　認(rèn)識(shí)Vuex　179 9.1.1　狀態(tài)管理模式　180 9.1.2　Vuex安裝與使用　182 9.2　Vuex核心屬性　184 9.2.1　state　184 9.2.2　getters　185 9.2.3　mutations　187 9.2.4　actions　189 9.2.5　modules　192 應(yīng)用實(shí)踐　194 項(xiàng)目9　記錄用戶瀏覽歷史　194 任務(wù)9-1　構(gòu)建頁(yè)面布局　195 任務(wù)9-2　實(shí)現(xiàn)瀏覽歷史的記錄和獲取功能　198 同步訓(xùn)練　201 單元小結(jié)　201 單元練習(xí)　202 單元10 構(gòu)建工程化的Vue項(xiàng)目　203 單元導(dǎo)學(xué)　203 學(xué)習(xí)目標(biāo)　203 知識(shí)學(xué)習(xí)　204 10.1　Vue CLI工具　204 10.2　快速構(gòu)建項(xiàng)目　205 10.3　項(xiàng)目組成要素　207 10.3.1　項(xiàng)目結(jié)構(gòu)　207 10.3.2　項(xiàng)目入口文件　207 10.3.3　單文件組件　208 10.4　項(xiàng)目配置文件　212 10.4.1　package.json　212 10.4.2　vue.config.js　213 10.5　新一代構(gòu)建工具Vite　214 10.5.1　Vite工具特點(diǎn)　215 10.5.2　體驗(yàn)Vite工具　215 10.6　Element Plus組件庫(kù)　216 應(yīng)用實(shí)踐　218 項(xiàng)目10　todoMVC　218 任務(wù)10-1　構(gòu)建項(xiàng)目主頁(yè)布局　219 任務(wù)10-2　構(gòu)建組件TodoHeader　220 任務(wù)10-3　構(gòu)建組件TodoList　221 任務(wù)10-4　構(gòu)建組件TodoFooter　223 同步訓(xùn)練　224 單元小結(jié)　225 單元練習(xí)　225 單元11 工程化項(xiàng)目實(shí)戰(zhàn)：圖片素材庫(kù)網(wǎng)站　226 單元導(dǎo)學(xué)　226 學(xué)習(xí)目標(biāo)　226 11.1　項(xiàng)目設(shè)計(jì)　227 11.1.1　項(xiàng)目功能模塊　227 11.1.2　項(xiàng)目實(shí)現(xiàn)思路　227 11.1.3　項(xiàng)目工程化規(guī)范　232 11.2　前端子項(xiàng)目——構(gòu)建項(xiàng)目　233 11.2.1　創(chuàng)建Vue工程　234 11.2.2　配置路由　234 11.2.3　配置Vuex　235 11.2.4　配置axios　237 11.2.5　項(xiàng)目入口　238 11.3　前端子項(xiàng)目——公共組件　239 11.4　前端子項(xiàng)目——網(wǎng)站首頁(yè)　240 11.4.1　整體布局　240 11.4.2　輪播圖　243 11.5　前端子項(xiàng)目——用戶登錄　245 11.6　前端子項(xiàng)目——圖片展示與操作　247 11.7　前端子項(xiàng)目——圖片分享　251 11.8　后端子項(xiàng)目——構(gòu)建項(xiàng)目　255 11.8.1　認(rèn)識(shí)Express框架　255 11.8.2　搭建后端子項(xiàng)目　257 11.9　后端子項(xiàng)目——用戶登錄合法性驗(yàn)證　258 單元小結(jié)　262 單元練習(xí)　263 附錄 ES6相關(guān)語法　264