第1篇  基礎知識篇
第1章  Vue.js基本簡介 002
◎ 本章教學微視頻
1.1  前端框架的發展歷程 002
1.1.1  前端靜態頁面走向動態頁面的轉變 002
1.1.2  程序後端走向前端的轉變 003
1.2  Vue.js介紹 003
1.2.1  Vue.js是什麼 004
1.2.2  Vue.js發展歷程 004
1.3  Vue.js中的開發模式 004
1.3.1  MVC模式介紹 004
1.3.2  MVP模式介紹 005
1.3.3  MVVM模式介紹 006
1.4  Vue.js與其他框架比較 007
1.4.1  Vue.js與Angular的比較 007
1.4.2  Vue.js與React的比較 011
1.5  Vue.js的兼容性 012
1.6  就業面試技巧與解析 015
1.6.1  面試技巧與解析（一） 015
1.6.2  面試技巧與解析（二） 015
第2章  創建Vue.js簡單實例 017
◎ 本章教學微視頻
2.1  安裝Vue Devtools 017
2.2  下載、安裝編輯器HBuilder X及引入Vue.js文件 019
2.2.1  安裝編輯器HBuilder X 019
2.2.2  下載Vue.js文件 020
2.2.3  在項目中引入Vue.js文件 020
2.3  創建一個 Vue 實例 021
2.4  實例的生命周期 023
2.5  就業面試技巧與解析 029
2.5.1  面試技巧與解析（一） 029
2.5.2  面試技巧與解析（二） 029
第3章  Vue.js指令 030
◎ 本章教學微視頻
3.1  內置指令 030
3.1.1  指令 030
3.1.2  條件指令 039
3.2  自定義指令 042
3.2.1  指令的注冊 042
3.2.2  鉤子函數 043
3.2.3  鉤子函數參數 044
3.2.4  函數簡寫 044
3.2.5  對像字面量 045
3.3  指令的高級選項 046
3.3.1  deep 046
3.3.2  params 046
3.3.3  twoWay 047
3.3.4  priority 047
3.3.5  terminal 047
3.3.6  acceptStatement 048
3.4  就業面試技巧與解析 049
3.4.1  面試技巧與解析（一） 049
3.4.2  面試技巧與解析（二） 049
第4章  Vue.js基本特性 050
◎ 本章教學微視頻
4.1  實例及選項 050
4.1.1  數據 050
4.1.2  方法 052
4.1.3  模板 054
4.1.4  watch函數 056
4.2  模板渲染 057
4.2.1  條件渲染 058
4.2.2  列表渲染 060
4.2.3  前後端渲染對比 063
4.3  extend的用法 064
4.4  就業面試技巧與解析 066
4.4.1  面試技巧與解析（一） 066
4.4.2  面試技巧與解析（二） 067
第5章  Vue數據及事件綁定 068
◎ 本章教學微視頻
5.1  數據綁定 068
5.1.1  數據綁定的方法 068
5.1.2  計算屬性 072
5.1.3  計算屬性緩存 073
5.1.4  表單控件綁定 074
5.1.5  值綁定 078
5.2  事件綁定與監聽 079
5.2.1  方法及內聯處理器 079
5.2.2  修飾符 081
5.2.3  與傳統事件綁定的區別 083
5.3  class與style的綁定 084
5.3.1  綁定中class的方式 084
5.3.2  綁定內聯樣式 088
5.4  就業面試技巧與解析 090
5.4.1  面試技巧與解析（一） 090
5.4.2  面試技巧與解析（二） 090
第6章  Vue.js過濾器 091
◎ 本章教學微視頻
6.1  過濾器的基本使用 091
6.1.1  全局過濾器 091
6.1.2  局部過濾器 092
6.1.3  JSON 095
6.1.4  currency 097
6.2  雙向過濾器 099
6.3  自定義過濾器 100
6.4  就業面試技巧與解析 103
6.4.1  面試技巧與解析（一） 103
6.4.2  面試技巧與解析（二） 103
第7章  Vue.js過渡 104
◎ 本章教學微視頻
7.1  CSS過渡 104
7.1.1  CSS 過渡的用法 104
7.1.2  CSS過渡鉤子函數 106
7.1.3  自定義過渡類名 108
7.2  JavaScript過渡 108
7.2.1  JavaScript鉤子函數過渡 108
7.2.2  JavaScript過渡的使用 109
7.3  素的過渡 111
7.4  多個組件的過渡 112
7.5  transition-group介紹 113
7.6  就業面試技巧與解析 113
7.6.1  面試技巧與解析（一） 114
7.6.2  面試技巧與解析（二） 114
第8章  Vue.js動畫 115
◎ 本章教學微視頻
8.1  CSS動畫 115
8.1.1  CSS動畫原理 115
8.1.2  同時使用過渡和動畫 117
8.1.3  顯性的過渡持續時間 119
8.2  第三方動畫庫 119
8.2.1  使用CCS 3動畫庫@keyframes 119
8.2.2  使用CCS 3動畫庫Animate.css 121
8.2.3  使用JavaScript動畫庫Velocity.js 122
8.3  動畫鉤子 123
8.4  動畫封裝 126
8.5  就業面試技巧與解析 128
8.5.1  面試技巧與解析（一） 128
8.5.2  面試技巧與解析（二） 128

