單元1 Vue.js　3入門基礎　1 單元導學　1 學習目標　1 知識學習　1 1.1　前端開發(fā)模式的演變歷程　1 1.2　認識Vue.js　2 1.3　項目開發(fā)準備　3 1.3.1　了解相關工具　3 1.3.2　安裝開發(fā)和調(diào)試工具　4 應用實踐　10 項目1　歷史名城簡介頁面　10 任務1-1　構建Vue應用程序　10 任務1-2　運行并調(diào)試Vue應用程序　12 同步訓練　12 單元小結　13 單元練習　13 單元2 基礎語法　14 單元導學　14 學習目標　14 知識學習　15 2.1　剖析Vue應用程序　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 應用實踐　37 項目2-1　簡易計算器　37 任務2-1-1　構建頁面布局　37 任務2-1-2　創(chuàng)建根組件和Vue應用實例　38 項目2-2　歷史名城典故頁面　39 任務2-2-1　構建頁面布局　39 任務2-2-2　創(chuàng)建根組件和Vue應用實例　40 同步訓練　40 單元小結　41 單元練習　42 單元3 組件基礎　43 單元導學　43 學習目標　43 3.1　認識組件　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　默認插槽　61 3.6.2　具名插槽　63 3.6.3　作用域插槽　64 3.7　動態(tài)組件　66 應用實踐　67 項目3　自定義頁面圖標樣式　67 任務3-1　構建頁面布局　68 任務3-2　實現(xiàn)自定義圖標樣式　69 同步訓練　70 單元小結　70 單元練習　71 單元4 組件進階　72 單元導學　72 學習目標　72 知識學習　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　結合組件使用　82 應用實踐　83 項目4　彈出式登錄框　83 任務4-1　構建頁面布局　84 任務4-2　創(chuàng)建登錄框組件　85 同步訓練　86 單元小結　87 單元練習　87 單元5 過渡和動畫　88 單元導學　88 學習目標　88 知識學習　89 5.1　認識過渡和動畫　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 應用實踐　101 項目5　會員中心頁面　101 任務5-1　構建頁面布局　102 任務5-2　創(chuàng)建局部組件　103 同步訓練　105 單元小結　105 單元練習　105 單元6 組合式API　107 單元導學　107 學習目標　107 知識學習　107 6.1　組合式API　107 6.1.1　認識組合式API　108 6.1.2　setup函數(shù)　111 6.1.3　訪問生命周期鉤子函數(shù)　113 6.2　響應性API　114 6.2.1　響應性原理　114 6.2.2　響應性API的應用　117 6.3　provide/inject響應式傳值　123 應用實踐　126 項目6　查詢歷史名城相關詩詞　126 任務6-1　采用選項式API實現(xiàn)　126 任務6-2　利用組合式API重構　130 同步訓練　131 單元小結　131 單元練習　132 單元7 與后端交互——axios　134 單元導學　134 學習目標　134 知識學習　134 7.1　認識axios　134 7.1.1　異步編程　135 7.1.2　axios安裝與配置　140 7.2　axios處理HTTP請求　142 7.3　axios攔截器　145 應用實踐　147 項目7　查詢旅游城市天氣　147 任務7-1　構建頁面布局　148 任務7-2　實現(xiàn)天氣預報查詢　149 同步訓練　152 單元小結　152 單元練習　153 單元8 路由管理——Vue　Router　154 單元導學　154 學習目標　154 知識學習　155 8.1　認識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　導航　164 8.4.1　聲明式導航　164 8.4.2　編程式導航　166 8.5　導航守衛(wèi)　168 8.5.1　全局導航守衛(wèi)　168 8.5.2　路由導航守衛(wèi)　170 應用實踐　171 項目8　用戶登錄及注冊　171 任務8-1　構建頁面頭部布局　172 任務8-2　實現(xiàn)登錄和注冊功能　173 同步訓練　176 單元小結　176 單元練習　177 單元9 狀態(tài)管理——Vuex　179 單元導學　179 學習目標　179 知識學習　179 9.1　認識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 應用實踐　194 項目9　記錄用戶瀏覽歷史　194 任務9-1　構建頁面布局　195 任務9-2　實現(xiàn)瀏覽歷史的記錄和獲取功能　198 同步訓練　201 單元小結　201 單元練習　202 單元10 構建工程化的Vue項目　203 單元導學　203 學習目標　203 知識學習　204 10.1　Vue CLI工具　204 10.2　快速構建項目　205 10.3　項目組成要素　207 10.3.1　項目結構　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　新一代構建工具Vite　214 10.5.1　Vite工具特點　215 10.5.2　體驗Vite工具　215 10.6　Element Plus組件庫　216 應用實踐　218 項目10　todoMVC　218 任務10-1　構建項目主頁布局　219 任務10-2　構建組件TodoHeader　220 任務10-3　構建組件TodoList　221 任務10-4　構建組件TodoFooter　223 同步訓練　224 單元小結　225 單元練習　225 單元11 工程化項目實戰(zhàn)：圖片素材庫網(wǎng)站　226 單元導學　226 學習目標　226 11.1　項目設計　227 11.1.1　項目功能模塊　227 11.1.2　項目實現(xiàn)思路　227 11.1.3　項目工程化規(guī)范　232 11.2　前端子項目——構建項目　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　后端子項目——構建項目　255 11.8.1　認識Express框架　255 11.8.2　搭建后端子項目　257 11.9　后端子項目——用戶登錄合法性驗證　258 單元小結　262 單元練習　263 附錄 ES6相關語法　264