Vue.js快速入門

目  錄

第1章  Vue.js概述    1
1.1  單頁(yè)應(yīng)用的出現(xiàn)    1
1.2  為什么要使用Vue.js    2
1.2.1  單頁(yè)應(yīng)用    2
1.2.2  知名的單頁(yè)應(yīng)用（SPA）框架對(duì)比    5
1.2.3  被騰訊和阿里巴巴所青睞    9
1.2.4  用到Vue.js的項(xiàng)目    9
第2章  原生的Vue.js    10
2.1  極速入門    10
2.2  實(shí)際項(xiàng)目    11
2.2.1  運(yùn)行整個(gè)項(xiàng)目    12
2.2.2  HTML代碼的部分    18
2.2.3  HTML代碼的部分    19
2.2.4  js代碼部分    21
2.2.5  小結(jié)    25
第3章  Webpack+Vue.js開(kāi)發(fā)準(zhǔn)備    26
3.1  學(xué)習(xí)過(guò)程    26
3.1.1  可以跳過(guò)的章節(jié)    26
3.1.2  簡(jiǎn)寫說(shuō)明    26
3.1.3  本書(shū)例子文件下載    27
3.2  NVM、NPM與Node    27
3.2.1  Windows下的安裝    28
3.2.2  Linux、Mac下的安裝    31
3.2.3  運(yùn)行    31
3.2.4  使用NVM安裝或管理node版本    32
3.2.5  刪除NVM    33
3.2.6  加快NVM和NPM的下載速度    33
3.3  Git在Windows下的使用    34
3.3.1  為什么要使用Git Bash    34
3.3.2  安裝git客戶端    35
3.3.3  使用Git Bash    40
3.4  Webpack    41
3.4.1  Webpack功能    42
3.4.2  Webpack安裝與使用    43
3.5  開(kāi)發(fā)環(huán)境的搭建    44
3.5.1  安裝Vue.js    44
3.5.2  運(yùn)行 vue    44
3.6  Webpack下的Vue.js項(xiàng)目文件結(jié)構(gòu)    45
3.6.1  build文件夾    46
3.6.2  config 文件夾    46
3.6.3  dist文件夾    47
3.6.4  node_modules 文件夾    47
3.6.5  src 文件夾    49
第4章  Webpack+Vue.js實(shí)戰(zhàn)    50
4.1  創(chuàng)建一個(gè)頁(yè)面    50
4.1.1  新建路由    50
4.1.2  創(chuàng)建一個(gè)新的Component    51
4.1.3  為頁(yè)面添加樣式    52
4.1.4  定義并顯示變量    53
4.2  Vue.js中的ECMAScript    55
4.2.1  let、var、常量與全局變量    55
4.2.2  導(dǎo)入代碼：import    56
4.2.3  方便其他代碼使用自己: export default {..}    56
4.2.4  ES中的簡(jiǎn)寫    57
4.2.5  箭頭函數(shù)=>    57
4.2.6  hash中同名的key、value的簡(jiǎn)寫    58
4.2.7  分號(hào)可以省略    58
4.2.8  解構(gòu)賦值    58
4.3  Vue.js 渲染頁(yè)面的過(guò)程和原理    59
4.3.1  渲染過(guò)程1：js入口文件    59
4.3.2  渲染過(guò)程2：靜態(tài)的HTML頁(yè)面（index.html）    61
4.3.3  渲染過(guò)程3：main.js中的Vue定義    62
4.3.4  渲染原理與實(shí)例    63
4.4  視圖中的渲染    64
4.4.1  渲染某個(gè)變量    64
4.4.2  方法的聲明和調(diào)用    65
4.4.3  事件處理：v-on    66
4.5  視圖中的Directive（指令）    67
4.5.1  前提：在directive中使用表達(dá)式（Expression）    67
4.5.2  循環(huán)：v-for    67
4.5.3  判斷：v-if    69
4.5.4  v-if與v-for的優(yōu)先級(jí)    70
4.5.5  v-bind    72
4.5.6  v-on    73
4.5.7  v-model 與雙向綁定    75
4.6  發(fā)送http請(qǐng)求    77
4.6.1  調(diào)用http請(qǐng)求    78
4.6.2  遠(yuǎn)程接口的格式    80
4.6.3  設(shè)置Vue.js開(kāi)發(fā)服務(wù)器的代理    81
4.6.4  打開(kāi)頁(yè)面，查看http請(qǐng)求    83
4.6.5  把結(jié)果渲染到頁(yè)面中    84
4.6.6  如何發(fā)起post請(qǐng)求    85
4.7  不同頁(yè)面間的參數(shù)傳遞    86
4.7.1  回顧：現(xiàn)有的接口    86
4.7.2  顯示博客詳情頁(yè)    87
4.7.3  新增路由    88
4.7.4  修改博客列表頁(yè)的跳轉(zhuǎn)方式1：使用事件    89
4.7.5  修改博客列表頁(yè)的跳轉(zhuǎn)方式2：使用v-link    91
4.8  路由    92
4.8.1  基本用法    92
4.8.2  跳轉(zhuǎn)到某個(gè)路由時(shí)帶上參數(shù)    93
4.8.3  根據(jù)路由獲取參數(shù)    94
4.9  使用樣式    94
4.10  雙向綁定    96
4.11  表單項(xiàng)目的綁定    99
4.12  表單的提交    102
4.13  Component 組件    105
4.13.1  如何查看文檔    105
4.13.2  Component的重要作用: 重用代碼    106
4.13.3  組件的創(chuàng)建    106
4.13.4  向組件中傳遞參數(shù)    108
4.13.5  脫離Webpack，在原生Vue.js中創(chuàng)建component    110

