xxxfreesexmoves-haodiaocao这里只有精品视频-欧美性受黑人性爽-欧美性受xxxxxx黑人xyx性爽|www.jsyyzsb.com

    本書以Vue.js 2為基礎(chǔ)，以項(xiàng)目實(shí)戰(zhàn)的方式來引導(dǎo)讀者漸進(jìn)式學(xué)習(xí)Vue.js。本書分為基礎(chǔ)篇、進(jìn)階篇和實(shí)戰(zhàn)篇三部分。基礎(chǔ)篇主要是對 Vue.js 核心功能的介紹；進(jìn)階篇主要講解前端工程化Vue.js的組件化、插件的使用；實(shí)戰(zhàn)篇著重開發(fā)了兩個(gè)完整的示例，所涉及的內(nèi)容涵蓋Vue.js絕大部分API。通過閱讀本書，讀者能夠掌握Vue.js框架主要API的使用方法、自定義指令、組件開發(fā)、單文件組件、Render函數(shù)、使用webpack開發(fā)可復(fù)用的單頁面富應(yīng)用等。 本書示例豐富、側(cè)重實(shí)戰(zhàn)，適用于剛接觸或即將接觸Vue.js的開發(fā)者，也適用于對Vue.js有過開發(fā)經(jīng)驗(yàn)，但需要進(jìn)一步提升的開發(fā)者。

Vue.js作者尤雨溪作推薦序
    業(yè)界前端大腕 TalkingData 研發(fā)副總裁,馬驥;w3cplus.com站長,大漠;在線回聲前端技術(shù)專家,justjavac（迷渡）;laravel-china.org站長,Summer 聯(lián)袂推薦！ Vue社區(qū)iView組件貢獻(xiàn)者，前端大神梁灝執(zhí)筆編撰，突出實(shí)戰(zhàn)，應(yīng)用為王。

    梁灝:網(wǎng)名 Aresn，基于 Vue.js 的開源 UI 組件庫 iView 的作者。目前在大數(shù)據(jù)公司 TalkingData 負(fù)責(zé)可視化基礎(chǔ)架構(gòu)。創(chuàng)辦了程序員社區(qū) TalkingCoder。

