|
|
|
本書以Vue.js2為基礎，以專案實戰的方式引導讀者漸進式學習Vue.js框架。本書分為項目起步、Vue.js介紹、專案外掛程式、專案梳理等部分。“項目起步”主要是對大覓項目架構設計以及項目中使用的ECMAScript6內容進行介紹；“Vue.js介紹”主要是講解Vue.js框架的核心功能；“項目外掛程式”主要是介紹Vuex、百度地圖以及生成二維碼外掛程式的使用；“項目梳理”則梳理大覓專案每一個頁面的技能點並且分析頁面的實現思路。經過專案實戰之後，讀者可以掌握工程化的前端開發方法，Vue.js框架主要API的使用方法、單檔元件、元件通信、Axios等。
本書示例豐富，側重實戰，適用於剛接觸或即將接觸Vue.js的開發者，也適合有Vue.js開發經驗但還需進一步提升的開發者。
第 1章 大覓專案架構設計 1
任務1 大覓項目業務場景 3
1.1.1 大覓項目業務分析 4
1.1.2 大覓項目業務梳理 6
1.1.3 大覓專案技術棧選型 7
任務2 大覓專案環境搭建 7
1.2.1 Node.js的介紹 8
1.2.2 什麼是NPM 9
1.2.3 安裝cnpm 9
1.2.4 Vue-cli腳手架 10
1.2.5 上機訓練 14
任務3 前端架構設計 14
1.3.1 分層架構&模組化 14
1.3.2 分離方式 15
1.3.3 Visual Studio Code 免費跨平臺編輯器 16
1.3.4 UI框架 17
1.3.5 上機訓練 20
1.3.6 構建工具Webpack 20
1.3.7 上機訓練 23
本章作業 24
第 2章 大覓專案中ES6的使用 25
任務1 let和const命令 27
2.1.1 let命令 27
2.1.2 上機訓練 30
2.1.3 const命令 30
任務2 變數的解構賦值 31
2.2.1 陣列的解構賦值 31
2.2.2 對象的解構賦值 33
2.2.3 上機訓練 34
任務3 使用箭頭函數 34
2.3.1 箭頭函數起因 34
2.3.2 箭頭函式定義 36
2.3.3 和普通函數的區別 36
2.3.4 箭頭函數不適用場景 38
任務4 Map資料結構 40
2.4.1 Map資料結構的特點 40
2.4.2 如何創建Map 41
2.4.3 Map常用屬性及方法 41
任務5 Module的語法 44
2.5.1 概述 44
2.5.2 export、import命令 44
2.5.3 export default命令 46
任務6 Promise物件 46
2.6.1 Promise的含義 46
2.6.2 基本用法 47
本章作業 48
第3章 大覓專案的路由配置 49
任務1 什麼是前端路由 50
3.1.1 什麼是路由 50
3.1.2 前端路由 51
3.1.3 前端路由的使用場景 51
任務2 Vue Router基本使用 52
3.2.1 安裝路由 52
3.2.2 建立路由器模組 53
3.2.3 啟動路由器 53
3.2.4 路由重定向 54
3.2.5 路由懶載入 55
3.2.6 56
3.2.7 路由物件屬性 57
任務3 頁面間導航 57
3.3.1 router.push 58
3.3.2 router.replace 58
3.3.3 router.go 58
本章作業 59
第4章 初識Vue.js 61
任務1 Vue.js是什麼 62
4.1.1 MVVM模式 63
4.1.2 Vue.js的開發模式 63
4.1.3 單檔組件 64
任務2 Vue實例與資料綁定 65
4.2.1 實例與資料 65
4.2.2 插值運算式 66
4.2.3 生命週期 68
任務3 class與style綁定 71
4.3.1 瞭解v-bind指令 71
4.3.2 綁定class的方式 72
4.3.3 綁定內聯樣式 76
本章作業 77
第5章 大覓專案中與服務端通信 79
任務1 connect-mock-middleware工具的使用 81
5.1.1 添加middleware 81
5.1.2 寫mock文件 81
任務2 Mock.js語法 84
5.2.1 Mock.js基本介紹 84
5.2.2 Mock.js語法規範 84
任務3 snail mock工具使用 87
任務4 Axios的安裝及配置 88
5.4.1 Axios基本介紹 88
5.4.2 Axios安裝使用 88
5.4.3 Axios封裝及調用 90
5.4.4 請求設置 90
5.4.5 返回回應概要 91
5.4.6 攔截器 92
5.4.7 上機訓練 93
任務5 大覓專案的服務端通信配置 93
本章作業 93
第6章 Vue.js指令 95
任務1 條件渲染指令 96
6.1.1 v-if指令 97
6.1.2 v-else指令 97
6.1.3 v-show指令 98
6.1.4 v-if與v-show的選擇 99
任務2 清單渲染v-for指令 100
6.2.1 基本用法 100
6.2.2 遍歷對象 100
6.2.3 遍歷陣列 101
6.2.4 key屬性 102
6.2.5 上機訓練 102
任務3 方法與事件 103
6.3.1 v-on指令 103
6.3.2 修飾符 106
任務4 v-model與表單 108
6.4.1 基本用法 108
6.4.2 修飾符 109
本章作業 109
第7章 組件詳解 113
任務1 組件概念與複用 114
7.1.1 為什麼使用元件 114
7.1.2 組件的複用 115
任務2 使用props傳遞資料 115
7.2.1 基本用法 115
7.2.2 單向資料流程 119
7.2.3 上機訓練 121
任務3 組件通信 121
7.3.1 自訂事件及＄emit方法 121
7.3.2 兄弟元件通信的處理方式 123
任務4 slot分發內容 126
7.4.1 什麼是slot 126
7.4.2 匿名slot 126
7.4.3 具名slot 128
本章作業 129
第8章 計算屬性和偵聽器 131
任務1 計算屬性 132
8.1.1 什麼是計算屬性 132
8.1.2 計算屬性用法 134
8.1.3 計算屬性緩存 137
8.1.4 上機訓練 139
任務2 偵聽器 139
8.2.1 什麼是偵聽器 139
8.2.2 計算屬性vs偵聽器 140
本章作業 143
第9章 大覓專案中外掛程式的使用 145
任務1 百度地圖外掛程式 146
9.1.1 百度地圖基本介紹 146
9.1.2 百度地圖基本使用 147
9.1.3 上機訓練 150
任務2 狀態管理與Vuex 151
9.2.1 狀態管理與使用場景 151
9.2.2 Vuex基本用法 152
任務3 二維碼外掛程式 156
9.3.1 使用場景 156
9.3.2 QRCode外掛程式使用 156
本章作業 157
第 10章 大覓項目總結 159
任務1 大覓項目起步 160
10.1.1 專案前期準備 160
10.1.2 Vue框架 162
任務2 梳理大覓項目技能點 162
10.2.1 專案框架搭建及配置 162
10.2.2 梳理項目技能點 163
本章作業 168