第5章  運(yùn)維和發(fā)布Vue.js項(xiàng)目    112
5.1  打包和部署    112
5.1.1  打包    112
5.1.2  部署    114
5.2  解決域名問(wèn)題與跨域問(wèn)題    117
5.2.1  域名404 問(wèn)題    118
5.2.2  跨域問(wèn)題    119
5.2.3  解決域名問(wèn)題和跨域問(wèn)題    120
5.3  如何Debug    122
5.3.1  時(shí)刻留意本地開(kāi)發(fā)服務(wù)器    122
5.3.2  看developer tools提出的日志    122
5.3.3  查看頁(yè)面給出的錯(cuò)誤提示    123
5.4  基本命令    125
5.4.1  建立新項(xiàng)目    125
5.4.2  安裝所有的第三方包    125
5.4.3  在本地運(yùn)行    126
5.4.4  打包編譯    127
第6章  進(jìn)階知識(shí)    128
6.1  js的作用域與this    128
6.1.1  作用域    128
6.1.2  this    130
6.1.3  實(shí)戰(zhàn)經(jīng)驗(yàn)    131
6.2  Mixin    133
6.3  使用Computed Properties（計(jì)算得到的屬性）和watchers（監(jiān)聽(tīng)器）    135
6.3.1  典型例子    135
6.3.2  Computed Properties 與 普通方法的區(qū)別    136
6.3.3  watched property    137
6.3.4  Computed Property的setter（賦值函數(shù))    140
6.4  Component（組件）進(jìn)階    141
6.4.1  實(shí)際項(xiàng)目中的Component    142
6.4.2  Prop    144
6.4.3  Attribute    146
6.5  Slot    146
6.5.1  普通的Slot    147
6.5.2  named slot    148
6.5.3  slot 的默認(rèn)值    149
6.6  Vuex    150
6.6.1  正常使用的順序    150
6.6.2  Computed屬性    154
6.6.3  Vuex原理圖    155
6.7  Vue.js的生命周期    156
6.8  最佳實(shí)踐    157
6.9  Event Handler 事件處理    158
6.9.1  支持的Event    158
6.9.2  使用 v-on 進(jìn)行事件綁定    159
6.10  與CSS預(yù)處理器結(jié)合使用    168
6.10.1  SCSS    168
6.10.2  LESS    169
6.10.3  SASS    170
6.10.4  在Vue.js中使用CSS預(yù)編譯器    171
6.11  自定義 Directive    172
6.11.1  例子    172
6.11.2  自定義Directive的命名方法    173
6.11.3  鉤子方法（Hook Functions）    174
6.11.4  自定義Directive可以接收到的參數(shù)    174
6.11.5  實(shí)戰(zhàn)經(jīng)驗(yàn)    175
第7章  實(shí)戰(zhàn)周邊及相關(guān)工具    176
7.1  微信支付    176
7.2  Hybrid App：混合式App    177
7.3  安裝 Vue.js的開(kāi)發(fā)工具： Vue.js devtool    178
7.4  如何閱讀官方文檔    181
第8章  實(shí)戰(zhàn)項(xiàng)目    183
8.1  準(zhǔn)備1：文字需求    183
8.2  準(zhǔn)備2：需求原型圖    186
8.2.1  明確前端頁(yè)面    186
8.2.2  如何畫原型圖    186
8.2.3  首頁(yè)    186
8.2.4  商品列表頁(yè)    187
8.2.5  商品詳情頁(yè)    187
8.2.6  購(gòu)物車頁(yè)面    188
8.2.7  支付頁(yè)面    188
8.2.8  我的頁(yè)面    189
8.2.9  我的訂單列表頁(yè)面    189
8.2.10  總結(jié)    190
8.3  準(zhǔn)備3：微信的相關(guān)賬號(hào)和開(kāi)發(fā)者工具    190
8.3.1  微信相關(guān)賬號(hào)的申請(qǐng)    190
8.3.2  微信開(kāi)發(fā)者工具    190
8.4  項(xiàng)目的搭建    192
8.5  用戶的注冊(cè)和微信授權(quán)    193
8.6  登錄狀態(tài)的保持    202
8.7  首頁(yè)輪播圖    203
8.8  底部Tab    213
8.9  商品列表頁(yè)    217
8.10  商品詳情頁(yè)    219
8.11  購(gòu)物車    225
8.13  微信支付    233
8.14  回顧    244