Vue.js框架與Web前端開發(fā)從入門到精通

第1章 Vue.js概述
1.1 Vue.js簡介 2
1.2 Vue.js與其他前端框架的對比 4
1.3 深入理解雙向綁定 9
1.4 Vue.js的優(yōu)勢 12
1.5 小結(jié) 13

第2章 開始Vue.js之旅
2.1 安裝Vue.js開發(fā)環(huán)境 16
2.1.1 Node.js環(huán)境安裝 16
2.1.2 npm安裝及參數(shù)設(shè)置 23
2.1.3 用腳手架生成項目目錄 28
2.1.4 自定義Vue.js模板項目文件 31
2.1.5 使用vue-cli3圖形界面 34
2.1.6 下載、安裝、設(shè)置VSCode編輯器 44
2.2 安裝VSCode常用第三方包 46
2.3 在VSCode中開發(fā)項目 48
2.3.1 在VSCode中創(chuàng)建新項目 48
2.3.2 VSCode導(dǎo)入項目 51
2.3.3 VSCode快捷鍵 54
2.3.4 在VSCode中安裝插件 58
2.3.5 在VSCode中運行Vue.js項目 62
2.3.6 用VSCode發(fā)布項目 64
2.4 小結(jié) 67

第3章 初識Vue.js
3.1 Vue.js項目初始化 69
3.1.1 創(chuàng)建一個Vue.js實例 69
3.1.2 數(shù)據(jù)綁定與方法使用 70
3.1.3 生命周期鉤子函數(shù) 72
3.1.4 生命周期示意圖 73
3.2 模板語法 74
3.2.1 向網(wǎng)頁插入文本內(nèi)容 75
3.2.2 原始HTML 75
3.2.3 使用JavaScript表達式 76
3.2.4 指令參數(shù) 76
3.2.5 動態(tài)參數(shù) 77
3.2.6 修飾符縮寫 78
3.2.7 v-bind縮寫 78
3.2.8 v-on縮寫 78
3.3 計算屬性和偵聽器 79
3.3.1 計算屬性 79
3.3.2 基礎(chǔ)例子 79
3.3.3 計算屬性緩存vs方法 80
3.3.4 計算屬性vs偵聽屬性 81
3.3.5 計算屬性的setter 82
3.3.6 偵聽器 82
3.4 class與style綁定 84
3.4.1 綁定HTML class 84
3.4.2 綁定內(nèi)聯(lián)樣式 87
3.5 條件編譯 88
3.5.1 在元素上使用v-if條件編譯分組 89 3.5.2 v-else 89
3.5.3 v-else-if 89
3.5.4 v-if vs v-show 90
3.5.5 v-if與v-for 90
3.6 列表編譯 90
3.6.1 用v-for把一個數(shù)組對應(yīng)為一組標(biāo)簽 90
3.6.2 在v-for中使用對象 91
3.6.3 維護狀態(tài) 92
3.6.4 數(shù)組更新檢測 93
3.6.5 對象變更檢測注意事項 94
3.6.6 顯示過濾/排序后的結(jié)果 94
3.6.7 在v-for中使用值范圍 95
3.6.8 在上使用v-for 95 3.6.9 在組件上使用v-for 95
3.7 事件處理 97
3.7.1 監(jiān)聽事件 98
3.7.2 事件處理方法 98
3.7.3 內(nèi)聯(lián)處理器中的方法 99
3.7.4 事件修飾符 99
3.7.5 按鍵修飾符 101
3.7.6 按鍵碼 101
3.7.7 系統(tǒng)修飾鍵 101
3.7.8 鼠標(biāo)按鈕修飾符 102
3.7.9 為什么在HTML中監(jiān)聽事件 103
3.8 表單輸入綁定 103
3.8.1 文本 103
3.8.2 多行文本 104
3.8.3 復(fù)選框 104
3.8.4 單選按鈕 104
3.8.5 選擇框 105
3.8.6 值綁定 106
3.8.7 修飾符 108
3.8.8 在組件上使用v-model 108
3.9 組件基礎(chǔ) 108
3.9.1 基本示例 109
3.9.2 組件的復(fù)用 109
3.9.3 data一定要是一個函數(shù) 109
3.9.4 組件的組織 110
3.9.5 通過prop向子組件傳遞數(shù)據(jù) 111
3.9.6 單個根標(biāo)簽 112
3.9.7 監(jiān)聽子組件事件 113
3.9.8 使用事件拋出一個值 114
3.9.9 在組件上使用v-model 115
3.9.10 通過插槽分發(fā)內(nèi)容 116
3.9.11 動態(tài)組件 116
3.9.12 解析DOM模板時的注意事項 117
3.10 小結(jié) 117

