Vue.js 前端開發技術

豆連軍

樂美教育總監，明星老師，北京大學本科畢業，中科院碩士。
任多所高校的創業導師，講授HTML5、前端開發等多門課程。

第1章Vue入門1
1．1 Vue簡述1
1．1．1什麼是Vue．js 1
1．1．2為什麼使用Vue．js 2
1．1．3 Vue．js的主要特點2
1．1．4 Vue．js的優勢3
1．2 Vue．js的下載及使用3
1．2．1 Vue．js下載4
1．2．2 Vue．js引用4
1．2．3 npm安裝4
1．2．4解讀Vue項目文件目錄結構8
1．3實例化Vue對象、數據和方法9
1．3．1實例化Vue對象9
1．3．2 Vue數據和方法10
1．3．3將數據掛載到DOM頁面11
1．4 MVVM模式13
本章小結14
習題15

第2章Vue數據綁定16
2．1 Vue模板語法16
2．1．1模板語法16
2．1．2插值17
2．1．3表達式17
2．2響應式聲明渲染機制18
2．2．1響應式聲明渲染機制簡介18
2．2．2 Vue屬性綁定21
2． 2．3 Vue雙向數據綁定22
2．3 Vue計算屬性24
2．3．1計算屬性24
2．3．2計算屬性與methods的區別27
2．4 Vue生命週期28
2．4．1 Vue實例生命週期圖解28
2．4．2 Vue生命週期詳解29
2．4．3 Vue各生命週期適合開發的業務邏輯31
本章小結31
習題32

第3章Vue指令33
3．1 Vue指令概述33
3．1．1指令33
3．1．2指令修飾符34
3．2 Vue指令詳解34
3．2．1指令v-if 34
3．2．2指令v-for 36
3．2．3指令v-on 41
3．2．4指令v-show 43
3．3 Vue動態樣式綁定46
3．3．1 v-bind指令屬性46
3．3．2 v -bind綁定class 47
3．3．3 v-bind數組表達式綁定class屬性48
3．3．4 v-bind對象語法綁定行內樣式49
3．3．5 v-bind數組語法綁定行內樣式50
3．4 Vue表單輸入綁定51
3．4．1指令v-model 51
3．4．2 v-bind在控件上綁定value 56
3．4．3表單中的參數特性63
3．5綜合案例64
本章小結67
習題67

第4章Vue事件處理68
4．1 Vue事件處理器68
4．1．1監聽事件68
4．1．2方法事件處理器69
4．1．3內聯事件處理器70
4．2修飾符72
4．2．1事件修飾符72
4．2．2按鍵修飾符73
4．2．3修飾鍵77
4．3綜合案例77
本章小結79
習題79

第5章Vue組件80
5．1組件的基本使用80
5．1．1什麼是組件80
5．1．2組件使用82
5．1．3組件中的data必須是函數88
5．2 Vue組件嵌套90
5．2．1組件嵌套90
5．2．2使用props 92
5 ．2．3使用slot插槽內容分發101
5．2．4組件實戰107
5．3組件通信111
5．3．1父組件向子組件通信111
5．3．2子組件向父組件通信112
5 ．3．3任意組件及平行組件通信116
5．4創建自己的組件118
本章小結123
習題123

第6章自定義指令128
6．1自定義指令概述128
6．1．1自定義全局指令128
6．1．2自定義局部指令130
6．1．3案例分析131
6．2鉤子函數132
6．2．1鉤子函數參數133
6．2．2函數簡寫136
6．3對象字面量136
本章小結137
習題137

第7章過渡與動畫138
7．1 transition組件138
7．2單元素/組件的過渡141
7．2．1 transition標籤結合CSS樣式實現動畫141
7．2．2 animate．css結合transition實現動畫143
7．2．3鉤子函數實現動畫144
7．3多個元素的過渡147
7．4多個組件的過渡149
7．5綜合案例151
本章小結156
習題156

第8章渲染函數157
8．1渲染函數概述157
8．1．1從虛擬DOM了解Vue渲染函數157
8．1．2為什麼使用渲染函數158
8．1．3什麼是渲染函數159
8．2 createElement方法161
8．2 ．1 createElement參數161
8．2．2 VNodes必須唯一166
8．3使用JavaScript代替模板功能167
8．3．1 v-if和v-for 167
8．3．2 v-model 168
8．3．3 slot插槽170
8．3．4作用域插槽171
本章小結172
習題172

第9章Vue路由vue-router 173
9．1路由安裝和使用173
9．2傳遞參數及獲取參數175
9．2．1使用路由傳遞參數175
9．2．2地址欄傳遞參數177
9．3子路由178
9． 3．1創建子路由178
9．3．2路由切換組件180
9．4命名視圖和導航鉤子183
9．4．1命名視圖183
9．4．2導航鉤子185
9．5元數據及路由匹配188
本章小結191
習題192

第10章使用webpack 193
10．1 webpack基礎193
10．2 webpack的基本配置196
10．3 webpack常用的Loaders 198
10．4插件201
10．5 webpack常用命令204
本章小結204
習題204

第11章綜合案例開發205
11．1綜合案例開發步驟205
11．1．1通過vue-cli構建工具初始化項目目錄205
11．1．2初始化依賴包206
11．1．3安裝vue-router組件206
11．1．4創建router對象及配置路由207
11．1 ．5在App．vue中添加路由導航208
11．2解析Vue生成文件目錄結構210
11．2．1 build文件夾210
11．2．2 config文件夾210
11．2．3 node_modules文件夾211
11．2．4 src文件夾211
11．2．5 App．vue與main．js 211
11．3 vue-resource插件212
11．4實戰：單詞本216
11．4．1展示單詞本216
11．4．2修改刪除單詞217
11．4．3添加單詞221
本章小結223
習題223

第12章Vue工程項目實戰224
12．1項目分析224
12．2工程化項目搭建224
12．2．1項目準備工作225
12．2．2項目資源準備226
12．2．3圖標字體製作230
12． 2．4項目目錄設計232
12．2．5模擬後台數據（mock數據） 233
12．3組件化開發235
12．4使用vue-resource調用後台接口247
12．4．1理解後台接口文檔247
12．4．2根據文檔調用接口248
12．4．3具體業務邏輯開發249
12．5項目打包251
本章小結252
習題252