Vue.js從入門到項目實戰(升級版)
內容描述
本書從Vue框架的基礎語法講起,逐步深入Vue進階實戰,並在最後配合項目實戰案例,重點演示Vue在項目開發中的一些應用。在系統地講解Vue的相關知識之餘,本書力圖使讀者更深入地理解Vue項目開發。
本書共分為11章,涵蓋的主要內容有前端技術的發展歷程、Vue基本介紹、Vue語法、Vue選項、Vue內置組件、Vue項目化、使用Vue開發電商類網站、使用Vue開發企業官網、使用Vue開發移動端資訊類網站、使用Vue開發工具類網站等。
本書內容通俗易懂,案例豐富,實用性強,特別適合Vue的初學者和從業人員閱讀,同時適合職業生涯遇到“瓶頸”的前端從業人員和其他編程愛好者閱讀。另外,本書也適合作為相關培訓機構的教材。
目錄大綱
第一篇 概念篇——扎根於基礎
第1章 引言 ···························································002
1.1 前端技術的發展 ···················································002
1.1.1 從靜態走向動態 ·······················································002
1.1.2 從後端走向前端 ·······················································003
1.1.3 從前端走向全端 ·······················································005
1.2 MVVM 族員—Vue.js ··········································008
1.2.1 從MVC到MVVM ···················································008
1.2.2 Vue.js簡介 ·····························································009
1.3 Vue與React ························································010
1.3.1 虛擬DOM ······························································010
1.3.2 功能性組件 ·····························································011
1.3.3 輕量級—將與核心庫無關的業務封裝成獨立庫 ·············011
1.3.4 視圖模板 ································································012
1.3.5 其他 ······································································013
1.4 Vue與Angular ·····················································013
1.4.1 模板語法 ································································013
1.4.2 臟檢測 ···································································014
1.4.3 雙向數據綁定 ··························································014
1.4.4 學習曲線 ································································015
第2章 Vue基本介紹 ···············································016
2.1 安裝和引入 ·························································016
2.1.1 如何引入Vue.js ·······················································016
2.1.2 安裝Vue Devtools ····················································017
2.2 Vue實例介紹 ······················································019
2.2.1 簡單實例 ································································019
2.2.2 生命周期 ································································020
目錄
VIII
Vue. js從入門到項目實戰(升級版)
2.3 數據響應式原理 ···················································024
2.3.1 初識數據鏈 ·····························································024
2.3.2 函數式編程 ·····························································025
2.3.3 Vue中的數據鏈 ·······················································026
2.3.4 數據綁定視圖 ··························································027
第3章 Vue語法 ·····················································031
3.1 插值綁定 ····························································031
3.1.1 文本插值 ································································031
3.1.2 HTML插值 ····························································033
3.2 屬性綁定 ····························································034
3.2.1 指令v-bind ·····························································034
3.2.2 類名和樣式綁定 ·······················································035
3.3 事件綁定 ····························································038
3.3.1 指令v-on ·······························································038
3.3.2 常見修飾符 ·····························································040
3.3.3 按鍵修飾符 ·····························································042
3.3.4 組合修飾符 ·····························································043
3.4 雙向綁定 ····························································045
3.4.1 指令v-model ···························································045
3.4.2 v-model與修飾符 ·····················································048
3.4.3 v-model與自定義組件 ···············································050
3.5 條件渲染和列表渲染 ·············································052
3.5.1 指令v-if和v-show ···················································052
3.5.2 指令v-for ·······························································054
3.5.3 列表渲染中的key ·····················································059
第4章 Vue選項 ·····················································060
4.1 常見選項及其用法 ················································060
4.1.1 數據選項及其用法 ····················································060
IX
目 錄
4.1.2 屬性選項及其用法 ····················································065
4.1.3 方法選項及其用法 ····················································066
4.1.4 計算屬性及其用法 ····················································068
4.1.5 偵聽屬性及其用法 ····················································072
4.2 DOM 渲染 ··························································074
4.2.1 指定被掛載元素 ·······················································074
4.2.2 視圖的字符串模板 ····················································075
4.2.3 渲染函數render ·······················································076
4.2.4 選項的優先級 ··························································083
4.3 封裝復用 ····························································084
4.3.1 自定義指令 ·····························································084
4.3.2 組件的註冊 ·····························································088
4.3.3 混入的使用 ·····························································089
第5章 Vue內置組件 ···············································093
5.1 組件服務 ····························································093
5.1.1 動態組件 ································································093
5.1.2 插槽 ······································································095
5.1.3 緩存組件 ································································101
5.2 過渡效果 ····························································102
5.2.1 單節點的過渡 ··························································102
5.2.2 多節點的過渡 ··························································111
第6章 Vue項目化 ···················································115
6.1 快速構建項目 ······················································115
6.1.1 Vue CLI簡介···························································115
6.1.2 使用Vue CLI構建項目 ·············································116
6.1.3 項目目錄介紹 ··························································117
6.2 前端路由 ····························································120
6.2.1 前端路由的簡單實現 ·················································121
6.2.2 Vue中的前端路由 ····················································124
6.3 狀態管理 ····························································131
6.3.1 對象引用 ································································131
6.3.2 狀態管理器Vuex ······················································132
6.3.3 在項目中使用Vuex ···················································136
第二篇 實戰篇——提升於項目
第7章 打造線上商城(一) ······································144
7.1 項目規劃 ····························································144
7.1.1 需求分析 ································································144
7.1.2 流程分析 ································································146
7.2 項目展示 ····························································147
7.2.1 首頁 ······································································147
7.2.2 商品詳情 ································································150
7.2.3 購物車 ···································································151
7.2.4 訂單 ······································································152
第8章 打造線上商城(二) ······································154
8.1 項目構建 ····························································154
8.1.1 目錄結構 ································································154
8.1.2 Webpack是什麽? ····················································155
8.1.3 Font Awesome圖標庫 ················································157
8.2 動態資源和數據 ···················································159
8.2.1 關於配置 ································································159
8.2.2 動態資源 ································································162
8.2.3 動態數據的存儲 ·······················································163
8.3 自定義組件 ·························································164
8.3.1 幻燈片 ···································································164
8.3.2 復選框 ···································································168
第9章 企業官網的建設 ············································171
9.1 響應式設計 ·························································171
9.1.1 什麽是響應式設計的概念 ···········································171
9.1.2 媒體查詢 ································································172
9.1.3 JavaScript佈局 ························································174
9.2 頁面開發 ····························································175
9.2.1 頁面切換 ································································175
9.2.2 Swiper組件 ····························································176
9.2.3 劃分內容區 ·····························································177
9.3 多語種網站的建設 ················································180
9.3.1 將一切納入配置 ·······················································180
9.3.2 將配置綁定到視圖 ····················································183
第10章 我的掌上新聞 ··············································187
10.1 應用介紹 ··························································187
10.1.1 應用首屏 ······························································187
10.1.2 應用首頁 ······························································188
10.1.3 新聞詳情頁 ···························································190
10.1.4 搜索頁面 ······························································191
10.1.5 搜索結果頁 ···························································194
10.2 項目構建 ··························································194
10.2.1 項目結構 ······························································194
10.2.2 數據流圖 ······························································198
第11章 SVG 畫圖板 ················································200
11.1 SVG 簡介 ··························································200
11.1.1 有關SVG的三個問題 ··············································200
11.1.2 基本圖形的使用 ·····················································202
11.1.3 SVG中的漸變 ·······················································203
11.2 項目介紹 ··························································205
11.2.1 頁面介紹 ······························································205
11.2.2 代碼簡析 ······························································209
附錄 拓 展 篇
附錄A Git入門 ·······················································218
附錄B NPM入門 ····················································221
附錄C Webpack入門 ··············································224
附錄D 閉包和對象引用 ·············································230
附錄E 常見的ECMAScript 6語法 ······························233