《Vue.js從入門到專案實戰》從零基礎開始講解,用實例引導讀者深入學習,深入淺出地講解了Vue框架的各項實戰技能。
《Vue.js從入門到項目實戰》共16章,主要講解了Vue.js的基本概念,Vue實例和範本語法,計算屬性、偵聽器和篩檢程式,內置指令,頁面元素樣式的綁定,事件處理,雙向資料綁定,元件技術,使用webpack打包,專案腳手架vue-cli,前端路由技術,狀態管理等。最後列舉了4個行業熱點項目實訓,包括神影視頻App、音樂之家App、仿手機QQ頁面、仿餓了麼App。
《Vue.js從入門到專案實戰》適合任何想學習Vue框架的人員,無論您是否從事電腦相關行業,無論您是否接觸過Vue框架,通過學習本書內容均可快速掌握Vue框架設計的方法和技巧。
第1章 Vue.js簡介與安裝 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 傳統的前端開發模式 005
1.2.2 Vue.js的開發模式 005
1.3 安裝Vue 006
1.3.1 直接用(script)引入 006
1.3.2 NPM 007
1.3.3 命令列工具 007
1.4 第一個Vue程式 007
1.5 疑難解惑 010
第2章 Vue實例和範本語法 011
2.1 Vue實例 011
2.1.1 創建一個Vue實例 011
2.1.2 資料與方法 012
2.1.3 實例生命週期鉤子014
2.1.4 產生實體多個物件 014
2.2 範本語法 018
2.2.1 插值018
2.2.2 指令021
2.2.3 縮寫021
2.3 疑難解惑 022
第3章 計算屬性、偵聽器和篩檢程式 023
3.1 計算屬性 023
3.2 計算屬性與方法 024
3.3 偵聽屬性 027
3.3.1 回調值為函數方法027
3.3.2 回調值為對象 028
3.4 篩檢程式 030
3.5 疑難解惑 033
第4章 內置指令 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管理可複用的元素 045
4.2.6 v-show 047
4.2.7 v-if與v-show的區別 048
4.3 列表渲染 050
4.3.1 使用v-for 指令遍歷元素 050
4.3.2 維護狀態 053
4.3.3 陣列*新檢測 053
4.3.4 物件變*檢測注意事項 056
4.3.5 在(template) 上使用v-for 057
4.3.6 v-for 與v-if 一同使用 058
4.4 自訂指令 060
4.5 疑難解惑 062
第5章 頁面元素樣式的綁定 064
5.1 綁定HTML 樣式 064
5.1.1 陣列語法 064
5.1.2 物件語法 066
5.1.3 在自訂群組件上使用class 068
5.2 綁定內聯樣式 069
5.2.1 物件語法 069
5.2.2 陣列語法 071
5.3 疑難解惑 072
第6章 事件處理 074
6.1 監聽事件 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 系統修飾鍵 089
6.6 案例實戰——仿淘寶Tab 欄切換 090
6.7 疑難解惑 092
第7章 表單輸入綁定(雙向資料綁定) 094
7.1 雙向綁定 094
7.2 基本用法 095
7.2.1 文本095
7.2.2 多行文本 096
7.2.3 核取方塊 096
7.2.4 選項按鈕 097
7.2.5 選擇框 098
7.3 值綁定 101
7.3.1 綁定核取方塊 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 案例實戰1——小遊戲破壞瓶子 105
7.6 案例實戰2——設計動態表格 107
7.7 疑難解惑 110
第8章 組件技術 113
8.1 組件是什麼 113
8.2 組件的註冊 114
8.2.1 全域註冊 114
8.2.2 局部註冊 117
8.3 元件中的data 選項 119
8.4 元件中的props 選項 121
8.5 組件的複用 124
8.6 組件間的資料通信 126
8.6.1 父元件向子元件通信 126
8.6.2 子元件向父元件通信 127
8.7 插槽 129
8.7.1 認識插槽 129
8.7.2 具名插槽 132
8.7.3 作用域插槽 135
8.7.4 解構插槽 137
8.8 案例實戰——設計照片相冊 139
8.9 疑難解惑 143
第9章 使用webpack 打包 145
9.1 前端工程化與 webpack 145
9.2 webpack 基礎配置 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 章 項目腳手架vue-cli 161
10.1 腳手架的組件 161
10.2 腳手架環境搭建 162
10.3 安裝腳手架 164
10.4 創建項目 165
10.4.1 使用命令165
10.4.2 使用圖形化介面 167
10.5 疑難解惑 171
第11 章 前端路由技術 172
11.1 實現Vue 前端路由控制 172
11.1.1 前端路由的實現方式 172
11.1.2 路由實現步驟 173
11.2 命名路由、命名視圖和路由傳參 177
11.2.1 命名路由 177
11.2.2 命名視圖 179
11.2.3 路由傳參 183
11.3 程式設計式導航 191
11.4 組件與Vue Router 間解耦 194
11.4.1 布林模式解耦 194
11.4.2 物件模式解耦 197
11.4.3 函數模式解耦 198
11.5 疑難解惑 198
第12 章 狀態管理 200
12.1 Vuex 概述 200
12.1.1 狀態管理模式 200
12.1.2 Vuex 的應用場合 202
12.2 Vuex 的安裝與使用 202