前言

傳統的網站開發一般采用HTML+CSS+JS“三駕馬車”作為技術架構，而Vue立足于其上，以模板語法為基礎，以數據綁定和組件化開發為核心，極大地簡化了開發流程。使用Vue技術棧，開發者甚至可以在幾分鐘內搭建出一個完整的前端項目。

本書正是以Vue技術棧為核心，由淺入深地進行講解。在語法學習之外，本書還將深入探討和模擬底層機制的實現，從原生的角度剖析框架。最后，本書將以當前最常見的網站類型為例來講解。

本書將選取有代表性和表達鮮明的示例，以實戰示例講解知識點，避免將理論架空和復雜化，并力圖用淺顯易懂的語言進行論述，最大程度地使文章內容更易于理解。對于一些最佳實踐和優秀模式，本書還將劃分小節對其進行專題講述。與其他同類書籍相比，本書是從前端從業者的角度來思考和編寫的，專注于解決學習者在職業生涯上遇到的困難和“瓶頸”。

讀者對象

本書適合以下讀者群體閱讀。

（1）Vue初學者

初學者往往會發現上手Vue并不困難，但在項目開發中卻不能靈活自如地使用它，接踵而來的程序漏洞和頻繁變動的項目需求會使自己手忙腳亂，甚至想采用熟悉卻更復雜的原生寫法來進行開發。導致這種現象的根源在于他們對于Vue的理解還不夠深，對Vue中暗藏的“黑魔法”無法敏銳地洞察，甚至僅在學習過語法之后就開始進行開發，以致在實戰中無法根據具體情況采用最合適的方案。本書針對這一情況，特意將這些“黑魔法”總結出來并模擬實現許多框架底層的機制，深入淺出地對其進行講解，意在讓讀者看懂會用。

（2）原生或仿原生JS（Java Script）的從業者

Vue立足于JS，一切使用Vue進行開發的項目均可以使用JS進行開發，正如一切的編程語言都立足于電元信號的正負極，即01碼，可為什么軟件都不采用二進制編碼來進行開發呢？這里面牽扯到一個成本的問題，這正是影響項目領導者進行決策的關鍵因素。Vue項目與原生JS或jQuery等仿原生框架項目相比，開發成本要低一些。與此同時，Vue項目對從業者的要求要高一些，待遇和前景要好一些。

如果你是一名原生JS的應用開發者，不妨學一手Vue，也許就此突破職業“瓶頸”，迎來職業生涯又一春天。本書將作為你成長路上的最佳伴侶。

（3）對MVVM架構理念感興趣的愛好者

從GitHub上被標星的次數來看，Vue從誕生至今，以其強大的特性和低廉的學習成本后來居上，已經成為MVVM框架中的最受歡迎者。從各個角度的對比來看，Vue也比在MVVM框架中同樣具有代表性的Angular和React更出色一些，這點在本書中也有論述。毫無疑問，對Vue的學習將有助于你了解MVVM的架構理念，達到一葉知秋的效果。此外，本書還將演示多個采用MVVM架構的Web項目，在實戰中踐行理論，以呈現出最真實的觀感。

（4）大中專院校和培訓機構等相關專業的學生

從本質上來講，Vue屬于前端技術棧中的一項實用技能，更適合于軟件工程和計算機科學與技術等相關專業的同學學習。但如果你想跨專業就業的話，上手Vue也并不是一件難事，本書將帶領你快速入門Vue的世界，前提是需要一定的前端基礎。

多年以來，程序員的薪資待遇一直為人所羨慕且不斷地提升，而前端工程師更是其中熱門。從近年來的招聘信息來看，企業對于前端的要求也越來越高，“MVVM框架（Vue/ React/Angular）的使用經驗”已成為Web應用項目招人的基本要求。本書將以理論結合實戰的方式，由淺入深地對Vue進行講解，腳踏實地，一步一個腳印，幫你筑基前端工程師之路。

本書特色

