《Vue.js 2.x實踐指南》已出版

時間 2020-05-14

原文原文鏈接

　　《Vue.js 2.x實踐指南》其實早在一年前就已經完稿，只是因爲疫情的緣故耽擱了許久才下廠印刷。前端

　　本書旨在讓初學者可以快速上手vue技術棧，並可以利用所學知識獨立動手進行項目開發。個人寫做風格一貫都是喜歡採用理論和實踐相結合的方式，這樣學習起來不會那麼枯燥，並且極具成效。時間是很寶貴的東西，因此儘可能用最少的時間去掌握對本身有幫助知識是很是重要的。vue

　　閱讀本書須要具有HTML、CSS和JS基礎，本書針對的用戶羣體主要是：想要快速學習vue技術，並可以用vue進行實際項目開發的讀者以及高校計算機專業學生。書中經過一個H5移動應用和一個PC Web應用來說述了vue的實踐應用。編程

　　另外：本書提供PPT課件。後端

　　書中示例項目截圖：跨域

　　書目錄大綱：瀏覽器

第 1 章    7
◄ VUE開發前奏 ►    7
1.1  網站交互方式    8
1.1.1  多頁WEB應用（MPA）    8
1.1.2  單頁WEB應用（SPA）    9
1.2  先後端分離的開發模式    11
1.3  前端三大開發框架    12
1.4  爲何要學習流行框架（MVVM框架）    13
1.5  框架和庫的區別    14
1.6  模塊化和組件化    14
1.7  後端中的MVC與前端中的MVVM 之間的區別    15
1.8  NODE.JS安裝    16
1.9  PROMISES介紹    17
1.9.1  在PROMISES出現以前的文件讀取方式    17
1.9.2  PROMISES基本概念介紹    19
1.10  ES7語法糖ASYNC/AWAIT    22
1.11  開發工具    23
1.11.1  VISUAL STUDIO CODE    24
1.11.2  VUEDEVTOOLS    25
1.11.3  CHROME    25
第 2 章    26
◄ VUE基礎入門 ►    26
2.1  VUE發展歷史    26
2.2  什麼是VUE.JS    27
2.3  VUE基本代碼    27
2.4  VUE經常使用指令介紹    30
2.4.1  V-CLOAK指令    30
2.4.2  V-HTML指令    32
2.4.3  V-BIND&V-ON指令    33
2.4.4  示例：跑馬燈特效    34
2.5  事件修飾符    35
2.6  V-MODEL雙向數據綁定    40
2.7  V-FOR和KEY屬性    42
2.8  V-IF和V-SHOW    46
2.9  在VUE中使用樣式    47
2.9.1  使用CLASS樣式    47
2.9.2  使用內聯樣式    48
2.10  過濾器    49
2.10.1  全局過濾器    49
2.10.2  私有過濾器    50
2.11  鍵盤修飾符以及自定義鍵盤修飾符    51
2.12  自定義指令    52
2.13  增刪改查示例    53
第 3 章    58
◄ VUE進階 ►    58
3.1  VUE生命週期    58
3.2  AXIOS介紹    61
3.2.1  跨域請求    64
3.2.2  NODE手寫JSONP服務器剖析JSONP原理    65
3.3  VUE過渡動畫    67
3.3.1  單元素/組件的過渡    67
3.3.2  列表過渡    73
第 4 章    75
◄ VUE組件開發 ►    75
4.1  組件介紹    75
4.1.1  全局組件定義的三種方式    75
4.1.2  使用COMPONENTS定義私有組件    77
4.1.3  組件中展現數據和響應事件    77
4.1.4  組件切換    78
4.2  組件傳值    80
4.2.1  父組件向子組件傳值    80
4.2.2  子組件向父組件傳值    81
4.2.3  事件總線（EVENTBUS）    83
4.3  組件案例：留言板    85
4.4  使用REF獲取DOM元素和組件引用    88
4.5  VUEX    90
4.5.1  安裝VUEX    91
4.5.2  配置VUEX的步驟    91
4.6  RENDER函數    94
第 5 章    97
◄ 路由VUE-ROUTER ►    97
5.1  什麼是路由    97
5.1.1 前端路由的原生代碼實現    97
5.2  安裝VUE-ROUTER的兩種方式    98
5.3  VUE-ROUTER的基本使用    99
5.3.1 404    101
5.4  設置選中路由高亮    102
5.5  爲路由切換啓動動畫    103
5.6  路由傳參QUERY&PARAMS    103
5.6.1  QUERY    104
5.6.2  PARAMS    105
5.7  使用CHILDREN屬性實現路由嵌套    105
5.8  使用命名視圖    107
5.9  WATCH監聽    110
5.10  COMPUTED：計算屬性的使用    111
5.11  WATCH、COMPUTED、METHODS的對比    113
5.12  NRM的安裝及使用    114
5.1.3  VUE-ROUTER中編程式導航    115
第 6 章    117
◄ WEBPACK介紹 ►    117
6.1  WEBPACK概念的引入    117
6.2  WEBPACK：最基本的使用方式    118
6.3  WEBPACK最基本的配置文件的使用    121
6.4  WEBPACK-DEV-SERVER的基本使用    122
6.5  使用HTML-WEBPACK-PLUGIN插件 配置啓動頁面    124
6.6  WEBPACK-DEV-SERVER的經常使用命令參數    125
6.7  WEBPACK-DEV-SERVER配置命令的另外一種方式    127
6.8  LOADER：配置處理CSS樣式表的第三方LOADER    127
6.9  LOADER：分析WEBPACK調用第三方LOADER的過程    129
6.10  NPM INSTALL --SAVE 、--SAVE-DEV 、 -D、-S、-G 的區別    130
6.11  LOADER：配置處理LESS文件的LOADER    131
6.12  LOADER-配置處理SCSS文件的LOADER    131
6.13  WEBPACK中URL-LOADER的使用    132
6.14  WEBPACK中使用URL-LOADER處理字體文件    136
6.15  WEBPACK中BABEL的配置    137
第 7 章    140
◄ WEBPACK和VUE的結合 ►    140
7.1  WEBPACK中導入VUE和普通網頁 使用VUE的區別    140
7.1.1  在WEBPACK中使用VUE    140
7.1.2  在WEBPACK中配置.VUE組件頁面總結    146
7.2  EXPORT DEFAULT 和 EXPORT 的使用方式    147
7.3  結合WEBPACK使用VUE-ROUTER    149
7.4  結合WEBPACK實現CHILDREN子路由    152
7.5  組件中STYLE標籤LANG屬性和SCOPED 屬性的介紹    153
7.5.1  重寫子組件中的樣式    154
7.6  抽離路由模塊    156
第 8 章    158
◄ WEBPACK中UI組件的使用 ►    158
8.1  使用餓了麼的MINT UI 組件    158
8.1.1  BUTTON組件    159
8.1.2  TOAST組件    160
8.2  MINT UI按需導入    162
8.3  MUI介紹    164
8.4  MUI的使用    164
8.5  VANT UI    165
8.6  ELEMENT UI    166
8.6.1  引入ELEMENT    166
8.6.2  ELEMENT常見應用場景及解決方案    166
第 9 章    176
◄ 移動圖書商城 ►    176
9.1  MOCKJS介紹    176
9.2  APP首頁設計    177
9.3  使用阿里巴巴矢量庫    178
9.3.1  UNICODE、FONT CLASS和SYMBOL的區別    179
9.3  APP.VUE 組件的基本設置    181
9.3.1  設置路由激活時高亮的兩種方式：    181
9.3.2  實現 TABBAR 頁籤不一樣組件頁面的切換    182
9.3.3  路由切換添加過渡效果    183
9.4  首頁輪播圖    184
9.4.1  什麼是 BASE64 編碼?    187
9.5  首頁九宮格    188
9.6  圖書分類組件    191
9.7  製做頂部滑動導航    194
9.8  製做圖片列表    198
9.9  在ANDROID手機瀏覽器中調試APP    201
9.10  真機調試    202
9.11  封裝輪播組件    204
9.12  商品詳情頁    205
9.12.1  自定義V-TAP指令    208
9.13  購物車小球動畫    209
9.13.1  GETBOUNDINGCLIENTRECT    211
9.14  封裝購買數量組件    211
9.15  設計購物車數據存儲    213
9.16  個人購物車    215
9.17  增長頁面返回    220
9.18  總結    221
第 10 章    222
◄ 天下會管理平臺 ►    222
10.1  VUE前端開發規範    222
10.1.1  統一開發環境    222
10.1.2  技術框架選型    222
10.1.3  命名規範    223
10.1.4  注意事項    224
10.1.5  ESLINT配置JS語法檢查並自動格式化    225
10.2  經過VUE-CLI來搭建項目    227
10.3  完善項目結構    230
10.3.1  設置瀏覽器圖標    230
10.3.2  完善SRC源碼目錄結構    230
10.3.3  引入ELEMENT UI    231
10.3.4  封裝AXIOS請求    231
10.3.5  AJAX跨域支持    236
10.3.6  封裝全局的CSS變量文件    238
10.3.7  VUE-WECHAT-TITLE動態修改TITLE    239
10.3.8  封裝全局的配置文件BASE-CONFIG.JS    239
10.4  項目介紹及其界面設計    240
10.5  項目設計和分析    242
10.5.1  幫主首頁    242
10.5.2  其餘管理界面    244
10.5.3  設計路由    248
10.5.4  設計業務邏輯層    251
10.5.5  VUEX設計    252
10.5.6  權限設計    254
10.5.7  菜單組件    254
10.6  表單驗證    260
10.7  登陸    266
10.7.1  賬號密碼登陸    267
10.7.2  在線生成二維碼    270
10.7.3  製做網站ICO圖標    270
10.7.4  存儲登陸信息    271
10.7.5  回車自動登陸    272
10.7.6  防止登陸按鈕頻繁點擊    272
10.8  增刪改查列表    273