VUE.js入門與商城開(kāi)發(fā)實(shí)戰(zhàn)

【第一部分　基礎(chǔ)知識(shí)】

●第1章　Vue.js入門2

1.1Vue.js簡(jiǎn)介2

1.2Vue.js編輯器3

1.2.1　編輯器類型4

1.2.2　使用Notepad建立第一個(gè)Vue.js頁(yè)面4

1.2.3　使用Dreamweaver建立第一個(gè)Vue.js頁(yè)面7

1.3Vue.js安裝9

1.3.1　使用?CDN?方法9

1.3.2　下載官方Vue.js框架10

1.3.3NPM?方法10

1.4Vue.js起步12

1.4.1Vue中變量的顯示和自定義方法的使用12

1.4.2data內(nèi)容的另外一種定義方式14

1.4.3　系統(tǒng)屬性15

1.4.4　入門知識(shí)點(diǎn)總結(jié)16

?

●第2章　數(shù)據(jù)綁定18

2.1　文本插值18

2.2v-html指令20

2.3v-text指令21

2.4v-once指令21

2.5v-cloak指令22

2.6v-bind?指令23

2.7Vue.js完全支持JavaScript表達(dá)式25

2.8Vue.js指令總結(jié)27

2.8.1　基礎(chǔ)用法27

2.8.2　指令參數(shù)29

2.8.3　指令縮寫(xiě)30

2.8.4　修飾符31

?

●第3章　表單和雙向數(shù)據(jù)綁定32

3.1v-model的基礎(chǔ)用法32

3.1.1　在input中使用33

3.1.2　在textarea中使用34

3.1.3　在select中使用36

3.1.4　在checkbox（單選）中使用37

3.1.5　在checkbox（多選）中使用39

3.1.6　在radio（單選）中使用40

3.1.7　在鏈接a中應(yīng)用41

3.1.8　在圖片中使用42

3.2Vue.js?過(guò)濾器的使用43

3.3Vue.js?獲取表單要提交的數(shù)據(jù)45

3.4v-model指令的修飾符46

?

●第4章　條件和循環(huán)指令48

4.1v-if?指令48

4.1.1　使用v-if?指令48

4.1.2　使用v-else?指令50

4.1.3　使用v-else-if?指令51

4.2v-show?指令52

4.2.1v-show指令的用法52

4.2.2v-show指令和v-if?指令的區(qū)別54

4.3v-for指令56

4.3.1　基礎(chǔ)語(yǔ)法56

4.3.2　簡(jiǎn)易數(shù)組的使用57

4.3.3　在模板中的使用58

4.3.4　對(duì)象的迭代顯示59

4.3.5　對(duì)象的迭代顯示：提供第二個(gè)參數(shù)為鍵名61

4.3.6　對(duì)象的迭代顯示：提供第三個(gè)參數(shù)為索引62

4.3.7　循環(huán)顯示整數(shù)64

4.3.8　九九乘法表65

4.3.9　對(duì)屬性進(jìn)行升序排序66

4.3.10　對(duì)象數(shù)組的內(nèi)容顯示68

4.3.11v-for?循環(huán)指令的嵌套69

?

●第5章　樣式綁定72

5.1　綁定class屬性72

5.2　綁定多個(gè)樣式74

5.3　綁定數(shù)據(jù)里的一個(gè)對(duì)象75

5.4　綁定返回對(duì)象的計(jì)算屬性77

5.5　綁定一個(gè)數(shù)組79

5.6　通過(guò)三目運(yùn)算符綁定83

5.7style內(nèi)聯(lián)樣式85

5.8style綁定樣式對(duì)象86

5.9style綁定樣式數(shù)組87

?

●第6章　事件處理器89

6.1v-on指令89

6.2v-on指令的方法調(diào)用90

6.3　在事件中讀取data里的數(shù)值91

6.4　方法參數(shù)的幾種使用方式93

6.5　事件修飾符95

6.6　按鍵修飾符96

?

●第7章　監(jiān)聽(tīng)和計(jì)算屬性97

7.1watch監(jiān)聽(tīng)屬性97

7.1.1　基本用法97

7.1.2　使用?watch?實(shí)現(xiàn)計(jì)數(shù)器97

7.1.3　千米與米之間的換算99

