單元1 Vue.js　3入門基礎(chǔ)　1 單元導(dǎo)學(xué)　1 學(xué)習(xí)目標(biāo)　1 知識學(xué)習(xí)　1 1.1　前端開發(fā)模式的演變歷程　1 1.2　認(rèn)識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　歷史名城簡介頁面　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 知識學(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　簡易計(jì)算器　37 任務(wù)2-1-1　構(gòu)建頁面布局　37 任務(wù)2-1-2　創(chuàng)建根組件和Vue應(yīng)用實(shí)例　38 項(xiàng)目2-2　歷史名城典故頁面　39 任務(wù)2-2-1　構(gòu)建頁面布局　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)識組件　44 3.2　組件定義　45 3.3　組件注冊　47 3.3.1　全局注冊　47 3.3.2　局部注冊　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　動態(tài)組件　66 應(yīng)用實(shí)踐　67 項(xiàng)目3　自定義頁面圖標(biāo)樣式　67 任務(wù)3-1　構(gòu)建頁面布局　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 知識學(xué)習(xí)　72 4.1　組件生命周期　72 4.1.1　生命周期鉤子函數(shù)　73 4.1.2　實(shí)例創(chuàng)建　74 4.1.3　頁面掛載　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)建頁面布局　84 任務(wù)4-2　創(chuàng)建登錄框組件　85 同步訓(xùn)練　86 單元小結(jié)　87 單元練習(xí)　87 單元5 過渡和動畫　88 單元導(dǎo)學(xué)　88 學(xué)習(xí)目標(biāo)　88 知識學(xué)習(xí)　89 5.1　認(rèn)識過渡和動畫　89 5.2　實(shí)現(xiàn)過渡和動畫　90 5.2.1　Transition組件　90 5.2.2　過渡　92 5.2.3　動畫　93 5.2.4　基于鉤子函數(shù)的過渡和動畫　93 5.3　多個元素和組件過渡　97 5.4　列表過渡　100 應(yīng)用實(shí)踐　101 項(xiàng)目5　會員中心頁面　101 任務(wù)5-1　構(gòu)建頁面布局　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 知識學(xué)習(xí)　107 6.1　組合式API　107 6.1.1　認(rèn)識組合式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)詩詞　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 知識學(xué)習(xí)　134 7.1　認(rèn)識axios　134 7.1.1　異步編程　135 7.1.2　axios安裝與配置　140 7.2　axios處理HTTP請求　142 7.3　axios攔截器　145 應(yīng)用實(shí)踐　147 項(xiàng)目7　查詢旅游城市天氣　147 任務(wù)7-1　構(gòu)建頁面布局　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 知識學(xué)習(xí)　155 8.1　認(rèn)識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　動態(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　用戶登錄及注冊　171 任務(wù)8-1　構(gòu)建頁面頭部布局　172 任務(wù)8-2　實(shí)現(xiàn)登錄和注冊功能　173 同步訓(xùn)練　176 單元小結(jié)　176 單元練習(xí)　177 單元9 狀態(tài)管理——Vuex　179 單元導(dǎo)學(xué)　179 學(xué)習(xí)目標(biāo)　179 知識學(xué)習(xí)　179 9.1　認(rèn)識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)建頁面布局　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 知識學(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組件庫　216 應(yīng)用實(shí)踐　218 項(xiàng)目10　todoMVC　218 任務(wù)10-1　構(gòu)建項(xiàng)目主頁布局　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)：圖片素材庫網(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)站首頁　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)識Express框架　255 11.8.2　搭建后端子項(xiàng)目　257 11.9　后端子項(xiàng)目——用戶登錄合法性驗(yàn)證　258 單元小結(jié)　262 單元練習(xí)　263 附錄 ES6相關(guān)語法　264