（1）示例為主，剖析為輔，一切盡在運行中，避免將理論架空

本書中的知識點均配以精心編制、具有代表性的示例，并力圖將知識點融入示例中進行講述，目的在于以示例為驅動演繹知識點，將理論生動形象化，避免大段理論帶來的枯燥感和視野盲區。在由淺入深地講述一套知識體系時，筆者將以同一示例為原型，不斷對其進行豐富和變換，絕不會引入新的示例代碼以增添讀者的負擔。此外，這些示例均是獨立可運行的，讀者完全可以在模仿和拓展中解決閱讀時產生的疑惑。

（2）理論與實踐結合，在理論中洞察，在實踐中感悟

本書的前六章內容重在講解Vue的知識體系，力圖使讀者達到學有所知、學有所感的地步，使讀者在接觸到陌生的Vue代碼片段時，能夠知其優劣。而后五章內容以常見的網站類型為例，展示了Vue在項目開發中的運用，這些網站包括電商類網站（PC端）、企業官網（兼容PC和移動端）、資訊類網站（移動端）和工具類網站（PC端）。

以理論指導實踐，以實踐檢驗和豐富理論，這是一個螺旋上升的過程，也是認知新事物的正確方法。筆者希望以理論與實踐相結合的方式，避免紙上談兵，使讀者不僅能夠學有所知、學有所感，更能夠學以致用。

（3）多年經驗和心得，大型項目的最佳實踐和設計模式

筆者一直活躍于GitHub等開源社區，接觸過國內外許多優秀項目的源碼，并以軟件工程的專業知識不斷檢驗和更新自己的認知。在本書的創作過程中，筆者會將一些最佳實踐和設計模式應用于示例和項目的開發中。對于一些常用的實踐和模式，筆者還將劃分小節對其進行專題講述。在講解Vue之外，筆者希望這本書能夠對你的編程境界有所提升。

本書愿景

從一無所知到略有心得，筆者也遇到過許多困難，借鑒過許多前輩的經驗，也希望能夠將自己的知識和心得分享出去，給走在路上的人照亮一段旅程。

本書從Vue的基礎語法入手，逐步深入進階特性，最后選取最具代表性的網站類型進行項目實戰，其中穿插著各種最佳實踐的講解并模擬框架底層機制的實現，力圖使同學們在理論學習中知其全貌，在實戰中融會貫通。

希望這本書能夠給你帶來一定的收獲和啟發，在職業生涯上助你一臂之力。

本書學前基礎

Vue立足于JS，這意味著你在學習本書之前要具備扎實的JS基礎，除了會用最基本的關鍵字和語法結構之外，你還需要掌握JS中的事件機制、DOM編程、閉包、對象引用和一些內置對象的常用方法等內容。當然，筆者也會在書中對這些內容進行簡單的介紹，以確保不會對Vue的學習造成障礙。不過，作為一本前端技術的進階用書，你的編程境界越高，你能體會的也就越多。

除了具備扎實的JS基礎之外，你還需要掌握基本的CSS和HTML 5用法，這些是組件化開發中必不可少的內容。

在項目實戰中，筆者將會使用一些CSS和HTML 5的高級特性或引入一些第三方組件庫，缺乏相關開發經驗的同學也許會對此感到陌生，不過也不必擔心，筆者會對這些內容進行詳細講解。當然，它們也并不難于習得。

本書內容及體系結構

本書共分為11個章節，其中第1~6章屬于概念篇，用于描述理論體系；7~11章屬于實戰篇，用于演示實戰項目。下面分別介紹這11個章節的內容。

第1章介紹Vue的發展歷程、因果關系，這部分內容并不影響你對技術的掌握，如果你對此沒有興趣的話，可以跳過不看。

第2章首先介紹如何在項目中引入Vue，這是使用Vue的起點所在；之后介紹Vue實例和實例的生命周期并主題化講解Vue中的數據鏈和數據綁定原理，了解這些將會讓你在項目開發中大受裨益。

