本書以一個多年前端“老司機”的視角，循序漸進地介紹當前流行的前端框架Vue.js 3的新特性、各項功能及其在商業開發中的應用。全書共15章，第1~6章介紹Vue.js 3的模板、組件、交互處理等基礎知識；第7章介紹Vue.js 3框架的響應式原理及組合式API；第8章介紹使用Vue.js 3框架開發前端動畫效果；第9章介紹開發大型項目必備的腳手架工具VueCli和Vite；第10章介紹基於Vue.js 3的UI框架Element Plus；第11~13章分別介紹網絡請求框架vue-axios、路由管理框架Vue Router、狀態管理框架Vuex；第14章和第15章介紹兩個相對完整的項目的開發，即學習網站和電商後臺系統。本書試圖介紹Vue.js 3全家桶及周邊框架和工具的綜合應用，旨在使讀者通過閱讀本書開發自己的應用程序。本書還在各章安排了小型範例和練習題，並提供了教學視頻、源代碼及PPT課件。
本書既可以入門，也可以進階，適合Vue.js 3初學者和前端開發人員使用，也可以作為網課、培訓機構與大中專院校的教學用書。
張益琿，從業7年，多年移動與前端開發經驗，曾就職於國內知名電商網站，從事移動端應用程序的業務開發與性能優化工作，目前在國內知名社交產品公司從事IM系統的架構設計工作。對移動跨平臺開發、前端開發、React Native和Flutter跨平臺開發及JavaScript前端開發都擁有豐富的經驗。已出版多部編程著作。開源中國特邀技術專家，發表相關技術博客400余篇，訪問量100萬余次。
Vue.js 3可以讓你的前端項目開發效率成倍提升，無論你是否接觸過Vue，本書都會讓你體驗到使用Vue.js 3框架高效開發商業項目的魅力。
本書以一個多年前端“老司機”的視角，循序漸進地講解了Vue框架的新特性及其各項功能的用法，原理與實踐並重，代碼注解詳盡，並列舉了大量開發範例，以提升讀者的動手能力。
為使讀者能夠開發商業項目，本書除了介紹Vue.js框架本身外，還講解了Vue.js在開發商業項目中需要用到的相關框架和工具，如狀態管理框架Vuex、路由框架Vue-Route、UI框架Element Plus、網絡請求框架Vue-Axios、構建工具Vue CLI及其Vite等，活用這些框架可以讓你輕鬆地開發出自己的商業應用。
作者還為本書錄制了配套的視頻教程，對於初學者來說，通過觀看教學視頻，可以大幅降低學習難度，提升學習效率，可以說是物超所值。
本書各章還專門設計了動手練習題，以幫助讀者鞏固知識，還提供了完整的源代碼和PPT學習課件，掃碼即可下載使用。
前 言
當下互聯網已經成為人們生活中必不可少的一部分，無論是在互聯網上查詢信息、玩遊戲，還是通過互聯網購物、付款，都離不開成千上萬的互聯網應用程序的支持。不知你有沒有想過，這些互聯網應用是如何開發出來的呢？開發一個外觀精美、功能強大的網站需要多長時間？我們是否具備這樣的能力來將自己的想法、創意開發成產品？如果你曾有過類似的思考，那麼本書可以幫你快速掌握這一技能。
閱讀任何一本圖書的過程本身就是一個學習的過程，擴展自己的知識邊界、提高自己的技能水平可能並非一件容易的事，但卻是一件有趣的事。如果你能夠自主開發功能完備的商業項目，能夠通過自己開發的應用程序為更多的人帶來生活上的幫助，這一定是一件非常令人快樂的事情。因此，若要品嘗幸福的果實，一定要經歷開花結果過程中的辛勞，本書會盡量幫助你將這一過程縮短。
突出應用開發的內容安排
在章節安排上，本書共分15章。從前端基礎講起，深入淺出地介紹了Vue.js框架的功能用法及實現原理。並且，幾乎每一章的最後都安排了實踐與練習，力求能使讀者邊學邊練，快速且扎實地掌握Vue.js框架的方方面面，並且可以真正使用它開發出商業級別的應用程序。
第1章是本書的入門章節，簡單介紹了前端開發必備的基礎知識，包括HTML、CSS和JavaScript這3種前端開發必備的技能。這些雖然不是本書的重點，但卻是學習Vue前必須掌握的基礎技能，如果讀者在閱讀本章時對書中所介紹的技術不甚了解，建議還是先不要閱讀後續章節，畢竟沒有基礎，應用將無從談起。
第2章介紹Vue模板的基本用法，包括模板插值、條件與循環渲染的相關語法。這些功能是Vue.js框架提供的基礎功能，使用它們能使我們在開發網頁應用時事半功倍。
第3章介紹了Vue組件中屬性和方法的相關概念，將使用面向物件的思路來進行前端程序開發，本章的最後會通過一個功能簡單的登錄注冊頁面來對讀者的掌握情況進行檢驗。
第4章將介紹前端應用中用戶交互的處理方法，一個網頁如果不能進行用戶交互，那麼將如一潭死水，毫無生機，用戶交互為應用程序帶來靈魂。本章除了介紹基礎的網頁用戶交互的處理外，還將結合Vue.js來講解如何在Vue.js框架中更加高效地處理用戶交互事件。
第5章和第6章將由淺入深地介紹Vue.js中組件的相關應用。組件是Vue.js框架的核心，在實際的應用開發中，更是離不開自定義組件技術。有了組件，我們才有了開發大型互聯網應用的基礎，組件使得項目的結構更加便於管理，工程的可維護與可擴展性大大提高，且組件本身的復用性也使開發者可以大量使用第三方模塊或將自己開發的模塊作為組件供各種項目使用，極大地提高了開發效率。
第7章介紹Vue.js框架的響應式原理，以及Vue.js 3.0版本引入的組合式API新特性。本章是對讀者開發能力的一種拔高，引導讀者從實現功能到精致邏輯設計的方向進步。
第8章將介紹通過Vue.js框架方便地開發前端動畫效果。動畫技術在前端開發中也非常重要，前端是直接和用戶面對面的，功能本身只是前端應用的一部分，更重要的是給用戶帶來良好的體驗，合理地使用動畫是提升用戶體驗的一大法寶。
第9章會給讀者介紹開發大型項目必備的腳手架VueCli的基本用法，管理項目、編譯打包項目都需要使用此腳手架工具；本章還介紹了Vue CLI與新一代前端構建工具Vite的優缺點以及Vite的簡單使用。
通過前9章的學習，對於Vue.js框架本身的功能與用法基本學習完畢。但是對於開發一款商業級的互聯網應用，這還遠遠不夠，第10章將介紹樣式美觀且擴展性極強的基於Vue.js的UI框架Element Plus；第11章將網絡請求框架vue-axios；第12章將介紹一款非常好用的Vue應用路由管理框架Vue Router；第13章會介紹強大的狀態管理框架Vuex，使用它開發者可以更好地管理大型Vue項目各個模塊間的交互。
第14章和第15章將通過兩個相對完整的應用項目來全面地對本書涉及的Vue.js技能進行綜合應用，幫助讀者學以致用，更加深入地理解所學習的內容。
實用豐富的配套資源
為使讀者能夠輕鬆地掌握本書內容，本書錄制了配套的視頻教程，對於初學者來說，通過觀看教學視頻，可以大幅降低學習難度，提升學習效率，可以說是物超所值。讀者掃描本書的二維碼即可觀看。
本書還提供了源代碼和PPT課件，以方便讀者上機演練和鞏固學習成果，讀者掃描以下二維碼即可下載：
如果你在下載過程中遇到問題，可發送郵件獲得幫助，郵件標題為“循序漸進Vue.js 3前端開發實戰”。
最後，對於本書的出版，要感謝支持我的家人和朋友，感謝清華大學出版社王金柱編輯的辛勤付出。在王編輯的指導下，才能完成本書的選題策劃、章節規劃、內容修正等工作。重中之重是，感謝讀者們的耐心，由衷地希望本書可以帶給你預期的收獲。無論是學習還是工作，都希望你在閱讀本書後能夠更上一層樓。同時，由於時間倉促和能力所限，書中難免存在疏漏之處，希望讀者不吝指教。
編 者
2021年10月18日 上海
第1章 從前端基礎到Vue.js 3 1
1.1 前端技術演進 2
1.2 HTML入門 3
1.2.1 準備開發工具 3
1.2.2 HTML中的基礎標簽 5
1.3 CSS入門 8
1.3.1 CSS選擇器入門 8
1.3.2 CSS樣式入門 11
1.4 JavaScript入門 14
1.4.1 為什麼需要JavaScript 14
1.4.2 JavaScript語法簡介 16
1.5 漸進式開發框架Vue 18
1.5.1 第一個Vue應用 18
1.5.2 範例：實現一個簡單的用戶登錄頁面 19
1.5.3 Vue 3的新特性 21
1.5.4 為什麼要使用Vue框架 22
1.6 小結與練習 23
第2章 Vue模板應用 24
2.1 模板基礎 25
2.1.1 模板插值 25
2.1.2 模板指令 28
2.2 條 件 渲 染 29
2.2.1 使用v-if指令進行條件渲染 30
2.2.2 使用v-show指令進行條件渲染 32
2.3 循 環 渲 染 33
2.3.1 v-for指令的使用方法 33
2.3.2 v-for指令的高級用法 36
2.4 範例：實現待辦任務列表應用 37
2.4.1 步驟一：使用HTML搭建應用框架結構 37
2.4.2 步驟二：實現待辦任務列表的邏輯開發 38
2.5 小結與練習 40
第3章 Vue組件的屬性和方法 41
3.1 屬性與方法基礎 41
3.1.1 屬性基礎 42
3.1.2 方法基礎 42
3.2 計算屬性和偵聽器 43
3.2.1 計算屬性 43
3.2.2 使用計算屬性還是函數 44
3.2.3 計算屬性的賦值 45
3.2.4 屬性偵聽器 46
3.3 進行函數限流 47
3.3.1 手動實現一個簡易的限流函數 48
3.3.2 使用Lodash庫進行函數限流 49
3.4 表單數據的雙向綁定 50
3.4.1 文本輸入框 50
3.4.2 多行文本輸入區域 51
3.4.3 復選框與單選框 51
3.4.4 選擇列表 52
3.4.5 兩個常用的修飾符 53
3.5 樣 式 綁 定 53
3.5.1 為HTML標簽綁定Class屬性 53
3.5.2 綁定內聯樣式 55
3.6 範例：實現一個功能完整的用戶注冊頁面 56
3.6.1 步驟一：搭建用戶注冊頁面 56
3.6.2 步驟二：實現注冊頁面的用戶交互 59
3.7 小結與練習 61
第4章 處理用戶交互 63
4.1 事件的監聽與處理 63
4.1.1 事件監聽示例 63
4.1.2 多事件處理 65
4.1.3 事件修飾符 65
4.2 Vue中的事件類型 68
4.2.1 常用事件類型 68
4.2.2 按鍵修飾符 70
4.3 範例1：隨鼠標移動的小球 72
4.4 範例2：彈球遊戲 74
4.5 小結與練習 77
第5章 組件基礎 78
5.1 關於Vue應用與組件 78
5.1.1 Vue應用的數據配置選項 79
5.1.2 定義組件 80
5.2 組件中的數據與事件的傳遞 81
5.2.1 為組件添加外部屬性 82
5.2.2 處理組件事件 83
5.2.3 在組件上使用v-model指令 84
5.3 自定義組件的插槽 86
5.3.1 組件插槽的基本用法 87
5.3.2 多具名插槽的用法 88
5.4 動態組件的簡單應用 90
5.5 範例：開發一款小巧的開關按鈕組件 91
5.6 小結與練習 94
第6章 組件進階 95
6.1 組件的生命周期與高級配置 95
6.1.1 生命周期方法 96
6.1.2 應用的全局配置選項 99
6.1.3 組件的注冊方式 100
6.2 組件Props屬性的高級用法 101
6.2.1 對Prop屬性進行驗證 101
6.2.2 Props的只讀性質 104
6.2.3 組件數據注入 105
6.3 組件Mixin技術 108
6.3.1 使用Mixin來定義組件 108
6.3.2 Mixin選項的合並 110
6.3.3 進行全局Mixin 111
6.4 使用自定義指令 111
6.4.1 認識自定義指令 112
6.4.2 自定義指令的參數 113
6.5 使用組件的Teleport功能開發全局彈窗 113
6.6 小結與練習 116
第7章 Vue響應式編程 117
7.1 響應式編程的原理及在Vue中的應用 117
7.1.1 手動追蹤變量的變化 118
7.1.2 Vue中的響應式物件 120
7.1.3 獨立的響應式值Ref的應用 121
7.2 響應式的計算與監聽 123
7.2.1 關於計算變量 124
7.2.2 監聽響應式變量 125
7.3 組合式API的應用 127
7.3.1 關於setup方法 127
7.3.2 在setup方法中定義生命周期行為 129
7.4 範例：實現支持搜索和篩選的用戶列表 130
7.4.1 常規風格的示例工程開發 130
7.4.2 使用組合式API重構用戶列表頁面 133
7.5 小結與練習 136
第8章 動畫 137
8.1 使用CSS3創建動畫 137
8.1.1 transition過渡動畫 138
8.1.2 keyframes動畫 139
8.2 使用JavaScript的方式實現動畫效果 141
8.3 Vue過渡動畫 142
8.3.1 定義過渡動畫 142
8.3.2 設置動畫過程中的監聽回調 146
8.3.3 多個組件的過渡動畫 147
8.3.4 列表過渡動畫 149
8.4 範例：優化用戶列表頁面 150
8.5 小結與練習 152
第9章 構建工具Vue CLI的使用 153
9.1 Vue CLI工具入門 153
9.1.1 Vue CLI的安裝 154
9.1.2 快速創建項目 155
9.2 Vue CLI項目模板工程 157
9.2.1 模板工程的目錄結構 157
9.2.2 運行Vue項目工程 161
9.3 在項目中使用依賴 162
9.4 工程構建 164
9.5 新一代前端構建工具Vite 165
9.5.1 Vite與Vue CLI的比較 165
9.5.2 體驗Vite構建工具 165
9.6 小結與練習 167
第10章 基於Vue 3的UI組件庫——Element Plus 168
10.1 Element Plus入門 168
10.1.1 Element Plus的安裝與使用 169
10.1.2 按鈕組件 171
10.1.3 標簽組件 173
10.1.4 空態圖與加載占位圖組件 176
10.1.5 圖片與頭像組件 179
10.2 表單類組件 180
10.2.1 單選框與復選框 181
10.2.2 標準輸入框組件 182
10.2.3 帶推薦列表的輸入框組件 184
10.2.4 數字輸入框 186
10.2.5 選擇列表 187
10.2.6 多級列表組件 190
10.3 開關與滑塊組件 193
10.3.1 開關組件 193
10.3.2 滑塊組件 194
10.4 選擇器組件 196
10.4.1 時間選擇器 197
10.4.2 日期選擇器 198
10.4.3 顏色選擇器 200
10.5 提示類組件 201
10.5.1 警告組件 201
10.5.2 消息提示 202
10.5.3 通知組件 204
10.6 數據承載相關組件 205
10.6.1 表格組件 205
10.6.2 導航菜單組件 208
10.6.3 標簽頁組件 210
10.6.4 抽屜組件 211
10.6.5 布局容器組件 212
10.7 實戰：實現一個教務系統學生列表頁面 214
10.8 小結與練習 217
第11章 基於Vue的網絡框架——vue-axios的應用 219
11.1 使用vue-axios請求天氣數據 219
11.1.1 使用互聯網上免費的數據服務 219
11.1.2 使用vue-axios進行數據請求 222
11.2 vue-axios實用功能介紹 224
11.2.1 通過配置的方式進行數據請求 224
11.2.2 請求的配置與響應數據結構 225
11.2.3 攔截器的使用 226
11.3 範例：實現一個天氣預報應用 227
11.3.1 搭建頁面框架 227
11.3.2 實現天氣預報應用的核心邏輯 229
11.4 小結與練習 231
第12章 Vue路由管理 232
12.1 Vue Router的安裝與簡單使用 232
12.1.1 Vue Router的安裝 233
12.1.2 一個簡單的Vue Router使用示例 233
12.2 帶參數的動態路由 235
12.2.1 路由參數匹配 235
12.2.2 路由匹配的語法規則 237
12.2.3 路由的嵌套 239
12.3 頁面導航 240
12.3.1 使用路由方法 240
12.3.2 導航歷史控制 242
12.4 關於路由的命名 242
12.4.1 使用名稱進行路由切換 243
12.4.2 路由視圖命名 243
12.4.3 使用別名 245
12.4.4 路由重定向 245
12.5 關於路由傳參 246
12.6 路由導航守衛 247
12.6.1 定義全局的導航守衛 248
12.6.2 為特定的路由注冊導航守衛 249
12.7 動態路由 250
12.8 小結與練習 252
第13章 Vue狀態管理 253
13.1 認識Vuex框架 253
13.1.1 關於狀態管理 254
13.1.2 安裝與體驗Vuex 255
13.2 Vuex中的一些核心概念 258
13.2.1 Vuex中的狀態state 258
13.2.2 Vuex中的Getter方法 260
13.2.3 Vuex中的Mutation 261
13.2.4 Vuex中的Action 262
13.2.5 Vuex中的Module 263
13.3 小結與練習 266
第14章 項目演練一：開發一個文檔學習網站 267
14.1 網站框架的搭建 267
14.2 配置專題與文章目錄 272
14.3 渲染文章筆記內容 274
14.4 小結與練習 278
第15章 項目演練二：電商後臺管理系統實戰 279
15.1 用戶登錄模塊開發 279
15.1.1 項目搭建 279
15.1.2 用戶登錄頁面的開發 282
15.2 項目主頁搭建 285
15.2.1 主頁框架搭建 285
15.2.2 完善注銷功能 288
15.3 訂單管理模塊的開發 289
15.3.1 使用Mock.js進行模擬數據的生成 289
15.3.2 編寫工具類與全局樣式 290
15.3.3 完善訂單管理頁面 291
15.4 商品管理模塊的開發 297
15.4.1 商品管理列表頁的開發 297
15.4.2 新建商品的基礎配置 302
15.4.3 新建商品的價格和庫存配置 305
15.4.4 新建商品的詳情設置 308
15.4.5 添加商品分類 310
15.5 店長管理模塊的開發 312
15.5.1 店長列表的開發 312
15.5.2 店長審批列表與店長訂單 315
15.6 財務管理與數據統計功能模塊開發 316
15.6.1 交易明細與財務對帳單 316
15.6.2 數據統計模塊的開發 317
15.7 小結與練習 322
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。
