Vue.js 2.x實(shí)踐指南

目  錄

第1章  Vue開(kāi)發(fā)前奏    1
1.1  網(wǎng)站交互方式    1
1.1.1  多頁(yè)Web應(yīng)用（MPA）    2
1.1.2  單頁(yè)Web應(yīng)用（SPA）    2
1.2  前后端分離的開(kāi)發(fā)模式    4
1.3  前端三大開(kāi)發(fā)框架    5
1.4  為什么要學(xué)習(xí)流行框架（MVVM框架）    6
1.5  框架和庫(kù)的區(qū)別    7
1.6  模塊化和組件化    7
1.7  后端中的MVC與前端中的MVVM 之間的區(qū)別    8
1.8  Node.js安裝    9
1.9  Promises介紹    10
1.9.1  在Promises出現(xiàn)之前的文件讀取方式    10
1.9.2  Promises基本概念介紹    12
1.10  ES7語(yǔ)法糖async/await    15
1.11  開(kāi)發(fā)工具    16
1.11.1  Visual Studio Code    16
1.11.2  vuedevtools    17
1.11.3  Chrome    18
第2章  Vue基礎(chǔ)入門    19
2.1  Vue發(fā)展歷史    19
2.2  什么是Vue.js    19
2.3  Vue基本代碼    20
2.4  Vue常用指令介紹    22
2.4.1  v-cloak指令    23
2.4.2  v-html指令    25
2.5  v-bind&v-on指令    25
2.5.1  示例：跑馬燈特效    26
2.5.2  事件修飾符    28
2.6  v-model雙向數(shù)據(jù)綁定    32
2.7  v-for和key屬性    34
2.8  v-if和v-show    37
2.9  在Vue中使用樣式    39
2.9.1  使用class樣式    39
2.9.2  使用內(nèi)聯(lián)樣式    39
2.10  過(guò)濾器    40
2.10.1  全局過(guò)濾器    40
2.10.2  私有過(guò)濾器    41
2.11  鍵盤修飾符以及自定義鍵盤修飾符    42
2.12  自定義指令    43
2.13  增刪改查示例    44
第3章  Vue進(jìn)階    49
3.1  Vue生命周期    49
3.2  axios介紹    51
3.2.1  跨域請(qǐng)求    54
3.2.2  Node手寫(xiě)JSONP服務(wù)器剖析JSONP原理    55
3.3  Vue過(guò)渡動(dòng)畫(huà)    57
3.3.1  單元素/組件的過(guò)渡    57
3.3.2  列表過(guò)渡    63
第4章  Vue組件開(kāi)發(fā)    65
4.1  組件介紹    65
4.1.1  全局組件定義的三種方式    65
4.1.2  使用components定義私有組件    67
4.1.3  組件中展示數(shù)據(jù)和響應(yīng)事件    67
4.1.4  組件切換    68
4.2  組件傳值    70
4.2.1  父組件向子組件傳值    70
4.2.2  子組件向父組件傳值    71
4.3  組件案例：留言板    73
4.4  使用ref獲取DOM元素和組件引用    76
4.5  Vuex    77
4.5.1  安裝Vuex    78
4.5.2  配置Vuex的步驟    78
4.6  render函數(shù)    81
第5章  路由vue-router    84
5.1  什么是路由    84
5.2  安裝vue-router的兩種方式    84
5.3  vue-router的基本使用    85
5.4  設(shè)置選中路由高亮    87
5.5  為路由切換啟動(dòng)動(dòng)畫(huà)    88
5.6  路由傳參query&params    89
5.6.1  query    89
5.6.2  params    90
5.7  使用children屬性實(shí)現(xiàn)路由嵌套    91
5.8  使用命名視圖    93
5.9  watch監(jiān)聽(tīng)    95
5.10  computed：計(jì)算屬性的使用    96
5.11  watch、computed、methods的對(duì)比    98
5.12  nrm的安裝及使用    99
5.13  vue-router中編程式導(dǎo)航    100
第6章  webpack介紹    101
6.1  webpack概念的引入    101
6.2  webpack：最基本的使用方式    102
6.3  webpack最基本的配置文件的使用    105
6.4  webpack-dev-server的基本使用    106
6.5  使用html-webpack-plugin插件配置啟動(dòng)頁(yè)面    107
6.6  webpack-dev-server的常用命令參數(shù)    108
6.7  webpack-dev-server配置命令的另一種方式    110
6.8  配置處理css樣式表的第三方loader    111
6.9  分析webpack調(diào)用第三方loader的過(guò)程    112
6.10  npm install--save、--save-dev、-D、-S、-g的區(qū)別    113
6.11  配置處理less文件的loader    113
6.12  配置處理scss文件的loader    114
6.13  webpack中url-loader的使用    114
6.14  webpack中使用url-loader處理字體文件    118
6.15  webpack中Babel的配置    119

