JavaScript+Vue.js Web開發(fā)案例教程

## 章名目錄
【第一篇】 JavaScript程序開發(fā)
第1章 JavaScript簡介
第2章 JavaScript基礎(chǔ)
第3章 程序控制流與函數(shù)
第4章 JavaScript中的對(duì)象
第5章 在JavaScript中使用集合
第6章 類與原型鏈
第7章 DOM
【第二篇】 Vue．js程序開發(fā)
第8章 Vue．js開發(fā)基礎(chǔ)
第9章 計(jì)算屬性與偵聽器
第10章 控制頁面的CSS樣式
第11章 事件處理
第12章 表單綁定
第13章 結(jié)構(gòu)渲染
第14章 組件基礎(chǔ)
第15章 單文件組件
第16章 AJAX與axios
第17章 過渡和動(dòng)畫
第18章 Vue．js插件
【第三篇】 綜合實(shí)戰(zhàn)
第19章 綜合案例：“豪華版”待辦事項(xiàng)

## 詳細(xì)目錄
【第一篇】 JavaScript程序開發(fā)
第1章 JavaScript簡介
1．1 其他程序設(shè)計(jì)語言與JavaScript 2
1．2 JavaScript的起源、發(fā)展與標(biāo)準(zhǔn)化 6
1．2．1 起源 6
1．2．2 博弈與發(fā)展 7
1．2．3 標(biāo)準(zhǔn)的制定 7
1．3 JavaScript的實(shí)現(xiàn) 8
1．3．1 ECMAScript 8
1．3．2 DOM 9
1．3．3 BOM 9
1．3．4 新的開始 10
1．4 Web標(biāo)準(zhǔn) 10
1．4．1 Web標(biāo)準(zhǔn)概述 11
1．4．2 結(jié)構(gòu)、表現(xiàn)、行為的分離 12
1．4．3 前后端分離成為Web開發(fā)的主流模式 13
本章小結(jié) 13
習(xí)題1 13
第2章 JavaScript基礎(chǔ)
2．1 JavaScript的基本語法 14
2．2 使用VS Code編寫JavaScript代碼 16
2．2．1 創(chuàng)建基礎(chǔ)的HTML文件 16
2．2．2 編寫JavaScript代碼 18
2．2．3 在瀏覽器中查看與調(diào)試 18
2．3 關(guān)鍵字與保留字 20
2．4 變量 21
2．5 數(shù)據(jù)類型 23
2．5．1 數(shù)值型 23
2．5．2 字符串型 24
2．5．3 布爾型 27
2．5．4 類型轉(zhuǎn)換 28
2．5．5 數(shù)組 30
本章小結(jié) 34
習(xí)題2 34
第3章 程序控制流與函數(shù)
3．1 順序結(jié)構(gòu)：賦值語句與表達(dá)式 35
3．2 分支結(jié)構(gòu)：條件語句 36
3．2．1 比較運(yùn)算符 37
3．2．2 邏輯運(yùn)算符 37
3．2．3 if語句 38
3．2．4 switch語句 39
3．3 循環(huán)結(jié)構(gòu) 40
3．3．1 while語句 41
3．3．2 do…while語句 41
3．3．3 for語句 42
3．3．4 break和continue語句 43
3．3．5 實(shí)例：九九乘法表 45
3．3．6 for…of語句 47
3．3．7 for…in語句 47
3．4 函數(shù) 48
3．4．1 定義函數(shù)的基本方法 48
3．4．2 arguments對(duì)象 50
3．4．3 實(shí)例：楊輝三角形 52
3．4．4 變量作用域 54
3．4．5 函數(shù)作為函數(shù)的參數(shù) 56
3．4．6 箭頭函數(shù) 57
3．5 異常處理 58
本章小結(jié) 61
習(xí)題3 61
第4章 JavaScript中的對(duì)象
4．1 理解對(duì)象的含義 62
4．1．1 理解常見的“類-對(duì)象”結(jié)構(gòu) 63
4．1．2 理解JavaScript中的對(duì)象 64
4．1．3 在JavaScript中創(chuàng)建對(duì)象 65
4．2 時(shí)間和日期：Date對(duì)象 70
4．3 數(shù)學(xué)計(jì)算：Math對(duì)象 73
4．4 原始類型與裝箱 75
4．4．1 Boolean 76
4．4．2 Number 77
4．4．3 String 78
4．5 BOM簡介 79
4．5．1 window對(duì)象 79
4．5．2 location對(duì)象 82
4．5．3 navigator對(duì)象 83
4．5．4 screen對(duì)象 84
4．5．5 history對(duì)象 85
本章小結(jié) 87
習(xí)題4 87
第5章 在JavaScript中使用集合
5．1 數(shù)組 90
5．1．1 數(shù)組的基本操作 90
5．1．2 不同數(shù)據(jù)結(jié)構(gòu)的數(shù)組操作 92
5．2 對(duì)象 96
5．3 集合類型 98
5．3．1 Map集合 98
5．3．2 Set集合 100
本章小結(jié) 101
習(xí)題5 101
第6章 類與原型鏈
6．1 使用類語法實(shí)現(xiàn)封裝 103
6．1．1 類的聲明與定義 103
6．1．2 通過類創(chuàng)建對(duì)象 104
6．1．3 定義方法與調(diào)用方法 105
6．1．4 存取器 106
6．1．5 static關(guān)鍵字 108
6．1．6 instanceof運(yùn)算符 108
6．2 使用類語法實(shí)現(xiàn)繼承 108
6．3 基于構(gòu)造函數(shù)和原型的面向?qū)ο髾C(jī)制 112
6．3．1 封裝 112
6．3．2 繼承 113
6．3．3 原型與原型鏈 114
本章小結(jié) 118
習(xí)題6 118
第7章 DOM
7．1 網(wǎng)頁中的DOM框架 119
7．2 DOM中的節(jié)點(diǎn) 120
7．2．1 元素節(jié)點(diǎn) 120
7．2．2 文本節(jié)點(diǎn) 120
7．2．3 屬性節(jié)點(diǎn) 121
7．3 通過JavaScript訪問DOM 121
7．3．1 訪問節(jié)點(diǎn) 122
7．3．2 檢測(cè)節(jié)點(diǎn)類型 123
7．3．3 父子及兄弟關(guān)系 124
7．3．4 節(jié)點(diǎn)的屬性 127
7．3．5 創(chuàng)建和操作節(jié)點(diǎn) 128
7．4 DOM與CSS 131
7．4．1 HTML、CSS、JavaScript三位一體 131
7．4．2 className屬性 132
7．5 事件 133
7．5．1 事件與事件流 133
7．5．2 事件偵聽 134
7．5．3 事件對(duì)象 137
7．6 動(dòng)手實(shí)踐：動(dòng)態(tài)控制表格綜合案例 138
7．6．1 動(dòng)態(tài)添加 138
7．6．2 修改單元格內(nèi)容 141
7．6．3 動(dòng)態(tài)刪除 142
本章小結(jié) 145
習(xí)題7 145
【第二篇】 Vue．js程序開發(fā)
第8章 Vue．js開發(fā)基礎(chǔ)
8．1 Web前端開發(fā)概述 148
8．1．1 Web開發(fā)簡史 148
8．1．2 基于前后端分離模式的Web開發(fā) 149
8．1．3 Vue．js與MVVM模式 150
8．1．4 安裝Vue．js 153
8．1．5 上手實(shí)踐：第一個(gè)Vue．js程序 155
8．2 Vue．js開發(fā) 157
8．2．1 Vue根實(shí)例 157
8．2．2 Vue實(shí)例的生命周期 166
本章小結(jié) 169
習(xí)題8 169
第9章 計(jì)算屬性與偵聽器
9．1 計(jì)算屬性 170
9．1．1 定義計(jì)算屬性 170
9．1．2 計(jì)算屬性的緩存特性 172
9．2 偵聽器 175
9．2．1 偵聽器的應(yīng)用場(chǎng)景 175
9．2．2 偵聽器的基本用法 176
9．2．3 深度偵聽 177
9．2．4 偵聽對(duì)象時(shí)獲取對(duì)象原值 179
9．2．5 使用immediate參數(shù) 180
9．2．6 對(duì)數(shù)組的偵聽 181
本章小結(jié) 184
習(xí)題9 184
第10章 控制頁面的CSS樣式
10．1 綁定class屬性 185
10．1．1 以對(duì)象方式綁定class屬性 185
10．1．2 將class屬性與對(duì)象變量綁定 187
10．1．3 以數(shù)組方式綁定class屬性 189
10．1．4 動(dòng)態(tài)改變class屬性值 189
10．1．5 在數(shù)組中使用對(duì)象 190
10．2 綁定style屬性 191
10．2．1 以對(duì)象方式綁定style屬性 191
10．2．2 將style屬性與對(duì)象變量綁定 191
10．2．3 以數(shù)組方式綁定style屬性 192
10．2．4 動(dòng)態(tài)改變style屬性值 193
本章小結(jié) 194
習(xí)題10 194
第11章 事件處理
11．1 標(biāo)準(zhǔn)DOM中的事件 195
11．2 使用Vue．js處理事件 196
11．2．1 內(nèi)聯(lián)方式響應(yīng)事件 196
11．2．2 事件處理方法 197
11．2．3 在Vue．js中使用事件對(duì)象 198
11．3 動(dòng)手練習(xí)：監(jiān)視鼠標(biāo)指針移動(dòng) 199
11．4 事件修飾符 201
11．4．1 準(zhǔn)備基礎(chǔ)頁面 201
11．4．2 stop 202
11．4．3 self 202
11．4．4 capture 203
11．4．5 once 203
11．4．6 prevent 203
11．4．7 事件修飾符使用說明 204
11．4．8 按鍵修飾符 205
本章小結(jié) 207
習(xí)題11 207
第12章 表單綁定
12．1 輸入文本的綁定 209
12．1．1 文本框 209
12．1．2 多行文本框 210
12．2 選擇類表單元素的綁定 211
12．2．1 單選按鈕 211
12．2．2 復(fù)選框 212
12．2．3 下拉框 213
12．2．4 多選列表框 214
12．2．5 鍵值對(duì)綁定 214
12．3 修飾符 215
12．3．1 lazy修飾符 215
12．3．2 number修飾符 216
12．3．3 trim修飾符 216
本章小結(jié) 217
習(xí)題12 217
第13章 結(jié)構(gòu)渲染
13．1 條件渲染指令v-if 218
13．1．1 v-if 和 v-else 218
13．1．2 v-else-if 219
13．1．3 用key管理可復(fù)用的元素 220
13．1．4 v-if 和 v-show 221
13．2 列表渲染指令v-for 222
13．2．1 基本列表 222
13．2．2 迭代對(duì)象數(shù)組 223
13．2．3 對(duì)象屬性列表 224
13．2．4 數(shù)值范圍 224
13．2．5 數(shù)組更新檢測(cè) 225
13．2．6 v-for中key的作用 227
13．2．7 v-for與v-if一同使用時(shí)的注意事項(xiàng) 229
13．3 案例——匯率計(jì)算器 230
13．3．1 頁面結(jié)構(gòu)和樣式 231
13．3．2 數(shù)據(jù)模型 231
本章小結(jié) 234
習(xí)題13 234
第14章 組件基礎(chǔ)
14．1 自定義組件與HTML標(biāo)記 235
14．1．1 組件的名稱 237
14．1．2 組件的屬性 237
14．1．3 組件的內(nèi)容 238
14．1．4 在組件中處理事件 239
14．2 全局組件與局部組件 242
本章小結(jié) 243
習(xí)題14 244
第15章 單文件組件
15．1 基礎(chǔ)知識(shí) 245
15．2 安裝Vue CLI腳手架工具 246
15．2．1 安裝基礎(chǔ)環(huán)境 247
15．2．2 初步使用腳手架工具 248
15．3 動(dòng)手實(shí)踐：投票頁面 250
15．3．1 制作greeting組件 251
15．3．2 制作app組件 252
15．3．3 父子組件之間傳遞數(shù)據(jù) 254
15．3．4 構(gòu)建用于生產(chǎn)環(huán)境的文件 258
15．4 單頁應(yīng)用和多頁應(yīng)用 259
15．4．1 單頁應(yīng)用和多頁應(yīng)用的區(qū)別 260
15．4．2 多頁應(yīng)用開發(fā) 260
15．4．3 單頁應(yīng)用開發(fā) 261
本章小結(jié) 267
習(xí)題15 267
第16章 AJAX與axios
16．1 認(rèn)識(shí)axios 268
16．2 axios的基礎(chǔ)用法 269
16．2．1 常見請(qǐng)求方法調(diào)用 269
16．2．2 GET與POST 271
16．2．3 嵌套請(qǐng)求與并發(fā)請(qǐng)求 274
16．3 axios的進(jìn)階用法 277
16．3．1 創(chuàng)建實(shí)例 277
16．3．2 實(shí)例的相關(guān)配置 278
16．3．3 錯(cuò)誤處理 279
16．3．4 攔截器 280
本章小結(jié) 283
習(xí)題16 283
第17章 過渡和動(dòng)畫
17．1 CSS過渡 285
17．2 單元素過渡 286
17．2．1 transition組件 286
17．2．2 過渡的類名 287
17．3 動(dòng)手實(shí)踐：可折疊的多級(jí)菜單 288
17．3．1 搭建頁面結(jié)構(gòu) 288
17．3．2 展開和隱藏菜單 289
17．3．3 添加過渡效果 290
17．3．4 實(shí)現(xiàn)多級(jí)菜單 291
17．4 列表過渡 294
本章小結(jié) 296
習(xí)題17 297
第18章 Vue．js插件
18．1 路由管理插件Vue Router 298
18．1．1 基本用法 298
18．1．2 命名路由 302
18．1．3 路由動(dòng)態(tài)匹配 303
18．1．4 編程式導(dǎo)航 307
18．1．5 重定向和別名 308
18．1．6 進(jìn)階用法 309
18．1．7 history模式 312
18．2 狀態(tài)管理插件Vuex 312
18．2．1 Vuex的基本用法 312
18．2．2 深入掌握Vuex 316
本章小結(jié) 324
習(xí)題18 325
【第三篇】 綜合實(shí)戰(zhàn)
第19章 綜合案例：“豪華版”待辦事項(xiàng)
19．1 功能描述 329
19．2 用到的知識(shí)點(diǎn) 329
19．3 使用Vue CLI搭建項(xiàng)目 330
19．4 頁面結(jié)構(gòu)和樣式 331
19．4．1 添加待辦事項(xiàng)頁面 332
19．4．2 篩選項(xiàng)頁面 332
19．4．3 任務(wù)列表頁面 333
19．4．4 編輯任務(wù)彈框頁面 334
19．5 組件化 335
19．5．1 抽離單個(gè)任務(wù)項(xiàng) 335
19．5．2 抽離編輯任務(wù)彈框 336
19．6 核心功能的實(shí)現(xiàn) 336
19．6．1 定義Todo類 336
19．6．2 使用Vuex管理任務(wù)列表 337
19．7 實(shí)現(xiàn)各項(xiàng)功能 339
19．7．1 添加待辦事項(xiàng) 339
19．7．2 顯示任務(wù)列表 340
19．7．3 動(dòng)態(tài)化篩選項(xiàng) 340
19．7．4 修改任務(wù)狀態(tài) 341
19．7．5 編輯任務(wù) 342
19．7．6 刪除任務(wù) 345
19．7．7 調(diào)整任務(wù)順序 346
19．7．8 持久化任務(wù) 347
本章小結(jié) 348