VUE.js入門與商城開發實戰

新書速遞

 

導讀：Vue.js正式發佈於2014年2月，正如其官網介紹的，具有「易用、靈活和高效」的特色。其實Vue.js 的本質是框架，而真正瞭解它的人會把它當成一件做品來欣賞。

 

Vue.js 是一個輕量級、易上手的前端框架，與其餘框架相比，入門難度小，學習曲線平緩，所以愈來愈多的人開始投入 Vue.js 的懷抱，走進 Vue.js 的世界。又由於前端框架都與HTML、CSS、JavaScript結合緊密，因此你須要熟悉這些技術。

 

今天爲你們推薦一本新書《Vue.js入門與商城開發實戰》

 

 

本書主要面向Vue.js的初級入門者，涵蓋詳細的理論知識、佈局分析和邏輯分析，還有豐富的實戰案例、詳細的代碼解說，具備很強的實用性。

 

全書主要內容分三部分：基礎知識、技能提高、商城開發案例。

 

• 基礎知識部分包括Vue.js入門、數據綁定、表單和雙向數據綁定、條件和循環指令、樣式綁定、事件處理器、監聽和計算屬性。

• 技能提高部分包括Vue.js的組件，自定義指令和響應接口，路由、動畫和過渡，Vue.js中的插件Axios等。

• 商城開發案例部分包括一個商城項目的大部分功能，如首頁開發、用戶管理、實現產品和新聞頁面、購物和訂單處理等。

 

 

主要內容

 

• 新手入門方法和第一個實例。

• Vue.js的基本概念詳解。

• 基礎語法、數據綁定、表單使用、循環指令、樣式綁定、事件處理等。

• Vue.js的組件、自定義指令。

• 響應接口與第三方插件Axios。

• 商城的首頁、用戶管理、產品展現、購物車、下單、會員等界面的開發案例詳解。

• Vue.js和JavaScript的混合使用。

• Vue.js和後端數據的交互以及接口的使用。

 

 

做者簡介

 

黃菊華，前端全棧工程師，杭州搖億網絡科技創始人兼技術總監，多年從事電子商務技術的研究，對於移動端HTML5開發、各種前端框架技術有比較深刻的研究和應用，做爲技術總監帶領團隊開發了多個應用項目，項目涉及醫療、房地產、微商等。

 

 

目錄

【第一部分　基礎知識】

●第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　系統屬性15

1.4.4　入門知識點總結16

 

●第2章　數據綁定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　指令參數29

2.8.3　指令縮寫30

2.8.4　修飾符31

 

●第3章　表單和雙向數據綁定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 獲取表單要提交的數據45

3.4v-model指令的修飾符46

 

●第4章　條件和循環指令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 指令的區別54

4.3v-for指令56

4.3.1　基礎語法56

4.3.2　簡易數組的使用57

4.3.3　在模板中的使用58

4.3.4　對象的迭代顯示59

4.3.5　對象的迭代顯示：提供第二個參數爲鍵名61

4.3.6　對象的迭代顯示：提供第三個參數爲索引62

4.3.7　循環顯示整數64

4.3.8　九九乘法表65

4.3.9　對屬性進行升序排序66

4.3.10　對象數組的內容顯示68

4.3.11v-for 循環指令的嵌套69

 

●第5章　樣式綁定72

5.1　綁定class屬性72

5.2　綁定多個樣式74

5.3　綁定數據裏的一個對象75

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

5.5　綁定一個數組79

5.6　經過三目運算符綁定83

5.7style內聯樣式85

5.8style綁定樣式對象86

5.9style綁定樣式數組87

 

●第6章　事件處理器89

6.1v-on指令89

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

6.3　在事件中讀取data裏的數值91

6.4　方法參數的幾種使用方式93

6.5　事件修飾符95

6.6　按鍵修飾符96

 

●第7章　監聽和計算屬性97

7.1watch監聽屬性97

7.1.1　基本用法97

7.1.2　使用 watch 實現計數器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　動態props121

 

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

9.1Vue.js 自定義指令124

9.2　鉤子函數126

9.2.1　經常使用鉤子函數126

9.2.2　鉤子函數的參數126

9.3Vue.js響應接口128

9.4Vue.set130

9.5Vue.delete133

 

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

10.1　安裝vue-router134

10.2　路由簡單應用134

10.3<router-link> 相關屬性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　執行多個併發請求150

11.2.4Axios API151

11.2.5　請求方法的別名151

11.2.6　併發151

11.2.7　建立實例152

11.3　實例方法152

11.4　其餘內容155

 

【第三部分　商城開發案例】

 

●第12章　首頁開發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章　實現產品和新聞頁面220

14.1　產品分類220

14.1.1　左側默認分類221

14.1.2　右側默認產品223

14.1.3　左側分類和右側產品聯動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　增長和減小數量接口255

15.1.3　增長數量255

15.1.4　減小數量256

15.1.5　單選計費258

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

15.1.7　去結算259

15.2　下單260

15.2.1　獲取參數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