7.1.4　簡(jiǎn)單的購(gòu)物車101

7.1.5　全選與取消全選105

7.2　計(jì)算屬性108

7.2.1computed108

7.2.2methods110

7.2.3setter111

?

【第二部分　技能提升】

?

●第8章　組件116

8.1　全局組件116

8.2　局部組件118

8.3props屬性120

8.4　動(dòng)態(tài)props121

?

●第9章　自定義指令和響應(yīng)接口124

9.1Vue.js?自定義指令124

9.2　鉤子函數(shù)126

9.2.1　常用鉤子函數(shù)126

9.2.2　鉤子函數(shù)的參數(shù)126

9.3Vue.js響應(yīng)接口128

9.4Vue.set130

9.5Vue.delete133

?

●第10章　路由、動(dòng)畫(huà)和過(guò)渡134

10.1　安裝vue-router134

10.2　路由簡(jiǎn)單應(yīng)用134

10.3?相關(guān)屬性136

10.4　過(guò)渡137

10.5Vue.js中CSS?動(dòng)畫(huà)的應(yīng)用140

10.6　自定義過(guò)渡的類名141

10.7JavaScript?鉤子143

?

●第11章　Vue.js中的插件Axios147

11.1　安裝方法147

11.2　常用方法148

11.2.1GET?方法148

11.2.2POST?方法150

11.2.3　執(zhí)行多個(gè)并發(fā)請(qǐng)求150

11.2.4Axios API151

11.2.5　請(qǐng)求方法的別名151

11.2.6　并發(fā)151

11.2.7　創(chuàng)建實(shí)例152

11.3　實(shí)例方法152

11.4　其他內(nèi)容155

?

【第三部分　商城開(kāi)發(fā)案例】

?

●第12章　首頁(yè)開(kāi)發(fā)162

12.1　圖片輪播164

12.2　快捷菜單166

12.3　最新資訊167

12.4　最新上架170

12.5　精品推薦172

?

●第13章　用戶管理175

13.1　用戶注冊(cè)175

13.2　用戶登錄179

13.3　會(huì)員首頁(yè)182

13.4　用戶退出187

13.5　用戶信息修改187

13.6　用戶密碼修改191

13.7　用戶收藏管理194

13.7.1　收藏列表194

13.7.2　收藏刪除197

13.8　用戶地址管理199

13.8.1　地址添加199

13.8.2　地址列表207

13.8.3　地址刪除210

13.8.4　地址修改212

?

●第14章　實(shí)現(xiàn)產(chǎn)品和新聞頁(yè)面220

14.1　產(chǎn)品分類220

14.1.1　左側(cè)默認(rèn)分類221

14.1.2　右側(cè)默認(rèn)產(chǎn)品223

14.1.3　左側(cè)分類和右側(cè)產(chǎn)品聯(lián)動(dòng)225

14.2　產(chǎn)品列表226

14.3　產(chǎn)品簡(jiǎn)介228

14.3.1　產(chǎn)品簡(jiǎn)介信息228

14.3.2　底部菜單234

14.3.3　收藏236

14.3.4　加購(gòu)物車237

14.3.5　立即購(gòu)買238

14.4　產(chǎn)品詳情239

14.5　產(chǎn)品評(píng)論241

14.6　信息列表244

14.7　信息詳情247

?

●第15章　購(gòu)物和訂單處理250

15.1　 購(gòu)物車250

15.1.1　購(gòu)物車產(chǎn)品列表252

15.1.2　增加和減少數(shù)量接口255

15.1.3　增加數(shù)量255

15.1.4　減少數(shù)量256

15.1.5　單選計(jì)費(fèi)258

15.1.6　全選、取消全選、計(jì)費(fèi)258

15.1.7　去結(jié)算259

15.2　下單260

15.2.1　獲取參數(shù)260

15.2.2　加載用戶地址261

15.2.3　加載下單產(chǎn)品列表263

15.2.4　提交訂單266

15.3　訂單列表267

15.3.1　頂部菜單切換268

15.3.2　用戶訂單列表270

15.4　取消訂單274

15.5　去付款276

15.6　確認(rèn)收貨277

15.7　產(chǎn)品評(píng)論279

15.8　小結(jié)282