## 章名目錄



【篇】　JavaScript程序開發(fā)

第1章　JavaScript簡介

第2章　JavaScript基礎(chǔ)

第3章　程序控制流與函數(shù)

第4章　JavaScript中的對象

第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章　過渡和動畫

第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對象　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中的對象

4.1　理解對象的含義　62

4.1.1　理解常見的類-對象結(jié)構(gòu)　63

4.1.2　理解JavaScript中的對象　64

4.1.3　在JavaScript中創(chuàng)建對象　65

4.2　時間和日期：Date對象　70

4.3　數(shù)學(xué)計(jì)算：Math對象　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對象　79

4.5.2　location對象　82

4.5.3　navigator對象　83

4.5.4　screen對象　84

4.5.5　history對象　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　對象　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)建對象　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　檢測節(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　事件對象　137

7.6　動手實(shí)踐：動態(tài)控制表格綜合案例　138

7.6.1　動態(tài)添加　138

7.6.2　修改單元格內(nèi)容　141

7.6.3　動態(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í)踐：個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)用場景　175

9.2.2　偵聽器的基本用法　176

9.2.3　深度偵聽　177

9.2.4　偵聽對象時獲取對象原值　179

9.2.5　使用immediate參數(shù)　180

9.2.6　對數(shù)組的偵聽　181

本章小結(jié) 　184

習(xí)題9　184



第10章　控制頁面的CSS樣式

10.1　綁定class屬性　185

10.1.1　以對象方式綁定class屬性　185

10.1.2　將class屬性與對象變量綁定　187

10.1.3　以數(shù)組方式綁定class屬性　189

10.1.4　動態(tài)改變class屬性值　189

10.1.5　在數(shù)組中使用對象　190

10.2　綁定style屬性　191

10.2.1　以對象方式綁定style屬性　191

10.2.2　將style屬性與對象變量綁定　191

10.2.3　以數(shù)組方式綁定style屬性　192

10.2.4　動態(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中使用事件對象　198

11.3　動手練習(xí)：監(jiān)視鼠標(biāo)指針移動　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　鍵值對綁定　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　迭代對象數(shù)組　223

13.2.3　對象屬性列表　224

13.2.4　數(shù)值范圍　224

13.2.5　數(shù)組更新檢測　225

13.2.6　v-for中key的作用　227

13.2.7　v-for與v-if一同使用時的注意事項(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ǔ)知識　245

15.2　安裝Vue CLI腳手架工具　246

15.2.1　安裝基礎(chǔ)環(huán)境　247

15.2.2　初步使用腳手架工具　248

15.3　動手實(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)識axios　268

16.2　axios的基礎(chǔ)用法　269

16.2.1　常見請求方法調(diào)用　269

16.2.2　GET與POST　271

16.2.3　嵌套請求與并發(fā)請求　274

16.3　axios的進(jìn)階用法　277

16.3.1　創(chuàng)建實(shí)例　277

16.3.2　實(shí)例的相關(guān)配置　278

16.3.3　錯誤處理　279

16.3.4　攔截器　280

本章小結(jié) 　283

習(xí)題16　283



第17章　過渡和動畫

17.1　CSS過渡　285

17.2　單元素過渡　286

17.2.1　transition組件　286

17.2.2　過渡的類名　287

17.3　動手實(shí)踐：可折疊的多級菜單　288

17.3.1　搭建頁面結(jié)構(gòu)　288

17.3.2　展開和隱藏菜單　289

17.3.3　添加過渡效果　290

17.3.4　實(shí)現(xiàn)多級菜單　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　路由動態(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　用到的知識點(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　抽離單個任務(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　動態(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