第2篇  核心應用篇
第9章  Vue.js組件 130
◎ 本章教學微視頻
9.1  組件基本內容 130
9.1.1  組件是什麼 130
9.1.2  組件用法 131
9.1.3  組件注冊 134
9.1.4  組件嵌套 136
9.1.5  組件切換 137
9.1.6  組件中的data和methods 138
9.2  組件通信 139
9.2.1  props/$emit 140
9.2.2  $emit和$on 142
9.2.3  $attrs和$listeners 144
9.2.4  provide和inject 147
9.2.5  $parent/$children與ref 149
9.3  自定義事件監聽 150
9.4  Vuex介紹 153
9.4.1  Vuex的原理 153
9.4.2  Vuex各個模塊在流程中的功能 153
9.4.3  Vuex與localStorage 153
9.5  動態組件 154
9.5.1  基本用法 154
9.5.2  切換鉤子函數 156
9.5.3  keep-alive 158
9.6  slot 159
9.7  就業面試技巧與解析 160
9.7.1  面試技巧與解析（一） 160
9.7.2  面試技巧與解析（二） 161
第10章  Vue.js常用插件 162
◎ 本章教學微視頻
10.1  前端路由與Vue-router路由 162
10.1.1  什麼是前端路由 163
10.1.2  Vue-router路由的高級用法 163
10.2  狀態管理與Vuex 164
10.2.1  狀態管理與使用場景 164
10.2.2  安裝並使用Vuex 164
10.2.3  設置與讀取數據 165
10.2.4  更新數據 165
10.3  Vue-resource插件 167
10.3.1  引用方式 167
10.3.2  使用方式 167
10.3.3  攔截器的使用 167
10.3.4  封裝service層 168
10.3.5  Vue-resource優點 169
10.4  Vue-router 插件 169
10.4.1  引用方式 169
10.4.2  基本用法 172
10.4.3  Vue-router跳轉頁面的方式 174
10.4.4  router鉤子函數 175
10.5  就業面試技巧與解析 177
10.5.1  面試技巧與解析（一） 177
10.5.2  面試技巧與解析（二） 178
第11章  Vue.js實例方法 179
◎ 本章教學微視頻
11.1  虛擬DOM簡介 179
11.1.1  虛擬DOM是什麼 179
11.1.2  為什麼要使用虛擬DOM 180
11.2  實例屬性 182
11.2.1  組件樹的訪問 182
11.2.2  虛擬DOM的訪問 182
11.2.3  數據訪問 183
11.3  實例方法 183
11.3.1  實例DOM方法的使用 183
11.3.2  實例event方法的使用 183
11.3.3  vm.$watch()的使用 185
11.3.4  vm.$nextTick()的使用 185
11.4  就業面試技巧與解析 186
11.4.1  面試技巧與解析（一） 186
11.4.2  面試技巧與解析（二） 187
第12章  Render函數 188
◎ 本章教學微視頻
12.1  Render簡介 188
12.1.1  Render函數是什麼 188
12.1.2  Render函數怎麼用 189
12.1.3  在什麼情況下使用Render函數 190
12.1.4  深入data對像 190
12.2  createElement簡介 191
12.2.1  基本參數 191
12.2.2  使用JavaScript代替模板功能 193
12.2.3  約束 194
12.3  函數化組件 195
12.4  JSX 195
12.5  就業面試技巧與解析 196
12.5.1  面試技巧與解析（一） 196
12.5.2  面試技巧與解析（二） 196
第13章  常見問題解析 197
◎ 本章教學微視頻
13.1  環境及安裝問題解析 197
13.2  運行代碼出現報錯解析 197
13.3  你問我答解析 199
13.4  就業面試技巧與解析 201
13.4.1  面試技巧與解析（一） 201
13.4.2  面試技巧與解析（二） 202

