産品特色
編輯推薦
適讀人群 :Vue.js初學者 Vue.js開發者 Vues.js培訓機構使用教材 Vue.js作者尤雨溪作推薦序
業界前端大腕 TalkingData 研發副總裁,馬驥;w3cplus.com站長,大漠;在綫迴聲前端技術專傢,justjavac(迷渡);laravel-china.org站長,Summer 聯袂推薦! Vue社區iView組件貢獻者,前端大神梁灝執筆編撰,突齣實戰,應用為王。
內容簡介
《 Vue.js實戰》》以Vue.js 2為基礎,以項目實戰的方式來引導讀者漸進式學習Vue.js。《Vue.js實戰》分為基礎篇、進階篇和實戰篇三部分。基礎篇主要是對 Vue.js 核心功能的介紹;進階篇主要講解前端工程化Vue.js的組件化、插件的使用;實戰篇著重開發瞭兩個完整的示例,所涉及的內容涵蓋Vue.js絕大部分API。通過閱讀《 Vue.js實戰》,讀者能夠掌握Vue.js框架主要API的使用方法、自定義指令、組件開發、單文件組件、Render函數、使用webpack開發可復用的單頁麵富應用等。
《 Vue.js實戰》示例豐富、側重實戰,適用於剛接觸或即將接觸Vue.js的開發者,也適用於對Vue.js有過開發經驗,但需要進一步提升的開發者。
作者簡介
梁灝:網名 Aresn,基於 Vue.js 的開源 UI 組件庫 iView 的作者。目前在大數據公司 TalkingData 負責可視化基礎架構。創辦瞭程序員社區 TalkingCoder。
目錄
目 錄
第1篇 基礎篇
第1章 初識Vue.js 3
1.1 Vue.js是什麼 3
1.1.1 MVVM模式 3
1.1.2 Vue.js有什麼不同 4
1.2 如何使用Vue.js 5
1.2.1 傳統的前端開發模式 5
1.2.2 Vue.js的開發模式 5
第2章 數據綁定和第一個Vue應用 8
2.1 Vue實例與數據綁定 9
2.1.1 實例與數據 9
2.1.2 生命周期 10
2.1.3 插值與錶達式 11
2.1.4 過濾器 13
2.2 指令與事件 15
2.3 語法糖 18
第3章 計算屬性 19
3.1 什麼是計算屬性 19
3.2 計算屬性用法 20
3.3 計算屬性緩存 23
第4章 v-bind及class與style綁定 25
4.1 瞭解v-bind指令 25
4.2 綁定class的幾種方式 26
4.2.1 對象語法 26
4.2.2 數組語法 27
4.2.3 在組件上使用 29
4.3 綁定內聯樣式 30
第5章 內置指令 32
5.1 基本指令 32
5.1.1 v-cloak 32
5.1.2 v-once 33
5.2 條件渲染指令 33
5.2.1 v-if、v-else-if、v-else 33
5.2.2 v-show 36
5.2.3 v-if與v-show的選擇 36
5.3 列錶渲染指令v-for 37
5.3.1 基本用法 37
5.3.2 數組更新 41
5.3.3 過濾與排序 43
5.4 方法與事件 44
5.4.1 基本用法 44
5.4.2 修飾符 46
5.5 實戰:利用計算屬性、指令等知識開發購物車 47
第6章 錶單與v-model 55
6.1 基本用法 55
6.2 綁定值 61
6.3 修飾符 63
第7章 組件詳解 65
7.1 組件與復用 65
7.1.1 為什麼使用組件 65
7.1.2 組件用法 66
7.2 使用props傳遞數據 70
7.2.1 基本用法 70
7.2.2 單嚮數據流 72
7.2.3 數據驗證 74
7.3 組件通信 75
7.3.1 自定義事件 75
7.3.2 使用v-model 77
7.3.3 非父子組件通信 79
7.4 使用slot分發內容 83
7.4.1 什麼是slot 83
7.4.2 作用域 84
7.4.3 slot用法 85
7.4.4 作用域插槽 87
7.4.5 訪問slot 89
7.5 組件高級用法 90
7.5.1 遞歸組件 90
7.5.2 內聯模闆 92
7.5.3 動態組件 93
7.5.4 異步組件 94
7.6 其他 95
7.6.1 $nextTick 95
7.6.2 X-Templates 96
7.6.3 手動掛載實例 97
7.7 實戰:兩個常用組件的開發 98
7.7.1 開發一個數字輸入框組件 98
7.7.2 開發一個標簽頁組件 106
第8章 自定義指令 118
8.1 基本用法 118
8.2 實戰 121
8.2.1 開發一個可從外部關閉的下拉菜單 121
8.2.2 開發一個實時時間轉換指令v-time 126
第2篇 進階篇
第9章 Render函數 133
9.1 什麼是Virtual Dom 133
9.2 什麼是Render函數 136
9.3 createElement用法 140
9.3.1 基本參數 140
9.3.2 約束 143
9.3.3 使用JavaScript代替模闆功能 147
9.4 函數化組件 153
9.5 JSX 157
9.6 實戰:使用Render函數開發可排序的錶格組件 159
9.7 實戰:留言列錶 172
9.8 總結 183
第10章 使用webpack 184
10.1 前端工程化與webpack 184
10.2 webpack基礎配置 187
10.2.1 安裝webpack與webpack-dev-server 187
10.2.2 就是一個js文件而已 188
10.2.3 逐步完善配置文件 191
10.3 單文件組件與vue-loader 194
10.4 用於生産環境 201
第11章 插件 206
11.1 前端路由與vue-router 207
11.1.1 什麼是前端路由 207
11.1.2 vue-router基本用法 208
11.1.3 跳轉 212
11.1.4 高級用法 213
11.2 狀態管理與Vuex 216
11.2.1 狀態管理與使用場景 216
11.2.2 Vuex基本用法 217
11.2.3 高級用法 221
11.3 實戰:中央事件總綫插件vue-bus 227
第3篇 實戰篇
第12章 iView經典組件剖析 235
12.1 級聯選擇組件Cascader 236
12.2 摺疊麵闆組件Collapse 249
12.3 iView內置工具函數 257
第13章 實戰:知乎日報項目開發 261
13.1 分析與準備 261
13.2 推薦列錶與分類 265
13.2.1 搭建基本結構 265
13.2.2 主題日報 267
13.2.3 每日推薦 271
13.2.4 自動加載更多推薦列錶 276
13.3 文章詳情頁 278
13.3.1 加載內容 278
13.3.2 加載評論 281
13.4 總結 286
第14章 實戰:電商網站項目開發 288
14.1 項目工程搭建 288
14.2 商品列錶頁 290
14.2.1 需求分析與模塊拆分 290
14.2.2 商品簡介組件 291
14.2.3 列錶按照價格、銷量排序 297
14.2.4 列錶按照品牌、顔色篩選 306
14.3 商品詳情頁 309
14.4 購 物 車 313
14.4.1 準備數據 314
14.4.2 顯示和操作數據 316
14.4.3 使用優惠碼 320
14.5 總結 324
第15章 相關開源項目介紹 325
15.1 服務端渲染與Nuxt.js 325
15.1.1 是否需要服務端渲染 325
15.1.2 Nuxt.js 326
15.2 HTTP庫axios 327
15.3 多語言插件vue-i18n 329
精彩書摘
第5章 內置指令
迴顧一下第2.2節,我們已經介紹過指令(Directive)的概念瞭,Vue.js的指令是帶有特殊前綴“v-”的HTML特性,它綁定一個錶達式,並將一些特性應用到DOM上。其實我們已經用到過很多 Vue內置的指令,比如v-html、v-pre,還有上一章的v-bind。本章將繼續介紹 Vue.js中更多常用的內置指令。
5.1 基本指令
5.1.1 v-cloak
v-cloak不需要錶達式,它會在Vue實例結束編譯時從綁定的HTML元素上移除,經常和CSS的display: none; 配閤使用:
{{ message }}
這時雖然已經加瞭指令v-cloak,但其實並沒有起到任何作用,當網速較慢、Vue.js文件還沒加載完時,在頁麵上會顯示{{ message }}的字樣,直到Vue創建實例、編譯模闆時,DOM纔會被替換,所以這個過程屏幕是有閃動的。隻要加一句 CSS就可以解決這個問題瞭:
[v-cloak] {
display: none;
}
在一般情況下,v-cloak是一個解決初始化慢導緻頁麵閃動的最佳實踐,對於簡單的項目很實用,但是在具有工程化的項目裏,比如後麵進階篇將介紹 webpack和vue-router時,項目的HTML結構隻有一個空的div元素,剩餘的內容都是由路由去掛載不同組件完成的,所以不再需要v-cloak。
5.1.2 v-once
v-once 也是一個不需要錶達式的指令,作用是定義它的元素或組件隻渲染一次,包括元素或組件的所有子節點。首次渲染後,不再隨數據的變化重新渲染,將被視為靜態內容,例如:
{{ message }} {{ message }} v-once在業務中也很少使用,當你需要進一步優化性能時,可能會用到。
5.2 條件渲染指令
5.2.1 v-if、v-else-if、v-else
與JavaScript的條件語句if、else、else if類似,Vue.js的條件指令可以根據錶達式的值在DOM中渲染或銷毀元素/組件,例如:
當status為1時顯示該行
當status為2時顯示該行
否則顯示該行
Vue.js實戰 下載 mobi epub pdf txt 電子書 格式