目 錄 
第1篇 基礎(chǔ)篇 
第1章 初識(shí)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 傳統(tǒng)的前端開發(fā)模式 5 
1.2.2 Vue.js的開發(fā)模式 5 
第2章 數(shù)據(jù)綁定和第一個(gè)Vue應(yīng)用 8 
2.1 Vue實(shí)例與數(shù)據(jù)綁定 9 
2.1.1 實(shí)例與數(shù)據(jù) 9 
2.1.2 生命周期 10 
2.1.3 插值與表達(dá)式 11 
2.1.4 過濾器 13 
2.2 指令與事件 15 
2.3 語法糖 18 
第3章 計(jì)算屬性 19 
3.1 什么是計(jì)算屬性 19 
3.2 計(jì)算屬性用法 20 
3.3 計(jì)算屬性緩存 23 
第4章 v-bind及class與style綁定 25 
4.1 了解v-bind指令 25 
4.2 綁定class的幾種方式 26 
4.2.1 對象語法 26 
4.2.2 數(shù)組語法 27 
4.2.3 在組件上使用 29 
4.3 綁定內(nèi)聯(lián)樣式 30 
第5章 內(nèi)置指令 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 數(shù)組更新 41 
5.3.3 過濾與排序 43 
5.4 方法與事件 44 
5.4.1 基本用法 44 
5.4.2 修飾符 46 
5.5 實(shí)戰(zhàn)：利用計(jì)算屬性、指令等知識(shí)開發(fā)購物車 47 
第6章 表單與v-model 55 
6.1 基本用法 55 
6.2 綁定值 61 
6.3 修飾符 63 
第7章 組件詳解 65 
7.1 組件與復(fù)用 65 
7.1.1 為什么使用組件 65 
7.1.2 組件用法 66 
7.2 使用props傳遞數(shù)據(jù) 70 
7.2.1 基本用法 70 
7.2.2 單向數(shù)據(jù)流 72 
7.2.3 數(shù)據(jù)驗(yàn)證 74 
7.3 組件通信 75 
7.3.1 自定義事件 75 
7.3.2 使用v-model 77 
7.3.3 非父子組件通信 79 
7.4 使用slot分發(fā)內(nèi)容 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 內(nèi)聯(lián)模板 92 
7.5.3 動(dòng)態(tài)組件 93 
7.5.4 異步組件 94 
7.6 其他 95 
7.6.1 $nextTick 95 
7.6.2 X-Templates 96 
7.6.3 手動(dòng)掛載實(shí)例 97 
7.7 實(shí)戰(zhàn)：兩個(gè)常用組件的開發(fā) 98 
7.7.1 開發(fā)一個(gè)數(shù)字輸入框組件 98 
7.7.2 開發(fā)一個(gè)標(biāo)簽頁組件 106 
第8章 自定義指令 118 
8.1 基本用法 118 
8.2 實(shí)戰(zhàn) 121 
8.2.1 開發(fā)一個(gè)可從外部關(guān)閉的下拉菜單 121 
8.2.2 開發(fā)一個(gè)實(shí)時(shí)時(shí)間轉(zhuǎn)換指令v-time 126 
第2篇 進(jìn)階篇 
第9章 Render函數(shù) 133 
9.1 什么是Virtual Dom 133 
9.2 什么是Render函數(shù) 136 
9.3 createElement用法 140 
9.3.1 基本參數(shù) 140 
9.3.2 約束 143 
9.3.3 使用JavaScript代替模板功能 147 
9.4 函數(shù)化組件 153 
9.5 JSX 157 
9.6 實(shí)戰(zhàn)：使用Render函數(shù)開發(fā)可排序的表格組件 159 
9.7 實(shí)戰(zhàn)：留言列表 172 
9.8 總結(jié) 183 
第10章 使用webpack 184 
10.1 前端工程化與webpack 184 
10.2 webpack基礎(chǔ)配置 187 
10.2.1 安裝webpack與webpack-dev-server 187 
10.2.2 就是一個(gè)js文件而已 188 
10.2.3 逐步完善配置文件 191 
10.3 單文件組件與vue-loader 194 
10.4 用于生產(chǎn)環(huán)境 201 
第11章 插件 206 
11.1 前端路由與vue-router 207 
11.1.1 什么是前端路由 207 
11.1.2 vue-router基本用法 208 
11.1.3 跳轉(zhuǎn) 212 
11.1.4 高級用法 213 
11.2 狀態(tài)管理與Vuex 216 
11.2.1 狀態(tài)管理與使用場景 216 
11.2.2 Vuex基本用法 217 
11.2.3 高級用法 221 
11.3 實(shí)戰(zhàn)：中央事件總線插件vue-bus 227 
第3篇 實(shí)戰(zhàn)篇 
第12章 iView經(jīng)典組件剖析 235 
12.1 級聯(lián)選擇組件Cascader 236 
12.2 折疊面板組件Collapse 249 
12.3 iView內(nèi)置工具函數(shù) 257 
第13章 實(shí)戰(zhàn)：知乎日報(bào)項(xiàng)目開發(fā) 261 
13.1 分析與準(zhǔn)備 261 
13.2 推薦列表與分類 265 
13.2.1 搭建基本結(jié)構(gòu) 265 
13.2.2 主題日報(bào) 267 
13.2.3 每日推薦 271 
13.2.4 自動(dòng)加載更多推薦列表 276 
13.3 文章詳情頁 278 
13.3.1 加載內(nèi)容 278 
13.3.2 加載評論 281 
13.4 總結(jié) 286 
第14章 實(shí)戰(zhàn)：電商網(wǎng)站項(xiàng)目開發(fā) 288 
14.1 項(xiàng)目工程搭建 288 
14.2 商品列表頁 290 
14.2.1 需求分析與模塊拆分 290 
14.2.2 商品簡介組件 291 
14.2.3 列表按照價(jià)格、銷量排序 297 
14.2.4 列表按照品牌、顏色篩選 306 
14.3 商品詳情頁 309 
14.4 購 物 車 313 
14.4.1 準(zhǔn)備數(shù)據(jù) 314 
14.4.2 顯示和操作數(shù)據(jù) 316 
14.4.3 使用優(yōu)惠碼 320 
14.5 總結(jié) 324 
第15章 相關(guān)開源項(xiàng)目介紹 325 
15.1 服務(wù)端渲染與Nuxt.js 325 
15.1.1 是否需要服務(wù)端渲染 325 
15.1.2 Nuxt.js 326 
15.2 HTTP庫axios 327 
15.3 多語言插件vue-i18n 329 