第7章  webpack和Vue的結(jié)合    122
7.1  webpack中導(dǎo)入Vue和普通網(wǎng)頁(yè)使用Vue的區(qū)別    122
7.1.1  在webpack中使用Vue    122
7.1.2  在webpack中配置.vue組件頁(yè)面總結(jié)    128
7.2  export default和export的使用方式    129
7.3  結(jié)合webpack使用vue-router    131
7.4  結(jié)合webpack實(shí)現(xiàn)children子路由    134
7.5  組件中style標(biāo)簽lang屬性和scoped屬性的介紹    135
7.6  抽離路由模塊    138
第8章  webpack中UI組件的使用    140
8.1  使用餓了么的Mint UI組件    140
8.1.1  button組件    141
8.1.2  Toast組件    142
8.2  Mint UI按需導(dǎo)入    144
8.3  MUI介紹    145
8.4  MUI的使用    146
8.5  Vant UI    147
8.6  Element UI    147
8.6.1  引入Element    148
8.6.2  Element常見(jiàn)應(yīng)用場(chǎng)景及解決方案    148
第9章  移動(dòng)圖書(shū)商城    157
9.1  mockjs介紹    157
9.2  App首頁(yè)設(shè)計(jì)    158
9.3  使用阿里巴巴矢量庫(kù)    159
9.4  App.vue 組件的基本設(shè)置    162
9.4.1  設(shè)置路由激活時(shí)高亮的兩種方式    162
9.4.2  實(shí)現(xiàn)tabbar頁(yè)簽不同組件頁(yè)面的切換    163
9.4.3  路由切換添加過(guò)渡效果    164
9.5  首頁(yè)輪播圖    165
9.6  首頁(yè)九宮格    169
9.7  圖書(shū)分類組件    172
9.8  制作頂部滑動(dòng)導(dǎo)航    174
9.9  制作圖片列表    179
9.10  在Android手機(jī)瀏覽器中調(diào)試App    182
9.11  真機(jī)調(diào)試    182
9.12  封裝輪播組件    184
9.13  商品詳情頁(yè)    185
9.14  購(gòu)物車小球動(dòng)畫(huà)    189
9.15  封裝購(gòu)買數(shù)量組件    191
9.16  設(shè)計(jì)購(gòu)物車數(shù)據(jù)存儲(chǔ)    193
9.17  我的購(gòu)物車    194
9.18  增加頁(yè)面返回    199
9.19  總結(jié)    200
第10章  天下會(huì)管理平臺(tái)    201
10.1  Vue前端開(kāi)發(fā)規(guī)范    201
10.1.1  統(tǒng)一開(kāi)發(fā)環(huán)境    201
10.1.2  技術(shù)框架選型    201
10.1.3  命名規(guī)范    202
10.1.4  注意事項(xiàng)    203
10.1.5  ESlint配置js語(yǔ)法檢查并自動(dòng)格式化    204
10.2  通過(guò)vue-cli來(lái)搭建項(xiàng)目    206
10.3  完善項(xiàng)目結(jié)構(gòu)    209
10.3.1  設(shè)置瀏覽器圖標(biāo)    209
10.3.2  完善src源碼目錄結(jié)構(gòu)    209
10.3.3  引入Element UI    210
10.3.4  封裝axios請(qǐng)求    210
10.3.5  Ajax跨域支持    215
10.3.6  封裝全局的css變量文件    216
10.3.7  vue-wechat-title動(dòng)態(tài)修改title    217
10.3.8  封裝全局的配置文件base-config.js    218
10.4  項(xiàng)目介紹及其界面設(shè)計(jì)    218
10.5  項(xiàng)目設(shè)計(jì)和分析    220
10.5.1  幫主首頁(yè)    221
10.5.2  其他管理界面    222
10.5.3  設(shè)計(jì)路由    226
10.5.4  設(shè)計(jì)業(yè)務(wù)邏輯層    229
10.5.5  Vuex設(shè)計(jì)    230
10.5.6  權(quán)限設(shè)計(jì)    231
10.5.7  菜單組件    232
10.6  表單驗(yàn)證    237
10.7  登錄    244
10.7.1  賬號(hào)密碼登錄    244
10.7.2  在線生成二維碼    247
10.7.3  制作網(wǎng)站ico圖標(biāo)    247
10.7.4  存儲(chǔ)登錄信息    248
10.7.5  回車自動(dòng)登錄    249
10.7.6  防止登錄按鈕頻繁點(diǎn)擊    249
10.8  增刪改查列表    250
后記    259