第3章介紹Vue中的插值綁定和常見指令的用法，這是Vue學習中的重點部分。

第4章講述了三個方面的選項。其中，有關數據和方法的選項也是Vue學習中的重點部分，掌握這些和第3章的內容足以讓你構建一個完整的Vue應用；有關DOM渲染的選項在本書的實戰章節中沒有主動用到，這些選項是否能派上用場取決于你所在項目的開發方式；有關封裝復用的選項屬于Vue進階特性，學習難度相對較大，學好這些將使你的代碼結構更加優雅且易于維護，從而在面對復雜功能和頻繁的需求變動時游刃有余。

第5章講述了Vue中內置的一些組件，這些組件封裝了一些功能，用好這些將使開發變得更加簡單。

第6章講述了Vue技術棧中的其他成員，包括前端路由（Vue Router）、狀態管理器（Vuex）和項目快速構建工具（Vue Cli），這些都將服務于Vue項目的開發。

從第7章開始，本書進入實戰章節。

第7章和第8章演示了電商類網站的開發，涉及的內容還包括打包工具Webpack、字體圖標庫Font Awesome和緩存對象localStorage。

第9章演示了企業官網的開發，涉及的內容還包括響應式設計、翻頁組件Swiper和網站多語的配置。

第10章演示了資訊類網站的開發，涉及的內容還包括移動端應用的開發。

第11章演示了工具類網站的開發，涉及的內容還包括可伸縮矢量圖形SVG。

本書學習建議

對于初次接觸Vue的同學來說，最好你能耐心將本書讀完，除了學會使用Vue之外，你的編程境界也會有所提高。

如果你急于應聘要求具備Vue使用經驗的崗位，就需要掌握第3章和第4章中有關數據和方法的選項，并對第4章中有關封裝復用和第5章、第6章的內容有所了解，之后快速進入實戰，查看4個Web項目的源碼和演示。在Vue的深水區游泳，還不至于窒息。

如果你喜歡聽故事的話，不妨把第1章讀一下，畢竟在日后的工作中能接觸到的代碼五花八門，能對這些代碼的年代特征形成基本的認識，也是蠻不錯的。

本書的知識點均配以示例，希望通過演示示例的方式使復雜和空洞的理論變得形象起來，這些示例的代碼將隨書附贈。希望同學們在學習時不要干嚼文字，對于不理解的地方一定要運行代碼，空看十遍不如上手一試。

在后面的實戰章節中，本書只摘取了部分具有代表性的代碼和流程進行講解，邏輯結構較為抽象，建議同學們先運行項目，對項目內容有個大致的了解，之后參照項目源碼進行學習。

輔助學習資料

●本書源代碼

●本書輔助視頻教程

以上內容，我們將存儲在云端并提供下載鏈接（或二維碼）。

致謝

其實每一個項目都不是一蹴而就的，一開始的計劃總是隨著局勢（團隊領導者的想法、市場變動、客戶需求等）的變化被不斷地修改，項目總是在一次次試錯的過程中不斷地成長和成熟，在反復的優化和重構后，項目才有了最終的模樣。其實，人的一生也是如此，我們總是在不停地遇到困難，不停地追尋答案，借鑒著別人的經驗和心得，借助前輩們踏平的道路，才走到了我們現在的位置。過去，我常常在想，“為往圣繼絕學，呵，這是多么偉大的志向”，然而事實上，我們每個人都在做著這件事。人類社會現有的文明也絕非少數人的功勞，這來自一代代人的傳承。

這里，首先要感謝Vue團隊的開源精神，他們的無私奉獻使我們在項目開發時有了更多和更好的技術選擇，同時也促成了本書的編寫。

感謝本書的所有編校人員，在你們的支持和幫助下，這本書才有了更高的質量。

最后感謝我的家人和同事們，是他們的支持給了我充足的空間和自由進行創作。

作者

2018年10月