第5章 內(nèi)置指令 
回顧一下第2.2節(jié)，我們已經(jīng)介紹過指令（Directive）的概念了，Vue.js的指令是帶有特殊前綴“v-”的HTML特性，它綁定一個(gè)表達(dá)式，并將一些特性應(yīng)用到DOM上。其實(shí)我們已經(jīng)用到過很多 Vue內(nèi)置的指令，比如v-html、v-pre，還有上一章的v-bind。本章將繼續(xù)介紹 Vue.js中更多常用的內(nèi)置指令。 
5.1 基本指令 
5.1.1 v-cloak 
v-cloak不需要表達(dá)式，它會(huì)在Vue實(shí)例結(jié)束編譯時(shí)從綁定的HTML元素上移除，經(jīng)常和CSS的display: none; 配合使用： 


{{ message }} 




這時(shí)雖然已經(jīng)加了指令v-cloak，但其實(shí)并沒有起到任何作用，當(dāng)網(wǎng)速較慢、Vue.js文件還沒加載完時(shí)，在頁面上會(huì)顯示{{ message }}的字樣，直到Vue創(chuàng)建實(shí)例、編譯模板時(shí)，DOM才會(huì)被替換，所以這個(gè)過程屏幕是有閃動(dòng)的。只要加一句 CSS就可以解決這個(gè)問題了： 
[v-cloak] { 
display: none; 
} 
在一般情況下，v-cloak是一個(gè)解決初始化慢導(dǎo)致頁面閃動(dòng)的最佳實(shí)踐，對于簡單的項(xiàng)目很實(shí)用，但是在具有工程化的項(xiàng)目里，比如后面進(jìn)階篇將介紹 webpack和vue-router時(shí)，項(xiàng)目的HTML結(jié)構(gòu)只有一個(gè)空的div元素，剩余的內(nèi)容都是由路由去掛載不同組件完成的，所以不再需要v-cloak。 
5.1.2 v-once 
v-once 也是一個(gè)不需要表達(dá)式的指令，作用是定義它的元素或組件只渲染一次，包括元素或組件的所有子節(jié)點(diǎn)。首次渲染后，不再隨數(shù)據(jù)的變化重新渲染，將被視為靜態(tài)內(nèi)容，例如： 


{{ message }}




{{ message }} 






v-once在業(yè)務(wù)中也很少使用，當(dāng)你需要進(jìn)一步優(yōu)化性能時(shí)，可能會(huì)用到。 
5.2 條件渲染指令 
5.2.1 v-if、v-else-if、v-else 
與JavaScript的條件語句if、else、else if類似，Vue.js的條件指令可以根據(jù)表達(dá)式的值在DOM中渲染或銷毀元素/組件，例如： 


當(dāng)status為1時(shí)顯示該行


當(dāng)status為2時(shí)顯示該行


否則顯示該行