內(nèi)容簡(jiǎn)介

《Vue.js從入門到項(xiàng)目實(shí)戰(zhàn)》從零基礎(chǔ)開(kāi)始講解，用實(shí)例引導(dǎo)讀者深入學(xué)習(xí)，深入淺出地講解了Vue框架的各項(xiàng)實(shí)戰(zhàn)技能。
《Vue.js從入門到項(xiàng)目實(shí)戰(zhàn)》共16章，主要講解了Vue.js的基本概念，Vue實(shí)例和模板語(yǔ)法，計(jì)算屬性、偵聽(tīng)器和過(guò)濾器，內(nèi)置指令，頁(yè)面元素樣式的綁定，事件處理，雙向數(shù)據(jù)綁定，組件技術(shù)，使用webpack打包，項(xiàng)目腳手架vue-cli，前端路由技術(shù)，狀態(tài)管理等。最后列舉了4個(gè)行業(yè)熱點(diǎn)項(xiàng)目實(shí)訓(xùn)，包括神影視頻App、音樂(lè)之家App、仿手機(jī)QQ頁(yè)面、仿餓了么App。
《Vue.js從入門到項(xiàng)目實(shí)戰(zhàn)》適合任何想學(xué)習(xí)Vue框架的人員，無(wú)論您是否從事計(jì)算機(jī)相關(guān)行業(yè)，無(wú)論您是否接觸過(guò)Vue框架，通過(guò)學(xué)習(xí)本書(shū)內(nèi)容均可快速掌握Vue框架設(shè)計(jì)的方法和技巧。

前言
為什么要寫(xiě)這樣一本書(shū)
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，能夠在很大程度上降低Web前端開(kāi)發(fā)的難度，因此深受廣大Web前端開(kāi)發(fā)人員的喜愛(ài)。Vue.js庫(kù)功能雖然強(qiáng)大，但是對(duì)于初學(xué)者來(lái)說(shuō)入門比較困難，因此我們選擇了讓讀者從入門到掌握Vue.js作為編寫(xiě)本書(shū)的思路，沒(méi)有基礎(chǔ)的讀者通過(guò)本書(shū)學(xué)習(xí)也沒(méi)有障礙。本書(shū)將項(xiàng)目開(kāi)發(fā)中的技能融入本書(shū)的案例中，通過(guò)本書(shū)的學(xué)習(xí)，不僅可以掌握Vue.js庫(kù)的使用方法，還可以積累項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)，從而滿足企業(yè)實(shí)際開(kāi)發(fā)的需求。
本書(shū)特色
零基礎(chǔ)、入門級(jí)的講解
無(wú)論您是否從事計(jì)算機(jī)相關(guān)行業(yè)，無(wú)論您是否接觸過(guò)Vue框架，都能從本書(shū)中找到最佳起點(diǎn)。
實(shí)用、專業(yè)的范例和項(xiàng)目
本書(shū)在編排上緊密結(jié)合深入學(xué)習(xí)Vue框架技術(shù)的過(guò)程，從Vue框架基本操作開(kāi)始，逐步帶領(lǐng)讀者學(xué)習(xí)Vue框架的各種應(yīng)用技巧，側(cè)重實(shí)戰(zhàn)技能，使用簡(jiǎn)單易懂的實(shí)際案例進(jìn)行分析和操作指導(dǎo)，讓讀者學(xué)起來(lái)簡(jiǎn)明輕松，操作起來(lái)有章可循。
隨時(shí)隨地學(xué)習(xí)
本書(shū)提供了微課視頻，隨時(shí)隨地解決學(xué)習(xí)中的困惑。
細(xì)致入微、貼心提示
本書(shū)在講解過(guò)程中，在各章中使用了“注意”“提示”“技巧”等小欄目，使讀者在學(xué)習(xí)過(guò)程中能更清楚地了解相關(guān)操作、理解相關(guān)概念，并輕松掌握各種操作技巧。
超值資源大放送
全程同步教學(xué)錄像
涵蓋本書(shū)所有知識(shí)點(diǎn)，詳細(xì)講解每個(gè)實(shí)例及項(xiàng)目的過(guò)程及技術(shù)關(guān)鍵點(diǎn)。比看書(shū)更能輕松地掌握書(shū)中所有的網(wǎng)頁(yè)制作和設(shè)計(jì)知識(shí)，而且擴(kuò)展的講解部分可使您得到比書(shū)中更多的收獲。
超多容量王牌資源
贈(zèng)送大量王牌資源，包括實(shí)例源代碼、教學(xué)幻燈片、本書(shū)精品教學(xué)視頻、實(shí)用網(wǎng)頁(yè)模板、網(wǎng)頁(yè)開(kāi)發(fā)必備參考手冊(cè)、HTML 5 標(biāo)簽速查手冊(cè)、精選的JavaScript 實(shí)例、CSS 3 屬性速查表、JavaScript 函數(shù)速查手冊(cè)、CSS+DIV 布局案例賞析、精彩網(wǎng)站配色方案賞析、網(wǎng)頁(yè)樣式與布局案例賞析、Web 前端工程師常見(jiàn)面試題等。讀者可以在清華大學(xué)出版社官網(wǎng)搜索本書(shū)獲取贈(zèng)送資源。
讀者對(duì)象
沒(méi)有任何Vue框架開(kāi)發(fā)基礎(chǔ)的初學(xué)者。
有一定的Vue框架開(kāi)發(fā)基礎(chǔ)，想精通前端框架開(kāi)發(fā)的人員。
有一定的網(wǎng)頁(yè)前端設(shè)計(jì)基礎(chǔ)，沒(méi)有項(xiàng)目經(jīng)驗(yàn)的人員。
大專院校及培訓(xùn)學(xué)校的老師和學(xué)生。
創(chuàng)作團(tuán)隊(duì)
本書(shū)由胡同江編著，參加編寫(xiě)的人員還有劉春茂、李艷恩和李佳康。在編寫(xiě)過(guò)程中，我們雖竭盡所能將最好的講解呈現(xiàn)給了讀者，但難免有疏漏和不妥之處，敬請(qǐng)讀者不吝指正。
編 者
 

