Vue.js是一個用來開發Web界面的前端庫。本書致力于普及國內Vue.js技術體系,讓更多喜歡前端的人員了解和學習Vue.js。如果你對Vue.js基礎知識感興趣,如果你對源碼解析感興趣,如果你對Vue.js 2.0感興趣,如果你對主流打包工具感興趣,如果你對如何實踐感興趣,本書都是一本不容錯過的以示例代碼為引導、知識涵蓋的選擇。全書一共30章,由淺入深地講解了Vue.js基本語法及源碼解析。主要內容包括數據綁定、指令、表單控件綁定、過濾器、組件、表單驗證、服務通信、路由和視圖、vue-cli、測試開發和調試、源碼解析及主流打包構建工具等。該書內容,講解細致,示例豐富,適用于各層次的開發者。
√ 前端大腕集體贊譽站臺,隨著阿里Weex開源,2016可謂Vue.js年!
√ 作為移動端方案,Vue在React Native和Ionic之外另辟蹊徑!
√ 滴滴前端團隊潛心研究和實踐Vue.js,得到框架作者尤雨溪盛贊!
√ 本書兼容和覆蓋新版本Vue.js 2.0特性,同樣適用于進階人群!
滴滴出行公共前端團隊,主要負責公司級組件庫和基礎服務建設和前端解決方案。我們喜歡新技術,熱衷沉淀和積累。
張耀春:公共前端團隊負責人,人稱“小春”,09 年接觸前端,喜歡潛水、賽車和專研新技術。
黃軼:前端技術專家,擅長前端自動化、工程化及前端架構,喜歡開源,樂于分享。
王靜:負責mis 項目開發管理,愛生活、愛冒險、愛挑戰,對代碼有一丟丟的小潔癖。
蘇偉:負責MIS系統開發,熟悉Angular、Vue等開發框架,擅長使用工具來提高開發效率。
王瑾:負責webapp方向的開發,喜歡自己的代碼最終呈現在用戶面前的感覺。
殷獻勇:北郵土著,CS 碩士在讀。享受編程,熱愛前端。期待成為 JavaScript 技術棧工程師。
目 錄
第1章遇見Vue.js 1
1.1 MVX模式是什么 1
1.1.1 MVC 1
1.1.2 MVP 2
1.1.3 MVVM 3
1.2Vue.js是什么 4
1.2.1 Vue.js與其他框架的區別 4
1.2.2 如何使用Vue.js 10
1.2.3 Vue.js的發展歷史 11
第2章數據綁定 12
2.1 語法 12
2.1.1 插值 12
2.1.2 表達式 13
2.1.3 指令 13
2.2 分隔符 14
第3章指令 15
3.1 內部指令 15
3.1.1 v-if 15
3.1.2 v-show 16
3.1.3 v-else 17
3.1.4 v-model 18
3.1.5 v-repeat 20
3.1.6 v-for 29
3.1.7 v-text 37
3.1.8 v-html 37
3.1.9 v-bind 38
3.1.10 v-on 39
3.1.11 v-ref 40
3.1.12 v-el 40
3.1.13 v-pre 41
3.1.14 v-cloak 41
3.2 自定義指令 41
3.2.1 基礎 42
3.2.2 高級選項 46
3.3 內部指令解析 51
3.4 常見問題解析 53
第4章計算屬性 56
4.1 什么是計算屬性 56
4.2計算屬性緩存 57
4.3常見問題 59
4.3.1 計算屬性getter不執行的場景 59
4.3.2 在v-repeat中使用計算屬性 60
第5章表單控件綁定 62
5.1基本用法 62
5.1.1 text 62
5.1.2 checkbox 62
5.1.3 radio 63
5.1.4 select 63
5.2 值綁定 65
5.3 v-model修飾指令 66
5.3.1 lazy 66
5.3.2 debounce 67
5.3.3 number 67
5.4 修飾指令原理 67
5.4.1 lazy源碼解析 67
5.4.2 debounce源碼解析 68
5.4.3 number源碼解析 69
第6章過濾器 70
6.1 內置過濾器 71
6.1.1 字母操作 71
6.1.2 json過濾器 72
6.1.3 限制 72
6.1.4 currency過濾器 75
6.1.5 debounce過濾器 76
6.2 自定義過濾器 76
6.2.1 fillter語法 76
6.2.2 教你寫一個filter 78
6.3 源碼解析 79
6.3.1 管道實現 79
6.3.2 過濾器解析 80
6.4 常見問題解析 80
第7章Class與Style綁定 82
7.1 綁定HTML Class 82
7.1.1 對象語法 82
7.1.2 數組語法 84
7.2 綁定內聯樣式 84
7.2.1 對象語法 84
7.2.2 數組語法 85
7.2.3 自動添加前綴 86
第8章過渡 88
8.1 CSS過渡 89
8.1.1 內置Class類名 90
8.1.2 自定義CSS類名 91
8.1.3 顯式聲明CSS過渡類型 91
8.1.4 動畫案例 91
8.1.5 過渡流程 92
8.2 JavaScript過渡 94
8.3 漸進過渡 95
第9章Method 97
9.1 如何綁定事件 97
9.1.1 內聯方式 97
9.1.2 methods配置 98
9.1.3 $events應用 99
9.2 如何使用修飾符 99
9.2.1 prevent 100
9.2.2 stop 100
9.2.3 capture 100
9.2.4 self 100
9.2.5 按鍵 101
9.3 Vue.js 0.12到1.0中的變化 101
9.3.1 v-on變更 101
9.3.2 @click縮寫 102
第10章Vue實例方法 103
10.1 實例屬性 103
10.1.1 組件樹訪問 103
10.1.2 DOM訪問 104
10.1.3 數據訪問 104
10.2 實例方法 104
10.2.1 實例DOM方法的使用 104
10.2.2 實例Event方法的使用 106
第11章組件 108
11.1 基礎 109
11.1.1 注冊 109
11.1.2 數據傳遞 111
11.1.3 混合 124
11.1.4 動態組件 127
11.2 相關拓展 130
11.2.1 組件和v-for 130
11.2.2 編寫可復用組件 131
11.2.3 異步組件 131
11.2.4 資源命名約定 132
11.2.5 內聯模板 133
11.2.6 片段實例 134
11.3 生命周期 135
11.4 開發組件 137
11.4.1 基礎組件 137
11.4.2 基于第三方組件開發 142
11.5 常見問題解析 147
第12章表單校驗 154
12.1 安裝 154
12.2 基本使用 155
12.3 驗證結果結構 156
12.4 驗證器語法 158
12.4.1 校驗字段名field 158
12.4.2 校驗規則定義 160
12.5 內置驗證規則 163
12.5.1 required 163
12.5.2 pattern 165
12.5.3 minlength 165
12.5.4 maxlength 166
12.5.5 min 167
12.5.6 max 167
12.6 與v-model同時使用 168
12.7 重置校驗結果 169
12.8 表單元素 169
12.9 各校驗狀態對應的class 172
12.9.1 自定義校驗狀態class 173
12.9.2 在其他元素上使用校驗狀態class 173
12.10 分組校驗 174
12.11 錯誤信息 174
12.11.1 錯誤信息輸出組件 177
12.11.2 動態設置錯誤信息 180
12.12 事件 182
12.12.1 單個字段校驗事件 182
12.12.2 整個表單校驗事件 183
12.13 延遲初始化 185
12.14 自定義驗證器 186
12.14.1 注冊自定義驗證器 187
12.14.2 錯誤信息 188
12.15 自定義驗證時機 189
12.16 異步驗證 192
12.16.1 注冊異步驗證器 192
12.16.2 驗證器函數context 194
第13章與服務端通信 196
13.1 vue-resource安裝及配置 197
13.1.1 安裝 197
13.1.2 參數配置 198
13.1.3 headers配置 199
13.1.4 基本HTTP調用 200
13.1.5 請求選項對象 202
13.1.6 response對象 205
13.1.7 RESTful調用 205
13.1.8 攔截器 207
13.1.9 跨域AJAX 208
13.1.10 Promise 210
13.1.11 url模板 211
13.2 vue-async-data 212
13.2.1 安裝 212
13.2.2 使用 212
13.3 常見問題解析 213
13.3.1 如何發送JSONP請求 213
13.3.2 如何修改發送給服務端的數據類型 215
13.3.3 跨域請求出錯 215
13.3.4 $.http.post方法變為OPTIONS方法 216
第14章路由與視圖 217
14.1 如何安裝 217
14.2 基本使用 218
14.3 視圖部分 219
14.3.1 v-link 219
14.3.2 router-view 222
14.4 路由實例 222
14.5 組件路由配置 227
14.5.1 路由切換的各個階段 227
14.5.2 各階段的鉤子函數介紹 230
14.6 路由匹配 236
14.6.1 動態片段 236
14.6.2 全匹配片段 237
14.6.3 具名路徑 237
14.6.4 路由對象 238
14.7 transition對象 239
14.8 嵌套路由 239
14.9 動態加載路由組件 241
14.10 實戰 242
14.10.1 瀏覽器直接引用 242
14.10.2 Webpack模塊化開發 244
14.11 常見問題解析 250
第15章vue-cli 254
15.1 安裝 254
15.2 基本使用 254
15.3 命令 257
15.3.1 init 257
15.3.2 list 257
15.4 模板 258
15.4.1 官方模板 258
15.4.2 自定義模板 258
15.4.3 本地模板 259
15.5 不錯的工具包 259
15.5.1 commander 259
15.5.2 download-git-repo 259
15.5.3 inquirer 259
15.5.4 ora 260
第16章測試開發與調試 261
16.1 測試工具 261
16.1.1 ESLint 261
16.1.2 工具包 263
16.2 開發工具 264
16.2.1 Vue Syntax Highlight 264
16.2.2 Snippets 264
16.2.3 其他編輯器/IDE 265
16.3 調試工具 269
第17章Scrat Vue.js的化學反應 271
17.1 淺談前端工程化 271
17.2 前端工程化怎么做 271
17.3 Scrat簡介 273
17.4 Scrat Vue.js實現組件 275
17.5 案例分析 276
17.5.1 準備工作 277
17.5.2 代碼實現 279
17.5.3 編譯和 284
17.6 總結 287
第18章Vue.js 2.0 288
18.1 API變更 288
18.1.1 全局配置 288
18.1.2 全局API 289
18.1.3 VM選項 290
18.1.4 實例屬性 294
18.1.5 實例方法 294
18.1.6 指令 296
18.1.7 特殊元素 297
18.1.8 服務端渲染 297
18.2 Virtual DOM 297
18.2.1 認識Virtual DOM 297
18.2.2 Virtual DOM在Vue.js 2.0中的實現 299
18.3 服務端渲染技術 315
18.3.1 普通服務端渲染 315
18.3.2 流式服務端渲染 320
18.4 總結 326
第19章 源碼篇——util 327
19.1 env 327
19.1.1 系統判斷 328
19.1.2 屬性支持 328
19.1.3 過渡屬性 329
19.1.4 nextTick 330
19.1.5 set 332
19.2 dom 332
19.2.1 dom操作 333
19.2.2 屬性操作 339
19.2.3 class操作 341
19.2.4 事件操作 343
19.2.5 其他 344
19.3 lang 347
19.3.1 對象操作 347
19.3.2 名稱轉換 351
19.3.3 數組操作 352
19.3.4 類型轉換 352
19.3.5 方法綁定 354
19.3.6 其他 354
19.4 components 357
19.5 options 359
19.6 debug 364
第20章 源碼篇——深入響應式原理 365
20.1 如何追蹤變化 365
20.1.1 Observer 367
20.1.2 Directive 372
20.1.3 Watcher 382
20.2 變化檢測問題 391
20.3 初始化數據 394
20.4 異步更新隊列 395
20.5 計算屬性的奧秘 398
20.6 總結 402
第21章 源碼篇——父子類合并策略 403
21.1 策略是什么 403
21.1.1 生命周期合并策略 403
21.1.2 屬性方法計算 405
21.1.3 數據合并策略 406
第22章 源碼篇——緩存 409
22.1 Cache有什么用 409
22.2 LRU 410
22.3 Cache類 410
22.4 put 410
22.5 shift 411
22.6 get 412
第23章 源碼篇——屬性props 413
23.1 流程設計 413
23.2 屬性name 415
23.3 coerce 416
23.4 type 驗證 416
23.5 default 417
23.6 validator 418
第24章 源碼篇——events 419
24.1 events配置是什么 419
24.2 如何配置 419
24.2.1 $emit觸發 422
24.2.2 $once 綁定 424
24.2.3 $off刪除 425
24.2.4 $dispatch派發 426
24.2.5 $broadcast廣播 427
第25章 Webpack 428
25.1 安裝 428
25.2 基本使用 429
25.3 命令行 430
25.4 配置文件 430
25.4.1 context 431
25.4.2 entry 431
25.4.3 outpu
Vue.js是一個很令人著迷的前端框架,它既簡潔又強大,各方面設計得恰到好處,值得深入學習理解。Vue.js 2.0也提供了Virtual DOM支持,使得它具有跨端渲染能力和更多想象力,未來大有可為。
—— 滴滴出行平臺產品中心技術總監杜歡
近幾年,前端視圖層框架領域百花齊放,Vue.js以其精致的API 、強大的組件化機制、小巧的體積贏得了不少開發者的芳心。在移動端 Web 應用領域,Vue.js已經差不多成為方案。Vue 2.0吸收了其他框架的很多優點,為開發者提供了更多便利。
—— Teambition前端架構師徐飛
Vue.js易于上手、搭建模式簡便、模塊化編程結構完善等特點,成了眾多新一代前端框架中的佼佼者。本書包含了從基礎語法、組件化編程到復雜工具使用及2.0版本更新等的內容,值得推薦,也希望越來越多的人開始了解使用 Vue.js。
—— 掘金gold.xitu.io技術社區創始人陰明
在前端框架和庫百家爭鳴的時代,Vue.js是其中一支新秀,用獨特思路來解決前端業務急需解決的問題。本書是一本豐富且的Vue.js書籍。強烈推薦給每一位想要或正在學習 Vue.js 的開發人員。
—— 《圖解CSS 3》 作者&W3cplus站長大漠
近年來,前端技術的發展日新月異,各種框架、工具層出不窮,呈現出百花齊放的狀態。雖然在一些基本的設計思想方面各種框架不斷趨同,但是每一種框架依然保持了自己的特色,希望大家通過這本書能品味出純正的Vue味兒。
—— Google Angular中國區專職推廣大漠窮秋
Vue.js是一個輕量高效的MVVM框架,提供了響應式編程、組件化等強大的能力,配合豐富多彩的生態圈和工具鏈,可以讓你完成非常復雜的前端應用。本書是滴滴公共前端團隊多年實踐經驗的結晶,不僅介紹了Vue在大規模前端項目的應用,還提供了周邊工具鏈如webpack、rollup等相關實踐經驗,干貨滿滿,不僅適合初學者學習,還為企業的工程化實踐提供了豐富的參考
—— 國際站前端工程師姜天意
挺好的,一直都在當當購書,下次還會選擇當當
很貴的書籍,技術類書籍網上看比較好,但是喜歡看紙質書,所以買來屯著,還不錯,比較系統
性價比比較高
很不錯,包裝也好。印刷清晰。很喜歡。
收到的時候袋子壞掉了,下次小心點哦
性價比比較高,初學者慢慢看
封頁拐角有一消除破損
紙質差,封面就翻了兩三次就看起來快折斷了,里面的紙質也不好,第一次在當當買書,真是最后一次了
不錯,就是總是缺貨,還限購78362
快遞送到后拆開。書一個角撞爛了一大塊
挺厚的一本,慢慢嚼吧!
對于學vue2的朋友來說這本書沒啥用
物流非常爛
好好好好好
很好,書中容易理解,非常感謝作者這么用心,不錯3不錯!
不錯不錯不錯不錯
不錯 正品 值得買
印刷不錯,很清晰。
感覺像二手的
東西不錯,
很好的一本書
當當最近送貨慢,今天的書更是有嚴重折頁的地方,好像是已經有人看過了的,并且是不愛惜書的人??!
好!好!好!
這是什么質量,還賣九十幾,只求一句公道話
很好收獲很快
買了四本書只簡單包裝 拿到快遞外面包裝都是破的 書還有損壞
感覺一般,現在都2.0了,里面全是1.0的東西,還沒有vuex
指令部分有的指令例子講得看不懂,不知道后面的如何!書籍很厚,希望有收獲!
已收到,快遞速度蠻快,第二天就到手了,包裝還好,下面有點弄臟了,不影響閱讀。
有折痕,書邦的位置有開裂,書的內容很好,很喜歡vue.js