第3篇  核心技術篇
第14章  狀態管理Vuex 204
◎ 本章教學微視頻
14.1  概述 204
14.1.1  Vuex介紹 204
14.1.2  狀態管理與Vuex 205
14.1.3  Vuex適用場景 206
14.1.4  Vuex的用法 206
14.2  Vuex的五大屬性 207
14.2.1  state 207
14.2.2  getters 207
14.2.3  mutations 208
14.2.4  actions 208
14.2.5  modules 209
14.3  中間件 210
14.3.1  state快照 210
14.3.2  logger 210
14.4  嚴格模式 211
14.5  表單處理 212
14.6  就業面試技巧與解析 212
14.6.1  面試技巧與解析（一） 213
14.6.2  面試技巧與解析（二） 213
第15章  Vue工程實例 214
◎ 本章教學微視頻
15.1  準備工作 214
15.1.1  webpack 214
15.1.2  vue-loader 216
15.2  項目目錄結構 218
15.3  部署上線 219
15.3.1  生成上線文件 219
15.3.2  nginx 220
15.3.3  jenkins 220
15.3.4  gitlab 221
15.4  就業面試技巧與解析 222
15.4.1  面試技巧與解析（一） 222
15.4.2  面試技巧與解析（二） 222

第4篇  項目實踐篇
第16章  訂餐管理繫統 224
◎ 本章教學微視頻
16.1  開發背景 224
16.2  繫統功能設計 224
16.3  繫統開發 225
16.3.1  繫統開發環境要求 225
16.3.2  軟件框架 225
16.3.3  框架整合配置 226
16.4  繫統功能模塊設計與實現 229
16.4.1  首頁模塊 229
16.4.2  商家介紹模塊 232
16.4.3  繫統商品模塊 233
16.4.4  商品分類模塊 236
16.4.5  商家評論模塊 237
16.4.6  加入購物車模塊 239
16.4.7  商家星級模塊 241
16.5  本章總結 242
第17章  網上圖書銷售繫統 243
◎ 本章教學微視頻
17.1  開發背景 243
17.2  繫統功能設計 244
17.3  繫統開發 244
17.3.1  繫統開發環境要求 244
17.3.2  框架整合配置 244
17.3.3  程序運行 245
17.4  繫統功能模塊設計與實現 246
17.4.1  首頁模塊 246
17.4.2  首頁信息介紹模塊 249
17.4.3  用戶登錄模塊 251
17.4.4  圖書模塊 252
17.4.5  購買模塊 258
17.4.6  支付模塊 259
17.5  本章總結 261
第18章  仿網易雲音樂繫統 262
◎ 本章教學微視頻
18.1  開發背景 262
18.2  產品定位 263
18.2.1  需求分析 263
18.2.2  用戶分析 263
18.3  行業分析 264
18.4  用戶需求 264
18.5  項目整體結構 265
18.6  繫統功能模塊設計與實現 265
18.6.1  頭部頁面 266
18.6.2  導航欄頁面 266
18.6.3  推薦頁面 267
18.6.4  搜索功能 272
18.6.5  歌單頁面 277
18.6.6  歌手頁面 279
18.6.7  播放器 281
18.7  本章總結 292 

