具體描述
産品特色
編輯推薦
學以緻用:以實際項目為立足點,拒絕紙上談兵,本書幫你快速上手!
應用廣泛:摸透Vue.js,無論是桌麵端還是移動端,讓你從容麵對!
求職利器:國內互聯網公司已廣泛使用Vue.js開發,再不學就晚瞭!
內容簡介
《Vue.js 前端開發 快速入門與專業應用》分為10章:簡介,基礎特性,指令,過濾器,過渡,組件,狀態管理,常用插件,工程實例,Weex打包。從簡單的單個實例和基礎語法,到工程實例,將係統的講述Vue.js在項目中的適用場景和具體操作。 書的特點在於案例詳實,使讀者體會到框架的優點和便捷之處,提升開發效率,能將Vue.js運用到實際項目中,避免紙上談兵的尷尬。
作者簡介
陳陸揚 前端工程師,2011年8月入職百度擔任前端工程師,2013年2月擔任去哪兒網無綫touch機票前端負責人。2014.11月開始創業,目前在新東方投資的在綫教育公司擔任前端負責人。熟悉Vue.js框架,使用並開發綫上産品。
內頁插圖
目錄
第1章 Vue.js簡介
1.1 Vue.js是什麼 1
1.2 為什麼要用Vue.js 2
1.3 Vue.js的Hello world 2
第2章 基礎特性
2.1 實例及選項 5
2.1.1 模闆 6
2.1.2 數據 7
2.1.3 方法 9
2.1.4 生命周期 10
2.2 數據綁定 12
2.2.1 數據綁定語法 13
2.2.2 計算屬性 17
2.2.3 錶單控件 18
2.2.4 Class與Style綁定 21
2.3 模闆渲染 22
2.3.1 前後端渲染對比 23
2.3.2 條件渲染 23
2.3.3 列錶渲染 25
2.3.4 template標簽用法 27
2.4 事件綁定與監聽 28
2.4.1 方法及內聯語句處理器 28
2.4.2 修飾符 29
2.4.3 與傳統事件綁定的區彆 30
2.5 Vue.extend() 31
第3章 指令
3.1 內置指令 32
3.1.1 v-bind 32
3.1.2 v-model 33
3.1.3 v-if-else-show 33
3.1.4 v-for 33
3.1.5 v-on 34
3.1.6 v-text 34
3.1.7 v-HTML 35
3.1.8 v-el 35
3.1.9 v-ref 35
3.1.10 v-pre 36
3.1.11 v-cloak 36
3.1.12 v-once 37
3.2 自定義指令基礎 37
3.2.1 指令的注冊 37
3.2.2 指令的定義對象 37
3.2.3 指令實例屬性 39
3.2.4 元素指令 40
3.3 指令的高級選項 41
3.3.1 params 41
3.3.2 deep 42
3.3.3 twoWay 43
3.3.4 acceptStatement 44
3.3.5 terminal 44
3.3.6 priority 45
3.4 指令在Vue.js 2.0中的變化 46
3.4.1 新的鈎子函數 46
3.4.2 鈎子函數實例和參數變化 46
3.4.3 update函數觸發變化 47
3.4.4 參數binding對象 47
第4章 過濾器
4.1 過濾器注冊 48
4.2 雙嚮過濾器 49
4.3 動態參數 50
4.4 過濾器在Vue.js 2.0中的變化 51
第5章 過渡
5.1 CSS過渡 52
5.1.1 CSS過渡的用法 52
5.1.2 CSS過渡鈎子函數 54
5.1.3 顯示聲明過渡類型 57
5.1.4 自定義過渡類名 57
5.2 JavaScript過渡 58
5.2.1 Velocity.js 58
5.2.2 JavaScript過渡使用 58
5.3 過渡係統在Vue.js 2.0中的變化 59
5.3.1 用法變化 59
5.3.2 類名變化 60
5.3.3 鈎子函數變化 61
5.3.4 transition-group 63
第6章 組件
6.1 組件注冊 65
6.1.1 全局注冊 65
6.1.2 局部注冊 66
6.1.3 注冊語法糖 67
6.2 組件選項 67
6.2.1 組件選項中與Vue選項的區彆 67
6.2.2 組件Props 68
6.3 組件間通信 71
6.3.1 直接訪問 71
6.3.2 自定義事件監聽 72
6.3.3 自定義事件觸發機製 72
6.3.4 子組件索引 75
6.4 內容分發 76
6.4.1 基礎用法 76
6.4.2 編譯作用域 77
6.4.3 默認slot 78
6.4.4 slot屬性相同 79
6.4.5 Modal實例 79
6.5 動態組件 82
6.5.1 基礎用法 82
6.5.2 keep-alive 83
6.5.3 activate 鈎子函數 84
6.6 Vue.js 2.0中的變化 85
6.6.1 event 85
6.6.2 keep-alive 86
6.6.3 slot 87
6.6.4 refs 87
第7章 Vue.js常用插件
7.1 Vue-router 88
7.1.1 引用方式 88
7.1.2 基本用法 89
7.1.3 嵌套路由 90
7.1.4 路由匹配 92
7.1.5 具名路由 93
7.1.6 路由對象 93
7.1.7 v-link 94
7.1.8 路由配置項 95
7.1.9 route鈎子函數 96
7.1.10 路由實例屬性及方法 99
7.1.11 vue-router 2.0 的變化 100
7.2 Vue-resource 104
7.2.1 引用方式 104
7.2.2 使用方式 105
7.2.3 $http的api方法和選項參數 105
7.2.4 攔截器 107
7.2.5 $resource用法 107
7.2.6 封裝Service層 109
7.3 Vue-devtools 109
7.3.1 安裝方式 110
7.3.2 使用效果 110
第8章 Vue.js工程實例
8.1 準備工作 111
8.1.1 webpack 111
8.1.2 vue-loader 113
8.2 目錄結構 115
8.3 前端開發 117
8.4 後端聯調 122
8.5 部署上綫 124
8.5.1 生成綫上文件 124
8.5.2 nginx 125
8.5.3 gitlab 126
8.5.4 jenkins 127
第9章 狀態管理:Vuex
9.1 概述 130
9.2 簡單實例 131
9.2.1 所需組件 131
9.2.2 創建並注入store 132
9.2.3 創建action及組件調用方式 133
9.2.4 創建mutation 134
9.2.5 組件獲取state 135
9.3 嚴格模式 137
9.4 中間件 137
9.4.1 快照 138
9.4.2 logger 138
9.5 錶單處理 139
9.6 目錄結構 142
9.6.1 簡單項目 142
9.6.2 大型項目 143
9.7 實例 145
9.7.1 state結構 146
9.7.2 actions.js 148
9.7.3 app.js 148
9.7.4 組件結構 148
9.7.5 base組件 152
9.7.6 展示結果 154
9.8 Vue.js 2.0的變化 155
9.8.1 State 155
9.8.2 Getters 156
9.8.3 Mutations 157
9.8.4 Actions 157
9.8.5 Modules 159
第10章 跨平颱開發:Weex
10.1 Weex簡介 161
10.2 Weex安裝 162
10.2.1 ios環境安裝 162
10.2.2 android環境安裝 163
10.2.3 web端運行 164
10.3 Weex實例與運行 164
10.4 Weex基礎語法 168
10.4.1 數據綁定 168
10.4.2 事件綁定 169
10.4.3 模闆邏輯 169
10.5 Weex內置組件 170
10.5.1 scroller 170
10.5.2 list 171
10.5.3 Switch 172
10.5.4 Slider 172
10.5.5 wxc-tabbar 174
10.5.6 wxc-navpage 175
10.6 Weex內置模塊 176
10.6.1 dom 176
10.6.2 steam 177
10.6.3 modal 178
10.6.4 animation 179
10.6.5 webview 180
10.6.6 navigator 181
10.6.7 storage 182
第11章 Vue.js 2.0新特性
11.1 Render函數 183
11.1.1 createElement用法 184
11.1.2 使用案例 185
11.1.3 函數化組件 186
11.1.4 JSX 187
11.2 服務端渲染 188
11.2.1 vue-server-renderer 188
11.2.2 簡單實例 189
11.2.3 緩存和流式響應 191
11.2.4 SPA實例 193
《前端修煉之路:從零構建高性能交互式Web應用》 內容梗概: 本書是一本麵嚮渴望深入理解前端開發核心機製,並期望構建齣既具視覺吸引力又兼具卓越性能的交互式Web應用程序的開發者而精心編撰的進階指南。我們不再局限於某個特定框架的錶麵語法,而是將目光聚焦於驅動現代前端發展的底層原理、關鍵技術棧以及一套行之有效的工程化實踐。通過本書的學習,你將能夠深刻理解Web應用的生命周期,掌握數據流管理、組件化設計、異步編程、性能優化以及現代前端工程化的方方麵麵,從而為你的職業生涯奠定堅實的基礎,成為一名真正能夠獨立解決復雜問題的資深前端工程師。 詳細闡述: 第一部分:Web基礎與現代前端概覽 在快節奏的技術迭代中,紮實的基礎是應對一切挑戰的基石。本部分將首先迴顧和深化你對Web核心技術的理解,包括但不限於: HTML5與CSS3的深度解析: 我們將超越基礎標簽和屬性,深入探討語義化HTML的意義、Web Components的潛力、CSS布局的現代演進(Flexbox與Grid的精妙運用),以及CSS預處理器(Sass/Less)的進階技巧,包括Mixin、函數、模塊化等,如何構建可維護、響應式且富有錶現力的界麵。我們將著重講解CSS in JS方案的原理與實踐,以及如何利用CSS變量進行主題化和動態樣式控製。 JavaScript語言的演進與精髓: ES6+的強大功能是現代前端開發不可或缺的一部分。本書將詳細講解箭頭函數、類、模塊化(import/export)、Promise、Async/Await、解構賦值、展開運算符等核心特性,並深入探討作用域、閉包、原型鏈、事件循環(Event Loop)等JavaScript運行機製的底層邏輯。你將學會如何編寫更清晰、更高效、更易於調試的代碼,並理解JavaScript在瀏覽器和Node.js環境中的差異與聯係。 現代前端開發流程與工具鏈: 瞭解現代前端項目是如何構建和部署的至關重要。我們將介紹包管理工具(npm/yarn/pnpm)的最佳實踐,模塊打包器(Webpack/Vite)的核心配置與優化策略,以及代碼質量保證工具(ESLint/Prettier)的集成與使用。你將理解開發服務器、熱模塊替換(HMR)、代碼分割、Tree Shaking等概念,並學會如何配置和使用它們來提升開發效率和項目質量。 第二部分:構建高性能交互式Web應用的核心技術 掌握瞭基礎之後,我們將進入核心的技術實戰環節,專注於如何構建齣高性能、用戶體驗卓越的交互式Web應用。 深入理解組件化架構: 組件化是現代前端開發的基石。本書將從組件的定義、生命周期、Props與State的管理、事件處理機製等方麵入手,引導你構建可復用、可維護的UI組件。我們將探討不同的組件設計模式,如容器組件與展示組件、高階組件(HOC)、Render Props等,以及如何利用Slots、Context API等特性實現組件間的解耦與通信。 數據流管理與狀態提升: 復雜應用的狀態管理是前端開發中的一大挑戰。我們將剖析單嚮數據流的原理,並介紹多種狀態管理方案。除瞭深入理解React的useState、useReducer、Context API等內置 Hooks,我們還將探討Redux、MobX等全局狀態管理庫的實現原理、核心概念(Action, Reducer, Store, Middleware等),以及如何根據項目規模選擇閤適的方案。對於更復雜的場景,我們將介紹 Zustand, Jotai, Recoil 等新生代狀態管理庫的優勢和適用性,讓你能夠從容應對不同復雜度的狀態管理需求。 異步編程的藝術: Web應用的交互性離不開對異步操作的處理。本書將從Callbacks、Promises,到Async/Await,全方位解析JavaScript異步編程的演進。你將學習如何優雅地處理網絡請求、定時器、用戶交互等異步事件,避免迴調地獄,並掌握錯誤處理和並發控製的最佳實踐。我們將深入探討Axios等HTTP客戶端庫的高級用法,包括攔截器、取消請求、請求閤並等,以及如何構建健壯的API調用層。 路由與導航: 構建單頁應用(SPA)離不開路由管理。我們將詳細講解客戶端路由的原理,並以React Router為例,演示如何配置聲明式路由、嵌套路由、動態路由、路由守衛等,實現流暢的用戶導航體驗。你將學習如何管理URL參數、查詢字符串,以及如何通過編程方式進行路由跳轉。 副作用管理與數據獲取策略: 在組件中處理數據獲取、訂閱、定時器等副作用操作是常見需求。我們將詳細講解React Hooks(useEffect)在副作用管理中的應用,包括如何正確處理依賴項、清理函數,以及如何利用自定義 Hooks 封裝可復用邏輯。同時,我們將探討各種數據獲取策略,如在組件掛載時獲取、在用戶交互時獲取、輪詢獲取等,並介紹 TanStack Query (React Query) / SWR 等數據獲取庫在緩存、去重、狀態管理方麵的強大能力,從而顯著提升數據獲取的效率和用戶體驗。 性能優化: 性能是用戶體驗的關鍵。本書將係統地講解前端性能優化的各個維度,包括: 渲染優化: 虛擬DOM的工作原理、React的Fiber架構、Memoization(React.memo, useMemo, useCallback)的妙用,以及如何識彆和解決不必要的重渲染。 代碼優化: 代碼分割(Code Splitting)、懶加載(Lazy Loading)、Tree Shaking、CDN的使用、圖片優化(懶加載、響應式圖片、WebP格式)等。 網絡優化: HTTP/2, HTTP/3協議、請求閤並、緩存策略、Gzip/Brotli壓縮等。 內存優化: 識彆和避免內存泄漏。 工具與指標: 利用Chrome DevTools、Lighthouse等工具進行性能分析和評估。 第三部分:工程化實踐與進階主題 成為一名優秀的前端工程師,不僅需要掌握技術,更需要具備良好的工程化思維和解決復雜問題的能力。 狀態管理模式的深入探索: 除瞭Redux/MobX,本書還將介紹更現代、更輕量級的狀態管理方案,如Zustand, Jotai, Recoil等,並分析它們的適用場景和優劣。我們將探討如何構建可擴展、易於維護的狀態管理架構。 錶單處理與驗證: 錶單是用戶交互的橋梁。我們將深入講解錶單狀態管理、受控組件與非受控組件、客戶端與服務端驗證,並介紹Formik, React Hook Form等庫,簡化復雜的錶單邏輯。 測試與質量保證: 確保代碼質量是項目成功的關鍵。本書將介紹單元測試(Jest)、集成測試、端到端測試(Cypress/Playwright)的基本概念和實踐,以及如何將測試集成到開發流程中。 高級樣式方案: 除瞭CSS Modules和CSS-in-JS,我們將探討Styled Components, Emotion等主流方案的進階用法,以及Tailwind CSS等原子化CSS框架的理念和實踐。 服務端渲染(SSR)與靜態站點生成(SSG): 瞭解SSR和SSG的工作原理,以及Next.js、Gatsby等框架在其中的應用,如何提升首屏加載速度和SEO。 微前端架構: 對於大型復雜應用,微前端是一種值得探索的架構模式。我們將介紹其核心理念、實現方式以及麵臨的挑戰。 TypeScript實戰: 掌握TypeScript是邁嚮大規模、高健壯性前端開發的必經之路。我們將詳細講解TypeScript的基本類型、接口、類、泛型、裝飾器等核心概念,以及如何在實際項目中應用TypeScript,提升代碼的可維護性和可讀性。 DevOps與CI/CD基礎: 瞭解持續集成/持續部署(CI/CD)的基本流程,以及Docker等容器化技術的應用,如何實現自動化構建、測試和部署,提升開發效率。 可訪問性(Accessibility)與國際化(i18n): 構建包容性的Web應用,讓所有用戶都能順暢訪問,是優秀開發者的責任。我們將探討WCAG標準,並介紹如何實現Web應用的可訪問性和國際化。 Web安全基礎: 瞭解常見的Web安全威脅(XSS, CSRF等),以及如何進行基本的安全防護。 學習路徑建議: 本書的設計旨在提供一個循序漸進的學習路徑。建議讀者在開始深入閱讀之前,確保具備基本的HTML、CSS和JavaScript知識。本書的每一部分都建立在前一部分的基礎上,但同時也允許讀者根據自己的興趣和需求,選擇性地深入學習某些章節。 本書的目標讀者: 希望從框架使用者轉變為框架的深入理解者的前端開發者。 對構建高性能、可擴展、易於維護的Web應用充滿熱情的工程師。 正在尋找係統性提升前端技能,應對復雜項目挑戰的開發者。 希望掌握現代前端開發最佳實踐,構建高質量Web應用的初學者。 通過本書的學習,你將不僅僅是掌握一套工具,更能培養齣解決問題的思維模式和獨立思考的能力,為你在不斷變化的前端技術浪潮中,開闢齣一條堅實而光明的修煉之路。