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

【第一部分　基礎知識】

●第1章　Vue.js入門2

1.1Vue.js簡介2

1.2Vue.js編輯器3

1.2.1　編輯器類型4

1.2.2　使用Notepad建立第一個Vue.js頁面4

1.2.3　使用Dreamweaver建立第一個Vue.js頁面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內容的另外一種定義方式14

1.4.3　系統(tǒng)屬性15

1.4.4　入門知識點總結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表達式25

2.8Vue.js指令總結27

2.8.1　基礎用法27

2.8.2　指令參數(shù)29

2.8.3　指令縮寫30

2.8.4　修飾符31

?

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

3.1v-model的基礎用法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中應用41

3.1.8　在圖片中使用42

3.2Vue.js?過濾器的使用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　基礎語法56

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

4.3.3　在模板中的使用58

4.3.4　對象的迭代顯示59

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

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

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

4.3.8　九九乘法表65

4.3.9　對屬性進行升序排序66

4.3.10　對象數(shù)組的內容顯示68

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

?

●第5章　樣式綁定72

5.1　綁定class屬性72

5.2　綁定多個樣式74

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

5.4　綁定返回對象的計算屬性77

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

5.6　通過三目運算符綁定83

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

5.8style綁定樣式對象86

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

?

●第6章　事件處理器89

6.1v-on指令89

6.2v-on指令的方法調用90

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

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

6.5　事件修飾符95

6.6　按鍵修飾符96

?

●第7章　監(jiān)聽和計算屬性97

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

7.1.1　基本用法97

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

7.1.3　千米與米之間的換算99

7.1.4　簡單的購物車101

7.1.5　全選與取消全選105

7.2　計算屬性108

7.2.1computed108

7.2.2methods110

7.2.3setter111

?

【第二部分　技能提升】

?

●第8章　組件116

8.1　全局組件116

8.2　局部組件118

8.3props屬性120

8.4　動態(tài)props121

?

●第9章　自定義指令和響應接口124

9.1Vue.js?自定義指令124

9.2　鉤子函數(shù)126

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

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

9.3Vue.js響應接口128

9.4Vue.set130

9.5Vue.delete133

?

●第10章　路由、動畫和過渡134

10.1　安裝vue-router134

10.2　路由簡單應用134

10.3?相關屬性136

10.4　過渡137

10.5Vue.js中CSS?動畫的應用140

10.6　自定義過渡的類名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í)行多個并發(fā)請求150

11.2.4Axios API151

11.2.5　請求方法的別名151

11.2.6　并發(fā)151

11.2.7　創(chuàng)建實例152

11.3　實例方法152

11.4　其他內容155

?

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

?

●第12章　首頁開發(fā)162

12.1　圖片輪播164

12.2　快捷菜單166

12.3　最新資訊167

12.4　最新上架170

12.5　精品推薦172

?

●第13章　用戶管理175

13.1　用戶注冊175

13.2　用戶登錄179

13.3　會員首頁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章　實現(xiàn)產品和新聞頁面220

14.1　產品分類220

14.1.1　左側默認分類221

14.1.2　右側默認產品223

14.1.3　左側分類和右側產品聯(lián)動225

14.2　產品列表226

14.3　產品簡介228

14.3.1　產品簡介信息228

14.3.2　底部菜單234

14.3.3　收藏236

14.3.4　加購物車237

14.3.5　立即購買238

14.4　產品詳情239

14.5　產品評論241

14.6　信息列表244

14.7　信息詳情247

?

●第15章　購物和訂單處理250

15.1　 購物車250

15.1.1　購物車產品列表252

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

15.1.3　增加數(shù)量255

15.1.4　減少數(shù)量256

15.1.5　單選計費258

15.1.6　全選、取消全選、計費258

15.1.7　去結算259

15.2　下單260

15.2.1　獲取參數(shù)260

15.2.2　加載用戶地址261

15.2.3　加載下單產品列表263

15.2.4　提交訂單266

15.3　訂單列表267

15.3.1　頂部菜單切換268

15.3.2　用戶訂單列表270

15.4　取消訂單274

15.5　去付款276

15.6　確認收貨277

15.7　產品評論279

15.8　小結282