Vue.js學習線路
《Vue.js從入門到項目實踐：超值版》以Vue.js的學習模式來安排內容結構，第1～3篇可使讀者掌握Vue的基礎知識、Vue的核心應用、Vue的核心技術等知識，第4篇可使讀者擁有多個行業項目開發經驗。
《Vue.js從入門到項目實踐：超值版》內容
全書分為4篇，共18章。
第1篇（第1～8章）為基礎知識，本篇主要講解Vue.js的基本知識、簡單Vue實例的創建等內容，為後面更加深入地學習做鋪墊、為使用Vue.js前端框架開發項目奠定基礎。通過本篇內容的學習，讀者可以了解Vue.js基本簡介、Vue簡單實例創建、指令、基本特性、數據及事件綁定、過濾器、Vue的動畫和過渡等內容。
第2篇（第9～13章）為核心應用，本篇將介紹Vue核心應用技術的使用，包括如何使用Vue組件、常用插件、實例方法、Render函數，以及在學習過程中可能出現的一些問題，包括安裝錯誤、運行錯誤和你問我答等內容。通過本篇的學習，讀者將對Vue有深刻的理解，進行深入的學習後，編程能力會有進一步的提高。
第3篇（第14～15章）為核心技術，本篇介紹Vue中常見的狀態管理Vuex，並且結合前面內容介紹Vue工程實例等知識內容，還將結合案例示範學習Vue中webpack開發中的打包、介紹Vue中的目錄結構等知識內容，為編寫和研發項目奠定基礎。
第4篇（第16～18章）為項目實踐，本篇融會貫通前面所學的編程知識、技能及開發技巧來開發實踐項目。項目包括訂餐管理繫統、網上圖書銷售繫統及仿網易雲音樂繫統等。通過本篇的學習，讀者將對前端Vue框架在實際項目開發中的應用有一個深切的體會，為日後進行軟件項目管理及實戰開發積累經驗。
全書不僅融入了筆者豐富的工作經驗和多年的使用心得，還提供了大量來自工作現場的實例，具有較強的實用性和可操作性。讀者繫統學習後可以掌握Vue前端框架的基礎知識，擁有全面編寫框架的編程能力、優良的團隊協同技能和豐富的項目實戰經驗。編寫《Vue.js從入門到項目實踐：超值版》的目標就是讓框架初學者快速成長為合格的中級程序員，通過演練積累項目開發經驗和團隊合作技能，在未來的職場中獲取一個較高的起點，並能迅速融入軟件開發團隊中。
《Vue.js從入門到項目實踐：超值版》特色
1. 結構科學，自學更易
《Vue.js從入門到項目實踐：超值版》在內容組織和範例設計中充分考慮到中級學者的特點，由淺入深，循序漸進，無論讀者是否接觸過框架，都能從《Vue.js從入門到項目實踐：超值版》中找到的起點。
2. 視頻講解，細致透徹
為降低學習難度，提高學習效率，《Vue.js從入門到項目實踐：超值版》錄制了同步微視頻（模擬培訓班模式）。通過視頻講解，除了能輕松學會專業知識外，還能獲取老師的軟件開發經驗，使學習變得輕松有效。
3. 超多、實用、專業的範例和實踐項目
《Vue.js從入門到項目實踐：超值版》結合實際工作中的應用範例逐一講解Vue前端框架的各種知識和技術，在項目實踐篇中更以3個項目實踐來總結前15章介紹的知識和技能，使讀者在實踐中掌握知識、輕松擁有項目開發經驗。
4. 隨時檢測自己的學習成果
每章首頁中均提供了“本章概述”和“本章要點”，以指導讀者重點學習及學後檢查；章後的“就業面試技巧與解析”均根據當前求職面試（筆試）題精選而成，讀者可以隨時檢測自己的學習成果，做到融會貫通。
5. 專業創作團隊和技術支持
《Vue.js從入門到項目實踐：超值版》由聚慕課教育研發中心編著並提供在線服務。讀者在學習過程中遇到任何問題，可加入圖書讀者服務（技術支持）QQ群（529669132）進行提問，筆者和資深程序員將為讀者在線答疑。
《Vue.js從入門到項目實踐：超值版》附贈超值王牌資源庫
《Vue.js從入門到項目實踐：超值版》附贈了極為豐富超值的王牌資源庫，具體內容如下。
（1）王牌資源1：隨贈《Vue.js從入門到項目實踐：超值版》“配套學習與教學”資源庫，提升讀者的學習效率。
全書同步180節教學微視頻錄像（支持掃描二維碼觀看），總時長12學時；
全書3個大型項目案例以及全部範例源代碼；
《Vue.js從入門到項目實踐：超值版》配套上機實訓指導手冊，《Vue.js從入門到項目實踐：超值版》學習、授課與教學PPT課件。
（2）王牌資源2：隨贈“職業成長”資源庫，突破讀者職業規劃與發展弊端與瓶頸。
求職資源庫：100套求職簡歷模板庫、600套畢業答辯與80套學術開題報告PPT模板庫；
面試資源庫：程序員面試技巧、200道求職常見面試（筆試）真題與解析；
職業資源庫：100套崗位競聘模板、程序員職業規劃手冊、開發經驗及技巧集、軟件工程師技能手冊。
（3）王牌資源3：隨贈“Vue.js開發魔典”資源庫，拓展讀者學習《Vue.js從入門到項目實踐：超值版》的深度和廣度。
案例資源庫：80個實例及源碼注釋；
程序員測試資源庫：計算機應用測試題庫、編程基礎測試題庫、編程邏輯思維測試題庫、編程英語水平測試題庫；
軟件開發文檔模板庫：10套八大行業軟件開發文檔模板庫等；
電子書資源庫：Vue.js速查手冊、Vue.js API速查手冊、Vue.js庫速查手冊，包列表速查手冊、Vue.js常見錯誤及解決方案、Vue.js開發經驗及技巧大彙總等。
（4）王牌資源4：編程代碼優化糾錯器。
本糾錯器能讓軟件開發更加便捷和輕松，無須安裝配置復雜的軟件運行環境即可輕松運行程序代碼。
本糾錯器能一鍵格式化，讓凌亂的程序代碼更加規整美觀。
本糾錯器能對代碼精準糾錯，讓程序查錯不在難。
上述資源獲取及使用
注意：由於《Vue.js從入門到項目實踐：超值版》不配送光盤，書中所用及上述資源均需借助網絡下載纔能使用。
1. 資源獲取
采用以下任意途徑，均可獲取《Vue.js從入門到項目實踐：超值版》所附贈的超值王牌資源庫。
（1）加入《Vue.js從入門到項目實踐：超值版》微信公眾號“聚慕課jumooc”，下載資源或者咨詢關於《Vue.js從入門到項目實踐：超值版》的任何問題。
（2）加入《Vue.js從入門到項目實踐：超值版》圖書讀者服務（技術支持）QQ群（529669132），讀者可以打開群“文件”中對應的Word文件，獲取網絡下載地址和密碼。
2. 使用資源
讀者可通過電腦/平板App端、微信端學習和使用《Vue.js從入門到項目實踐：超值版》微視頻及資源。
《Vue.js從入門到項目實踐：超值版》適合哪些讀者閱讀
《Vue.js從入門到項目實踐：超值版》非常適合以下人員閱讀。
沒有任何前端Vue框架基礎的初學者。
有一定的前端Vue框架開發基礎，想精通編程的人員。
有一定的前端Vue框架開發基礎，缺乏項目實踐經驗的人員。
正在進行軟件專業相關畢業設計的學生。
大、中專院校及培訓學校的老師和學生。
創作團隊
《Vue.js從入門到項目實踐：超值版》由聚慕課教育研發中心組織編寫，李良任主編，劉凱燕、李存永任副主編，參與《Vue.js從入門到項目實踐：超值版》編寫的人員還有陳夢、裴垚等。
在編寫過程中，我們盡己所能將好的講解呈現給讀者，但也難免有疏漏和不妥之處，敬請讀者不吝指正。

編著者