Vue.js 3.x快速入門

購買商店

Vue.js 3.x快速入門

$414.00

馬上購買

內容描述

現在單頁應用框架層出不窮，其中Vue.js是十分耀眼的項目之一，受到國內外開發人員的極度推崇。本書根據筆者公司多年的實際項目開發經驗編寫而成，詳細介紹Vue.js 3.x企業應用快速開發技術。
全書共分8章，內容包括Vue.js概述、Vue.js的安裝、定義頁面、渲染視圖、路由、發送HTTP請求、表單的綁定和提交、打包、部署、解決JS（JavaScript）的跨域問題、Debug、Component、Mixin、Vuex、頁面的生命周期等，最後給出一個農產品銷售實戰案例供讀者瞭解Vue.js項目的開發過程。
本書適合Vue.js初學者、Web前端開發人員，也適合高等院校和培訓機構的師生參考。

目錄大綱

目  錄

第1章  Vue.js概述 1
1.1  單頁應用的出現 1
1.2  為什麽要使用Vue.js 2
1.2.1  Web應用 2
1.2.2  單頁應用框架對比 5
1.2.3  備受騰訊和阿裡巴巴青睞 7
1.2.4  用到Vue.js的項目 8
1.2.5  本書的使用說明 8
第2章  原生的Vue.js 10
2.1  極速入門 10
2.2  實際項目 12
2.2.1  運行整個項目 12
2.2.2  HTML代碼的部分 18
2.2.3  HTML代碼的部分 19
2.2.4  JS代碼部分 20
第3章  Webpack+Vue.js開發準備 25
3.1  學習過程 25
3.2  NVM、NPM與Node 26
3.2.1  在Windows下安裝NVM 27
3.2.2  在Linux、Mac下安裝NVM 30
3.2.3  運行 30
3.2.4  使用NVM安裝或管理Node版本 31
3.2.5  刪除NVM 32
3.2.6  加快NVM和NPM的下載速度 32
3.3  Git在Windows下的使用 32
3.3.1  為什麽要使用Git Bash 33
3.3.2  安裝Git客戶端 33
3.3.3  使用Git Bash 38
3.4  Webpack 39
3.4.1  Webpack的功能 40
3.4.2  Webpack的安裝與使用 41
3.5  開發環境的搭建 42
3.5.1  安裝Vue.js 42
3.5.2  創建基於Webpack的Vue.js項目 42
3.6  Webpack下的Vue.js項目文件結構 45
3.6.1  dist文件夾 46
3.6.2  node_modules 文件夾 46
3.6.3  src文件夾 48
第4章  Webpack+Vue.js實戰 49
4.1  創建一個頁面 49
4.1.1  新建路由 49
4.1.2  創建一個新的View（視圖文件） 51
4.1.3  為頁面添加樣式 52
4.1.4  Webpack項目與原生Vue.js項目的代碼對應關系 53
4.2  Vue.js中的ECMAScript 54
4.2.1  let、var、常量與全局變量 54
4.2.2  導入代碼—import 55
4.2.3  方便其他代碼使用自身—export default {..} 55
4.2.4  ES中的簡寫 56
4.2.5  箭頭函數（=>） 57
4.2.6  hash中同名的key、value的簡寫 57
4.2.7  省略分號 57
4.2.8  解構賦值 58
4.3  Vue.js渲染頁面的過程和原理 58
4.3.1  渲染步驟1：JS入口文件 59
4.3.2  渲染步驟2：靜態的HTML頁面（index.html） 59
4.3.3  渲染步驟3：main.js中的Vue定義 60
4.3.4  渲染原理與實例 60
4.4  視圖中的渲染 61
4.4.1  渲染某個變量 61
4.4.2  方法的聲明和調用 62
4.4.3  事件處理：v-on 64
4.5  視圖中的Directive（指令） 64
4.5.1  前提：在Directive中使用表達式（Expression） 65
4.5.2  v-for（循環） 65
4.5.3  v-if（判斷） 67
4.5.4  v-if與v-for的結合使用與優先級 68
4.5.5  v-bind（綁定） 70
4.5.6  v-on（響應事件） 71
4.5.7  v-model（模型）與雙向綁定 73
4.6  發送HTTP請求 75
4.6.1  調用HTTP請求 75
4.6.2  遠程接口的格式 79
4.6.3  設置Vue.js開發服務器的代理 80
4.6.4  打開頁面，查看HTTP請求 81
4.6.5  把結果渲染到頁面中 82
4.6.6  如何發起POST請求 83
4.7  不同頁面間的參數傳遞 84
4.7.1  回顧：現有的接口 84
4.7.2  顯示博客詳情頁 85
4.7.3  新增路由 87
4.7.4  修改博客列表頁的跳轉方式1：使用事件 87
4.7.5  修改博客列表頁的跳轉方式2：使用v-link 89
4.8  路由 90
4.8.1  基本用法 90
4.8.2  跳轉到某個路由時帶上參數 91
4.8.3  根據路由獲取參數 92
4.9  使用樣式 92
4.10  雙向綁定 94
4.11  表單項目的綁定 97
4.12  表單的提交 99
4.13  Component 組件 103
4.13.1  如何查看文檔 103
4.13.2  Component的重要作用：重用代碼 103
4.13.3  組件的創建 104
4.13.4  向組件中傳遞參數 105
4.13.5  在原生Vue.js中創建Component 107
第5章  運維和發布Vue.js項目 109
5.1  打包和部署 109
5.1.1  打包 109
5.1.2  部署 111
5.2  解決域名問題與跨域問題 113
5.2.1  域名404 問題 114
5.2.2  跨域問題 115
5.2.3  解決域名問題和跨域問題 116
5.2.4  解決HTML5路由模式下的刷新後404的問題 118
5.3  如何Debug 118
5.3.1  時刻留意本地開發服務器 119
5.3.2  看Developer Tools提出的日誌 119
5.3.3  查看頁面給出的錯誤提示 120
5.4  基本命令 121
5.4.1  建立新項目 121
5.4.2  安裝所有的第三方包 122
5.4.3  在本地運行 122
5.4.4  打包編譯 123
第6章  進階知識 124
6.1  JavaScript的作用域與this 124
6.1.1  作用域 124
6.1.2  this 126
6.1.3  實戰經驗 127
6.2  Mixin 129
6.3  Computed Properties和Watchers 131
6.3.1  典型例子 131
6.3.2  Computed Properties與普通方法的區別 132
6.3.3  Watched Property 133
6.3.4  Computed Property的setter（賦值函數） 136
6.4  Component進階 137
6.4.1  實際項目中的Component 137
6.4.2  Prop 139
6.4.3  Attribute 142
6.5  Slot（插槽） 142
6.5.1  普通的Slot 142
6.5.2  named slot 144
6.5.3  Slot的默認值 145
6.6  Vuex 145
6.6.1  正常使用的順序 146
6.6.2  Computed屬性 149
6.6.3  Vuex原理圖 150
6.7  Vue.js的生命周期 150
6.8  Event Handler事件處理 152
6.8.1  支持的Event 152
6.8.2  使用v-on進行事件綁定 153
6.9  Vue.js對變量的監聽的原理 161
6.9.1  Proxy對象 161
6.9.2  Vue.js 內置的track與trigger方法 162
6.9.3  雙向綁定原則上只能作用於基本類型 163
6.10  與CSS預處理器結合使用 163
6.10.1  SCSS 164
6.10.2  LESS 164
6.10.3  SASS 165
6.10.4  在Vue.js中使用CSS預編譯器 166
6.11  自定義 Directive 167
6.11.1  例子 167
6.11.2  自定義Directive的命名方法 168
6.11.3  鉤子方法（Hook Functions） 168
6.11.4  自定義Directive可以接收到的參數 169
6.11.5  Directive的實戰經驗 171
6.12  全局配置項 171
6.13  單元測試 173
6.14  Teleport 175
6.15  頁面渲染的優化 177
6.16  Composition API 178
6.16.1  Composition API Demo 178
6.16.2  等效的Option API Demo 181
6.17  Provide與Inject 182
6.17.1  Option API的實現方法 184
6.17.2  Composition API的實現方法 185
6.18  子組件向父組件的消息傳遞 186
6.18.1  在子組件中watch&emit，在父組件中監聽 187
6.18.2  使用refs 189
6.19  最佳實踐 192
第7章  實戰周邊及相關工具 193
7.1  微信支付 193
7.2  Hybrid App（混合式App） 194
7.3  安裝 Vue.js的開發工具：Vue.js devtool 195
7.4  如何閱讀官方文檔 198
第8章  實戰項目 200
8.1  準備1：文字需求 200
8.2  準備2：需求原型圖 202
8.2.1  明確前端頁面 203
8.2.2  如何畫原型圖 203
8.2.3  首頁 203
8.2.4  商品列表頁 203
8.2.5  商品詳情頁 204
8.2.6  購物車頁面 205
8.2.7  支付頁面 205
8.2.8  我的頁面 206
8.2.9  我的訂單列表頁面 206
8.2.10  總結 206
8.3  準備3：微信的相關賬號和開發者工具 206
8.3.1  微信相關賬號的申請 206
8.3.2  微信開發者工具 207
8.4  項目的搭建 210
8.5  用戶的註冊和微信授權 211
8.6  登錄狀態的保持 220
8.7  首頁輪播圖 221
8.8  底部Tab 231
8.9  商品列表頁 234
8.10  商品詳情頁 237
8.11  購物車 243
8.12  微信支付 251
8.13  回顧 262