單元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　項目開發(fā)準(zhǔn)備　3 1.3.1　了解相關(guān)工具　3 1.3.2　安裝開發(fā)和調(diào)試工具　4 應(yīng)用實踐　10 項目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　計算屬性　34 2.7　數(shù)據(jù)監(jiān)聽器　35 應(yīng)用實踐　37 項目2-1　簡易計算器　37 任務(wù)2-1-1　構(gòu)建頁面布局　37 任務(wù)2-1-2　創(chuàng)建根組件和Vue應(yīng)用實例　38 項目2-2　歷史名城典故頁面　39 任務(wù)2-2-1　構(gòu)建頁面布局　39 任務(wù)2-2-2　創(chuàng)建根組件和Vue應(yīng)用實例　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的驗證　52 3.5　組件事件　55 3.5.1　組件事件的監(jiān)聽與處理　55 3.5.2　組件事件的驗證　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)用實踐　67 項目3　自定義頁面圖標(biāo)樣式　67 任務(wù)3-1　構(gòu)建頁面布局　68 任務(wù)3-2　實現(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　實例創(chuàng)建　74 4.1.3　頁面掛載　75 4.1.4　數(shù)據(jù)更新　76 4.1.5　組件實例銷毀　77 4.2　Teleport　79 4.2.1　基本用法　79 4.2.2　結(jié)合組件使用　82 應(yīng)用實踐　83 項目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　實現(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)用實踐　101 項目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)用實踐　126 項目6　查詢歷史名城相關(guān)詩詞　126 任務(wù)6-1　采用選項式API實現(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)用實踐　147 項目7　查詢旅游城市天氣　147 任務(wù)7-1　構(gòu)建頁面布局　148 任務(wù)7-2　實現(xiàn)天氣預(yù)報查詢　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)用實踐　171 項目8　用戶登錄及注冊　171 任務(wù)8-1　構(gòu)建頁面頭部布局　172 任務(wù)8-2　實現(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)用實踐　194 項目9　記錄用戶瀏覽歷史　194 任務(wù)9-1　構(gòu)建頁面布局　195 任務(wù)9-2　實現(xiàn)瀏覽歷史的記錄和獲取功能　198 同步訓(xùn)練　201 單元小結(jié)　201 單元練習(xí)　202 單元10 構(gòu)建工程化的Vue項目　203 單元導(dǎo)學(xué)　203 學(xué)習(xí)目標(biāo)　203 知識學(xué)習(xí)　204 10.1　Vue CLI工具　204 10.2　快速構(gòu)建項目　205 10.3　項目組成要素　207 10.3.1　項目結(jié)構(gòu)　207 10.3.2　項目入口文件　207 10.3.3　單文件組件　208 10.4　項目配置文件　212 10.4.1　package.json　212 10.4.2　vue.config.js　213 10.5　新一代構(gòu)建工具Vite　214 10.5.1　Vite工具特點　215 10.5.2　體驗Vite工具　215 10.6　Element Plus組件庫　216 應(yīng)用實踐　218 項目10　todoMVC　218 任務(wù)10-1　構(gòu)建項目主頁布局　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 工程化項目實戰(zhàn)：圖片素材庫網(wǎng)站　226 單元導(dǎo)學(xué)　226 學(xué)習(xí)目標(biāo)　226 11.1　項目設(shè)計　227 11.1.1　項目功能模塊　227 11.1.2　項目實現(xiàn)思路　227 11.1.3　項目工程化規(guī)范　232 11.2　前端子項目——構(gòu)建項目　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　項目入口　238 11.3　前端子項目——公共組件　239 11.4　前端子項目——網(wǎng)站首頁　240 11.4.1　整體布局　240 11.4.2　輪播圖　243 11.5　前端子項目——用戶登錄　245 11.6　前端子項目——圖片展示與操作　247 11.7　前端子項目——圖片分享　251 11.8　后端子項目——構(gòu)建項目　255 11.8.1　認(rèn)識Express框架　255 11.8.2　搭建后端子項目　257 11.9　后端子項目——用戶登錄合法性驗證　258 單元小結(jié)　262 單元練習(xí)　263 附錄 ES6相關(guān)語法　264