Vue.js快速入門

目  錄

第1章  Vue.js概述    1
1.1  單頁應(yīng)用的出現(xiàn)    1
1.2  為什么要使用Vue.js    2
1.2.1  單頁應(yīng)用    2
1.2.2  知名的單頁應(yīng)用（SPA）框架對比    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開發(fā)準(zhǔn)備    26
3.1  學(xué)習(xí)過程    26
3.1.1  可以跳過的章節(jié)    26
3.1.2  簡寫說明    26
3.1.3  本書例子文件下載    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  開發(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è)頁面    50
4.1.1  新建路由    50
4.1.2  創(chuàng)建一個(gè)新的Component    51
4.1.3  為頁面添加樣式    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中的簡寫    57
4.2.5  箭頭函數(shù)=>    57
4.2.6  hash中同名的key、value的簡寫    58
4.2.7  分號可以省略    58
4.2.8  解構(gòu)賦值    58
4.3  Vue.js 渲染頁面的過程和原理    59
4.3.1  渲染過程1：js入口文件    59
4.3.2  渲染過程2：靜態(tài)的HTML頁面（index.html）    61
4.3.3  渲染過程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)先級    70
4.5.5  v-bind    72
4.5.6  v-on    73
4.5.7  v-model 與雙向綁定    75
4.6  發(fā)送http請求    77
4.6.1  調(diào)用http請求    78
4.6.2  遠(yuǎn)程接口的格式    80
4.6.3  設(shè)置Vue.js開發(fā)服務(wù)器的代理    81
4.6.4  打開頁面，查看http請求    83
4.6.5  把結(jié)果渲染到頁面中    84
4.6.6  如何發(fā)起post請求    85
4.7  不同頁面間的參數(shù)傳遞    86
4.7.1  回顧：現(xiàn)有的接口    86
4.7.2  顯示博客詳情頁    87
4.7.3  新增路由    88
4.7.4  修改博客列表頁的跳轉(zhuǎn)方式1：使用事件    89
4.7.5  修改博客列表頁的跳轉(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  解決域名問題與跨域問題    117
5.2.1  域名404 問題    118
5.2.2  跨域問題    119
5.2.3  解決域名問題和跨域問題    120
5.3  如何Debug    122
5.3.1  時(shí)刻留意本地開發(fā)服務(wù)器    122
5.3.2  看developer tools提出的日志    122
5.3.3  查看頁面給出的錯(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)階知識    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)聽器）    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的開發(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  明確前端頁面    186
8.2.2  如何畫原型圖    186
8.2.3  首頁    186
8.2.4  商品列表頁    187
8.2.5  商品詳情頁    187
8.2.6  購物車頁面    188
8.2.7  支付頁面    188
8.2.8  我的頁面    189
8.2.9  我的訂單列表頁面    189
8.2.10  總結(jié)    190
8.3  準(zhǔn)備3：微信的相關(guān)賬號和開發(fā)者工具    190
8.3.1  微信相關(guān)賬號的申請    190
8.3.2  微信開發(fā)者工具    190
8.4  項(xiàng)目的搭建    192
8.5  用戶的注冊和微信授權(quán)    193
8.6  登錄狀態(tài)的保持    202
8.7  首頁輪播圖    203
8.8  底部Tab    213
8.9  商品列表頁    217
8.10  商品詳情頁    219
8.11  購物車    225
8.13  微信支付    233
8.14  回顧    244