第一章：基礎(chǔ)知識(shí)

我能看懂嗎？

---

只要你現(xiàn)在能用html+css+js制作一個(gè)靜態(tài)頁(yè)面，相信我，你100%可以讀懂這篇文章。

本文尤其適合那些想要了解前后端分離開(kāi)發(fā)技術(shù)，或者剛剛脫離傳統(tǒng)MVC開(kāi)發(fā)模式的前端人員。
回想一下，常見(jiàn)的開(kāi)發(fā)流程是什么樣子的？

設(shè)計(jì)師先出圖，然后前端開(kāi)發(fā)人員把這些圖切成頁(yè)面交給后端，后端開(kāi)發(fā)人員再把php或者java嵌入html頁(yè)面生成數(shù)據(jù)。

你有沒(méi)有發(fā)現(xiàn)這個(gè)開(kāi)發(fā)模式的幾個(gè)弊端：
第一，設(shè)計(jì)師設(shè)計(jì)了10張圖，你就要做10個(gè)頁(yè)面，萬(wàn)一設(shè)計(jì)師修改了一個(gè)地方，你這10個(gè)頁(yè)面每個(gè)地方都要重新修改一遍；
第二，嵌入式開(kāi)發(fā)，跳轉(zhuǎn)頁(yè)面的時(shí)候是同步的，頁(yè)面刷新的時(shí)候會(huì)產(chǎn)生空白體驗(yàn)很不好；
第三，對(duì)于一些跨平臺(tái)的應(yīng)用，比如說(shuō)小程序。后端人員就只能把原來(lái)生成到html上的數(shù)據(jù)，改為接口的形式再提供給前端。

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

vue就是這樣一套快捷的框架，它可以簡(jiǎn)單有效的解決上述所有問(wèn)題，本文將會(huì)由淺入深的為你講解vue的使用和前后端分離開(kāi)發(fā)的強(qiáng)大之處。

初步了解

所謂設(shè)計(jì)模式，龍哥舉一個(gè)生動(dòng)的例子幫助你理解：比如我們經(jīng)常打的王者榮耀中刺客打野，戰(zhàn)士上單，法師走中路。這種默認(rèn)形成的，大家都認(rèn)可的套路就叫設(shè)計(jì)模式。
后端編程語(yǔ)言中有一個(gè)非常經(jīng)典的設(shè)計(jì)模式名叫MVC。
我們平時(shí)開(kāi)發(fā)的靜態(tài)頁(yè)面就是V層，視圖層。幫助視圖層改變數(shù)據(jù)，并且發(fā)送數(shù)據(jù)給后臺(tái)的叫C層，控制器。分類儲(chǔ)存數(shù)據(jù)的是M層，模型。

?

傳統(tǒng)的MVC開(kāi)發(fā)模式

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

于是MVVM誕生了。你會(huì)注意到，C層不見(jiàn)了。這就要提到vue最大的優(yōu)勢(shì)：它實(shí)現(xiàn)了數(shù)據(jù)到視圖的自動(dòng)化，解決了mvc中邏輯層需要處理幫助視圖改變這塊的工作。

vue中使用的MVVM開(kāi)發(fā)模式

所以總結(jié)一下：mvvm比mvc的好處就再于實(shí)現(xiàn)了自動(dòng)化更新視圖，讓數(shù)據(jù)去驅(qū)動(dòng)視圖。省掉了我們?nèi)ocument.getElementByxxx那一步！

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

前端項(xiàng)目工程化，聽(tīng)著很高大上！

所謂的工程化，就是用軟件開(kāi)發(fā)的那一套理論來(lái)管理前端。

從開(kāi)發(fā)的規(guī)范，代碼的迭代，代碼庫(kù)分支的管理，模塊，測(cè)試和部署。這些操作都是一個(gè)體系里面的東西。這也是前端從后端分離出來(lái)的一個(gè)顯著的問(wèn)題。它沒(méi)有一個(gè)特定的規(guī)范和流程，那樣的結(jié)果勢(shì)必是混亂的。

那么就像寫(xiě)作文一樣，我們要問(wèn)：時(shí)間，地點(diǎn)，人物是誰(shuí)？前端我們要問(wèn)，用什么方式迭代和管理代碼？用什么工具搭建和管理項(xiàng)目？如何部署？
如果有人面試問(wèn)你這個(gè)問(wèn)題，你應(yīng)該這樣回答：我使用碼云Git管理代碼庫(kù)，使用基于webpack的vueCLI腳手架搭建項(xiàng)目，后端通過(guò)數(shù)據(jù)接口AJAX傳遞數(shù)據(jù)。

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

大概了相關(guān)概念以后，我們正式進(jìn)入vue框架的學(xué)習(xí)吧！

作者：黨云龍
鏈接：https://www.jianshu.com/p/3b44eda73cc5
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。