Vue.js 3.x 快速入門
申思維 杜驍
買這商品的人也買了...
-
$658Solr 實戰 (Solr in action) -
Python Web 介面開發與自動化測試$450$338 -
Vue.js 建置與執行 (Vue.js: Up and Running: Building Accessible and Performant Web Apps)$480$379 -
$857精通 JPA 與 Hibernate：Java 對象持久化技術詳解 (微課視頻版) -
$509Vue.js 3.0 從入門到實戰 (微課視頻版) -
$447Django 3 項目實例精解 -
$857瘋狂 Spring Boot 終極講義 -
最輕巧前端框架首選：Vue.js 完整專案開發實作 (有些許瑕疵,不影響閱讀)$780$663 -
$356Vue.js 3.0 從入門到精通 (視頻教學版) -
$458輕鬆學 Vue.js 3.0 從入門到實戰 (案例·視頻·彩色版) -
喬叔帶你上手 Elastic Stack：Elasticsearch 的最佳實踐與最佳化技巧（iT邦幫忙鐵人賽系列書）$680$530 -
$356PHP + jQuery + Vue.js 全棧開發從入門到實戰 (微課視頻版) -
Spring Data JPA：入門、實戰與進階$774$735 -
Elasticsearch 搜索引擎構建入門與實戰$539$512 -
Notion 人生管理術：從0開始，打造專屬自己的 All in One 高效數位系統$330$297 -
$240循序漸進 Vue.js 3 前端開發實戰 -
$383Spring Boot 從零開始學（視頻教學版） -
菜鳥也能懂的 WordPress 網頁製作：學會客製化專屬於自己的網頁 (iT邦幫忙鐵人賽系列書)$600$468 -
$352Vue.js 3.x 高效前端開發 (視頻教學版) -
$505Linux C/C++ 服務器開發實踐 -
$403Vue.js 3移動應用開發實戰 -
Web API 設計原則｜API 與微服務傳遞價值之道 (Principles of Web API Design: Delivering Value with APIs and Microservices)$520$390 -
AI 必須！從做中學貝氏統計 – 從事機器學習、深度學習、資料科學、大數據分析一定要懂的統計利器 (Bayesian Statistics for Beginners: A Step-By-Step Approach)$1,200$948 -
只要一行指令！FFmpeg 應用開發完全攻略$880$660 -
$454HTML5 + Vue.js 3.x 從入門到精通 (視頻教學版)
相關主題
商品描述
現在單頁應用框架層出不窮，其中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代碼的<head>部分 18
2.2.3 HTML代碼的<body>部分 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