第4章 用axios與后端接口進行數(shù)據(jù)聯(lián)動
4.1 axios概要 119
4.2 axios方法的基本使用 120
4.2.1 axios的安裝 120
4.2.2 axios請求方法及別名（get方法） 121
4.2.3 axios請求方法及別名（post和put方法） 124
4.2.4 axios請求方法及別名（delete方法） 130
4.2.5 并發(fā)請求 133
4.3 axios方法深入 135
4.3.1 創(chuàng)建axios實例 135
4.3.2 實例的相關(guān)配置 136
4.3.3 常用參數(shù)配置具體使用方法 138
4.3.4 攔截器 139
4.3.5 錯誤處理 141
4.3.6 取消請求 143
4.4 axios實戰(zhàn) 144
4.4.1 項目環(huán)境配置 144
4.4.2 接口的調(diào)試 147
4.4.3 聯(lián)系人列表 151
4.4.4 添加、編輯聯(lián)系人 155
4.4.5 保存聯(lián)系人 157
4.4.6 刪除聯(lián)系人 162
4.4.7 axios的進一步封裝 164
4.5 小結(jié) 168

第5章 淺析Router的使用
5.1 Router基礎(chǔ) 170
5.1.1 起步 170
5.1.2 動態(tài)路由匹配 172
5.1.3 嵌套路由 176
5.1.4 編程式的導(dǎo)航 179
5.1.5 命名路由 180
5.1.6 命名視圖 181
5.1.7 重定向和別名 183
5.2 小結(jié) 185

第6章 生命周期和鉤子函數(shù)解析
6.1 beforeCreate鉤子函數(shù) 187
6.2 created鉤子函數(shù) 187
6.3 mounted鉤子函數(shù) 188
6.4 updated鉤子函數(shù) 188
6.5 beforeDestroy鉤子函數(shù) 189
6.6 小結(jié) 189

第7章 組件的靈活使用
7.1 組件注冊 191
7.1.1 組件名 191
7.1.2 全局注冊vs局部注冊 192
7.2 prop 193
7.2.1 prop的大小寫 193
7.2.2 prop類型 193
7.2.3 傳遞靜態(tài)或動態(tài)prop 194
7.2.4 prop驗證 196
7.3 自定義事件 197
7.3.1 事件名 197
7.3.2 自定義組件的v-model 198
7.4 小結(jié) 199

第8章 Vue.js下的ECharts使用
8.1 搭建ECharts開發(fā)環(huán)境 201
8.2 ECharts使用 202
8.2.1 餅圖 202
8.2.2 柱狀圖 210
8.2.3 曲線圖 218
8.2.4 散點圖 224
8.2.5 雷達圖 230
8.2.6 標(biāo)簽圖 237
8.3 小結(jié) 240

第9章 ElementUI前端框架
9.1 ElementUI框架概述 242
9.2 搭建ElementUI開發(fā)環(huán)境 243
9.3 基礎(chǔ)組件 243
9.3.1 Icon圖標(biāo) 243
9.3.2 Button按鈕 244
9.3.3 Link文字鏈接 248
9.4 表單組件 250
9.4.1 Radio單選按鈕 250
9.4.2 Checkbox復(fù)選框 255
9.4.3 Input輸入框 258
9.4.4 InputNumber計數(shù)器 259
9.4.5 Select選擇器 260
9.4.6 Switch開關(guān) 261
9.4.7 TimePicker時間選擇器 262
9.4.8 DatePicker日期選擇器 263
9.4.9 DateTimePicker日期時間選擇器 264
9.4.10 Upload上傳 266
9.4.11 Rate評分 268
9.4.12 Form表單 269
9.5 數(shù)據(jù)顯示組件 271
9.5.1 Table表格 271
9.5.2 Pagination分頁 273
9.5.3 Badge標(biāo)記 274
9.6 提示通知類組件 275
9.6.1 Loading加載 275
9.6.2 Message消息提示 277
9.6.3 MessageBox彈框 278
9.6.4 Notification通知 279
9.7 導(dǎo)航菜單類組件 280
9.7.1 NavMenu導(dǎo)航菜單 280
9.7.2 Tabs標(biāo)簽頁 282
9.7.3 Dropdown下拉菜單 283
9.8 其他組件 284
9.8.1 Dialog對話框 284
9.8.2 Tooltip文字提示 285
9.8.3 Card卡片 288
9.8.4 Image圖片 289
9.9 小結(jié) 290

第10章 實戰(zhàn)：上市集團門戶網(wǎng)站開發(fā)
10.1 路由框架搭建 292
10.2 業(yè)務(wù)目錄安排 299
10.3 開發(fā)文件配置 300
10.4 公共方法編寫 304
10.5 公共樣式編寫 306
10.6 頁面效果實現(xiàn) 312
10.7 小結(jié) 314

第11章 實戰(zhàn)：基于Vue.js框架的后臺管理系統(tǒng)開發(fā)
11.1 路由框架搭建 316
11.2 業(yè)務(wù)目錄安排 320
11.3 開發(fā)文件配置 321
11.4 公共方法編寫 330
11.5 公共樣式編寫 332
11.6 頁面效果實現(xiàn) 332
11.7 小結(jié) 336