目錄
第1章 Vue.js簡(jiǎn)介與安裝      001
1.1 Vue概述    001
1.1.1　MVVM模式 002
1.1.2　Vue是什么   002
1.1.3　Vue有什么不同     003
1.2 如何使用Vue.js   005
1.2.1　傳統(tǒng)的前端開(kāi)發(fā)模式     005
1.2.2　Vue.js的開(kāi)發(fā)模式 005
1.3 安裝Vue    006
1.3.1　直接用<script>引入      006
1.3.2　NPM      007
1.3.3　命令行工具  007
1.4 第一個(gè)Vue程序  007
1.5 疑難解惑   010
第2章 Vue實(shí)例和模板語(yǔ)法     011
2.1 Vue實(shí)例    011
2.1.1　創(chuàng)建一個(gè)Vue實(shí)例   011
2.1.2　數(shù)據(jù)與方法  012
2.1.3　實(shí)例生命周期鉤子014
2.1.4　實(shí)例化多個(gè)對(duì)象    014
2.2 模板語(yǔ)法   018
2.2.1　插值018
2.2.2　指令021
2.2.3　縮寫(xiě)021
2.3 疑難解惑   022
第3章 計(jì)算屬性、偵聽(tīng)器和過(guò)濾器    023
3.1 計(jì)算屬性   023
3.2 計(jì)算屬性與方法   024
3.3 偵聽(tīng)屬性   027
3.3.1　回調(diào)值為函數(shù)方法027
3.3.2　回調(diào)值為對(duì)象    028
3.4 過(guò)濾器   030
3.5 疑難解惑   033
第4章 內(nèi)置指令    035
4.1 基本指令   035
4.1.1　v-cloak   035
4.1.2　v-once    036
4.1.3　v-text與v-html   037
4.1.4　v-bind    037
4.1.5　v-on 038
4.2 條件渲染   040
4.2.1　v-if   040
4.2.2　在<template>元素上使用v-if條件渲染分組  042
4.2.3　v-else     043
4.2.4　v-else-if     044
4.2.5　用key管理可復(fù)用的元素  045
4.2.6　v-show   047
4.2.7　v-if與v-show的區(qū)別     048
4.3 列表渲染   050
4.3.1　使用v-for 指令遍歷元素    050
4.3.2　維護(hù)狀態(tài)  053
4.3.3　數(shù)組更新檢測(cè)    053
4.3.4　對(duì)象變更檢測(cè)注意事項(xiàng) 056
4.3.5　在<template> 上使用v-for    057
4.3.6　v-for 與v-if 一同使用     058
4.4 自定義指令      060
4.5 疑難解惑   062
第5 章 頁(yè)面元素樣式的綁定       064
5.1 綁定HTML 樣式  064
5.1.1　數(shù)組語(yǔ)法  064
5.1.2　對(duì)象語(yǔ)法  066
5.1.3　在自定義組件上使用class 068
5.2 綁定內(nèi)聯(lián)樣式  069
5.2.1　對(duì)象語(yǔ)法  069
5.2.2　數(shù)組語(yǔ)法  071
5.3 疑難解惑   072
第6 章 事件處理     074
6.1 監(jiān)聽(tīng)事件   074
6.2 事件處理方法  075
6.3 事件修飾符      080
6.3.1　stop 修飾符   080
6.3.2　capture 修飾符    082
6.3.3　self 修飾符    083
6.3.4　once 修飾符  085
6.3.5　prevent 修飾符    085
6.3.6　passive 修飾符    086
6.4 按鍵修飾符      087
6.5 系統(tǒng)修飾鍵      089
6.6 案例實(shí)戰(zhàn)——仿淘寶Tab 欄切換    090
6.7 疑難解惑   092
第7 章 表單輸入綁定（雙向數(shù)據(jù)綁定）   094
7.1 雙向綁定   094
7.2 基本用法   095
7.2.1　文本095
7.2.2　多行文本  096
7.2.3　復(fù)選框  096
7.2.4　單選按鈕  097
7.2.5　選擇框  098
7.3 值綁定   101
7.3.1　綁定復(fù)選框  101
7.3.2　綁定單選按鈕    101
7.3.3　綁定選擇框  102
7.4 修飾符   103
7.4.1　lazy 修飾符   103
7.4.2　number 修飾符   103
7.4.3　trim 修飾符   104
7.5 案例實(shí)戰(zhàn)1——小游戲破壞瓶子     105
7.6 案例實(shí)戰(zhàn)2——設(shè)計(jì)動(dòng)態(tài)表格     107
7.7 疑難解惑    110
第8 章 組件技術(shù)    113
8.1 組件是什么       113
8.2 組件的注冊(cè)       114
8.2.1　全局注冊(cè)  114
8.2.2　局部注冊(cè)  117
8.3 組件中的data 選項(xiàng) 119
8.4 組件中的props 選項(xiàng)    121
8.5 組件的復(fù)用      124
8.6 組件間的數(shù)據(jù)通信  126
8.6.1　父組件向子組件通信     126
8.6.2　子組件向父組件通信     127
8.7 插槽   129
8.7.1　認(rèn)識(shí)插槽  129
8.7.2　具名插槽  132
8.7.3　作用域插槽  135
8.7.4　解構(gòu)插槽  137
8.8 案例實(shí)戰(zhàn)——設(shè)計(jì)照片相冊(cè)  139
8.9　疑難解惑   143
第9 章 使用webpack 打包       145
9.1 前端工程化與 webpack    145
9.2 webpack 基礎(chǔ)配置 148
9.2.1　安裝 webpack 與 webpack-devserver    148
9.2.2　webpack 的核心概念      149
9.2.3　完善配置文件    152
9.3 單文件組件與vue-loader 154
9.4 疑難解惑   160
第10 章 項(xiàng)目腳手架vue-cli      161
10.1 腳手架的組件    161
10.2 腳手架環(huán)境搭建 162
10.3 安裝腳手架    164
10.4 創(chuàng)建項(xiàng)目 165
10.4.1　使用命令165
10.4.2　使用圖形化界面  167
10.5 疑難解惑 171
第11 章 前端路由技術(shù)        172
11.1 實(shí)現(xiàn)Vue 前端路由控制  172
11.1.1　前端路由的實(shí)現(xiàn)方式    172
11.1.2　路由實(shí)現(xiàn)步驟   173
11.2 命名路由、命名視圖和路由傳參    177
11.2.1　命名路由 177
11.2.2　命名視圖 179
11.2.3　路由傳參 183
11.3 編程式導(dǎo)航    191
11.4 組件與Vue Router 間解耦  194
11.4.1　布爾模式解耦   194
11.4.2　對(duì)象模式解耦   197
11.4.3　函數(shù)模式解耦   198
11.5 疑難解惑  198
第12 章 狀態(tài)管理    200
12.1 Vuex 概述      200
12.1.1　狀態(tài)管理模式  200
12.1.2　Vuex 的應(yīng)用場(chǎng)合 202
12.2 Vuex 的安裝與使用    202
12.2.1　安裝Vuex   202
12.2.2　Promise 對(duì)象    203
12.2.3　使用Vuex   203
12.3 在項(xiàng)目中使用Vuex    205
12.3.1　使用腳手架搭建一個(gè)項(xiàng)目   205
12.3.2　state 對(duì)象    209
12.3.3　getter 對(duì)象  210
12.3.4　mutation 對(duì)象   212
12.3.5　Action 對(duì)象 213
12.4 疑難解惑 215
第13 章 項(xiàng)目實(shí)訓(xùn)1——神影視頻App   216
13.1 準(zhǔn)備工作 216 13.1.1　開(kāi)發(fā)環(huán)境216
13.1.2　搭建Vue 腳手架  216
13.2 網(wǎng)站概述 219
13.2.1　網(wǎng)站結(jié)構(gòu)219
13.2.2　初始化項(xiàng)目文件  220
13.3 設(shè)計(jì)項(xiàng)目組件    221
13.3.1　設(shè)計(jì)頭部和底部導(dǎo)航組件   222
13.3.2　設(shè)計(jì)電影頁(yè)面組件 224
13.3.3　設(shè)計(jì)影院頁(yè)面組件 235
13.3.4　設(shè)計(jì)我的頁(yè)面組件 238
13.4 設(shè)計(jì)項(xiàng)目頁(yè)面組件及路由配置  239
13.4.1　電影頁(yè)面組件及路由   239
13.4.2　影院頁(yè)面組件及路由   242
13.4.3　我的頁(yè)面組件及路由   244
第14 章 項(xiàng)目實(shí)訓(xùn)2——音樂(lè)之家App   246
14.1 項(xiàng)目概述 246
14.1.1　開(kāi)發(fā)環(huán)境246
14.1.2　技術(shù)概括247
14.1.3　項(xiàng)目結(jié)構(gòu)247
14.2 入口文件 248
14.2.1　項(xiàng)目入口頁(yè)面（index.html）    248
14.2.2　程序入口文件（main.js）    249
14.2.3　組件入口文件（App.vue）  249
14.3 狀態(tài)管理 252
14.3.1　store/api.js   252
14.3.2　store/index.js     253
14.4 項(xiàng)目組件設(shè)計(jì)    254
14.4.1　歡迎組件255
14.4.2　播放組件256
14.4.3　歌曲信息組件  259
14.4.4　歌曲列表組件  261
14.4.5　歌曲詳情組件  262
第15 章 項(xiàng)目實(shí)訓(xùn)3——仿手機(jī)QQ 頁(yè)面   266
15.1 項(xiàng)目概述 266
15.1.1　開(kāi)發(fā)環(huán)境266
15.1.2　技術(shù)概括267
15.1.3　項(xiàng)目結(jié)構(gòu)267
15.2 入口文件 268
15.2.1　項(xiàng)目入口頁(yè)面  268
15.2.2　程序入口文件  269
15.2.3　組件入口文件  269
15.3 狀態(tài)管理 272
15.3.1　action.js   272
15.3.2　getters.js  273
15.3.3　mutations.js 273
15.3.4　store.js     275
15.4 項(xiàng)目組件及路由 276
15.4.1　配置路由276
15.4.2　頂部導(dǎo)航欄組件  277
15.4.3　側(cè)邊欄導(dǎo)航組件  278
15.4.4　搜索組件280
15.4.5　個(gè)人信息頁(yè)面組件 283
15.4.6　底部tab 欄組件    286
15.4.7　消息頁(yè)面組件  288
15.4.8　聊天組件291
15.4.9　朋友頁(yè)面組件  295
15.4.10　動(dòng)態(tài)頁(yè)面組件    298
15.5 模擬請(qǐng)求數(shù)據(jù)    300
第16 章 項(xiàng)目實(shí)訓(xùn)4——仿餓了么App   302
16.1 項(xiàng)目概述 302
16.1.1　開(kāi)發(fā)環(huán)境302
16.1.2　項(xiàng)目結(jié)構(gòu)303
16.2 入口文件 304
16.2.1　項(xiàng)目入口頁(yè)面  304
16.2.2　程序入口文件  304
16.2.3　組件入口文件  305
16.3 項(xiàng)目組件 306
16.3.1　頭部組件306
16.3.2　商品數(shù)量控制組件 309
16.3.3　購(gòu)物車組件310
16.3.4　評(píng)論內(nèi)容組件  314
16.3.5　商品詳情組件  317
16.3.6　星級(jí)組件320
16.3.7　商品組件321
16.3.8　評(píng)論組件324
16.3.9　商家信息組件  326