第一章：基礎知識

我能看懂嗎？

---

只要你現在能用html+css+js制作一個靜態頁面，相信我，你100%可以讀懂這篇文章。

本文尤其適合那些想要了解前后端分離開發技術，或者剛剛脫離傳統MVC開發模式的前端人員。
回想一下，常見的開發流程是什么樣子的？

設計師先出圖，然后前端開發人員把這些圖切成頁面交給后端，后端開發人員再把php或者java嵌入html頁面生成數據。

你有沒有發現這個開發模式的幾個弊端：
第一，設計師設計了10張圖，你就要做10個頁面，萬一設計師修改了一個地方，你這10個頁面每個地方都要重新修改一遍；
第二，嵌入式開發，跳轉頁面的時候是同步的，頁面刷新的時候會產生空白體驗很不好；
第三，對于一些跨平臺的應用，比如說小程序。后端人員就只能把原來生成到html上的數據，改為接口的形式再提供給前端。

我們大膽設想，能不能把前端開發模塊化，比如，頁面頂部是一個公共模塊，底部是一個公共模塊。所有頁面都引用這倆模塊，修改的時候，只需要修改公共模塊，改一個地方10個頁面就跟著全變了。
并且所有的數據通訊都通過ajax來完成，這樣，pc和移動端共用一套接口，后臺僅提供數據，邏輯和渲染都在前端完成。

vue就是這樣一套快捷的框架，它可以簡單有效的解決上述所有問題，本文將會由淺入深的為你講解vue的使用和前后端分離開發的強大之處。

初步了解

所謂設計模式，龍哥舉一個生動的例子幫助你理解：比如我們經常打的王者榮耀中刺客打野，戰士上單，法師走中路。這種默認形成的，大家都認可的套路就叫設計模式。
后端編程語言中有一個非常經典的設計模式名叫MVC。
我們平時開發的靜態頁面就是V層，視圖層。幫助視圖層改變數據，并且發送數據給后臺的叫C層，控制器。分類儲存數據的是M層，模型。

?

傳統的MVC開發模式

這里你會發現一個非常有意思的情況就是：幫助視圖做改變本來應該是前端的事。但是現在歸為控制器中了。不分離式開發的時候，控制器和模型都是在后端的。
如果開發人員在前端使用jquery，他還需要獲取到這個元素再修改dom的值。數據流瞬間被打亂，并且繁瑣的dom操作讓頁面變得緩慢無比，這不是我們想要的！

于是MVVM誕生了。你會注意到，C層不見了。這就要提到vue最大的優勢：它實現了數據到視圖的自動化，解決了mvc中邏輯層需要處理幫助視圖改變這塊的工作。

vue中使用的MVVM開發模式

所以總結一下：mvvm比mvc的好處就再于實現了自動化更新視圖，讓數據去驅動視圖。省掉了我們去document.getElementByxxx那一步！

然后我再傳授你一些其他的新穎理念，讓你的理論更加扎實...

前端項目工程化，聽著很高大上！

所謂的工程化，就是用軟件開發的那一套理論來管理前端。

從開發的規范，代碼的迭代，代碼庫分支的管理，模塊，測試和部署。這些操作都是一個體系里面的東西。這也是前端從后端分離出來的一個顯著的問題。它沒有一個特定的規范和流程，那樣的結果勢必是混亂的。

那么就像寫作文一樣，我們要問：時間，地點，人物是誰？前端我們要問，用什么方式迭代和管理代碼？用什么工具搭建和管理項目？如何部署？
如果有人面試問你這個問題，你應該這樣回答：我使用碼云Git管理代碼庫，使用基于webpack的vueCLI腳手架搭建項目，后端通過數據接口AJAX傳遞數據。

這里提到了使用webpack打包代碼和一些自動化手段，我們不做討論，當我們熟練掌握了vue的使用以后，我們會深入探討基于webpack的vuecli的使用，那將會我們的終極目的！

大概了相關概念以后，我們正式進入vue框架的學習吧！

作者：黨云龍
鏈接：https://www.jianshu.com/p/3b44eda73cc5
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

總結

以上是生活随笔為你收集整理的【转】Vue.js入门教程（一）从静态页面到前后端分离开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。