眾所周知最近幾年前端發(fā)展非常的迅猛，除各種框架如：backbone、angular、reactjs外，還有模塊化開(kāi)發(fā)思想的實(shí)現(xiàn)庫(kù)：sea.js 、require.js 、webpack以及 前端上線(xiàn)部署集成工具如： grunt、gulp、fis等。本文就新型mvvm庫(kù)：vue.js 與傳統(tǒng)庫(kù)jquery總結(jié)下兩者開(kāi)發(fā)思路的區(qū)別。
jquery曾經(jīng)是web前端最流行的庫(kù)（現(xiàn)在也是）， 但無(wú)論國(guó)內(nèi)還是國(guó)外其使用率漸漸的被其他庫(kù)或框架占據(jù)；隨著瀏覽器廠(chǎng)商對(duì)HTML5規(guī)范統(tǒng)一遵循以及ECMA6在瀏覽器端的實(shí)現(xiàn)，jq的使用率將會(huì)越來(lái)越低；（更詳細(xì)論述請(qǐng)參考賀老師的答案：jQuery會(huì)過(guò)時(shí)嗎？ - JavaScript）以下是國(guó)外各類(lèi)前端庫(kù)使用情況的小調(diào)查：
當(dāng)然本文的重點(diǎn)不是討論JQ是否過(guò)時(shí)，自己用mvvm類(lèi)框架一年有余；針對(duì)不少剛學(xué)Angular 或 vue 的同學(xué)在寫(xiě)邏輯代碼時(shí)仍然使用jquery思維的情況， 本文做個(gè)小總結(jié)： 方便前端同學(xué)明白mvvm庫(kù)的開(kāi)發(fā)思路及理清個(gè)人對(duì)兩類(lèi)庫(kù)的理解，通過(guò)幾個(gè)常見(jiàn)場(chǎng)景梳理下傳統(tǒng)庫(kù) jquery 與現(xiàn)代新晉mvvm庫(kù) vue 在實(shí)現(xiàn)相同邏輯時(shí)的思路區(qū)別； 與本人其他博文一樣，本文包括 代碼、說(shuō)明圖以及demo。
場(chǎng)景1： 注冊(cè)賬號(hào)：
本場(chǎng)景主要體現(xiàn)一個(gè)頁(yè)面多個(gè)步驟的邏輯處理， 類(lèi)似的場(chǎng)景包括：購(gòu)買(mǎi)流程、商品購(gòu)買(mǎi)預(yù)約流程等；
注冊(cè)賬號(hào)設(shè)計(jì)圖如下：
1.1. JQ實(shí)現(xiàn)方式：
如貼代碼， 那本文將被代碼完全占據(jù)， 所以代碼部分以鏈接方式附上； jq 的實(shí)現(xiàn)思路如下：選擇 流程dom對(duì)象， 點(diǎn)擊按鈕隱藏當(dāng)前活動(dòng)流程dom對(duì)象，顯示下一流程dom對(duì)象。
實(shí)現(xiàn)思路圖：
代碼： 注冊(cè)流程小demo(jq)
1.2.VUE實(shí)現(xiàn)方式：
與jq不同 mvvm框架基本不操作dom節(jié)點(diǎn)， 雙向綁定使 dom節(jié)點(diǎn)跟變量綁定后， 通過(guò)修改變量的值控制dom節(jié)點(diǎn)的各類(lèi)屬性。所以其實(shí)現(xiàn)思路為： 視圖層使用一變量控制dom節(jié)點(diǎn)顯示與否，點(diǎn)擊按鈕則改變?cè)撟兞俊?/strong>
實(shí)現(xiàn)思路圖：
代碼： 注冊(cè)流程小demo（vue）
場(chǎng)景2： 購(gòu)物列表：
本場(chǎng)景主要體現(xiàn)界面交互較多的邏輯處理， 類(lèi)似的場(chǎng)景包括： 用戶(hù)資料填寫(xiě)（城市、性別點(diǎn)選）、ERP工單申請(qǐng)（申請(qǐng)類(lèi)型點(diǎn)選）等；
PS: 實(shí)際項(xiàng)目中的電商網(wǎng)站不會(huì)將購(gòu)物車(chē)、訂單結(jié)果單頁(yè)面顯示；因?yàn)檫@樣不好兼容也不安全， 因而本例只是提供一種多交互的場(chǎng)景：
購(gòu)物列表設(shè)計(jì)圖如下：
2.1.JQ實(shí)現(xiàn)方式：
jquery 主要考慮 勾選、增加、減少、編輯 商品時(shí)對(duì)應(yīng)的邏輯， 對(duì)這四種操作賦予不同的事件（點(diǎn)擊、失去焦點(diǎn)）；所有事件圍繞總價(jià)格變化， 故公共事件就是修改價(jià)格顯示的dom節(jié)點(diǎn)；
點(diǎn)擊“去支付”按鈕時(shí)， 遍歷商品列表節(jié)點(diǎn)然后顯示已勾選的商品；
實(shí)現(xiàn)思路圖：
代碼：注冊(cè)流程小demo（jq）
2.2.VUE實(shí)現(xiàn)方式：
實(shí)現(xiàn)與上述jq一樣的功能， 在不操作dom節(jié)點(diǎn)的情況下vue如何實(shí)現(xiàn)呢？商品列表當(dāng)然是使用v-repeat 遍歷實(shí)現(xiàn)展示，主要難點(diǎn)在于如何交互： 勾選、增加、減少商品數(shù)量時(shí)如何改變總價(jià)格？ 這時(shí)就用到了對(duì)象數(shù)組的深度監(jiān)聽(tīng)****（具體實(shí)現(xiàn)請(qǐng)參見(jiàn)代碼）
使用一新數(shù)組存儲(chǔ)選中商品，點(diǎn)擊“去支付”按鈕時(shí)， 直接（v-repeat方式）顯示該新數(shù)組即可。
實(shí)現(xiàn)思路圖：
代碼：注冊(cè)流程小demo(vue)
場(chǎng)景3：表單提交：
本場(chǎng)景主要在于mvvm框架如何動(dòng)態(tài)添加新dom節(jié)點(diǎn)；
之前有知友提過(guò)類(lèi)似問(wèn)題：
angular js的點(diǎn)擊一個(gè)li標(biāo)簽，觸發(fā)事件添加li標(biāo)簽或者添加div應(yīng)該怎么寫(xiě)？ - 前端開(kāi)發(fā)
看到題目時(shí)本文場(chǎng)景3正在構(gòu)思，代碼尚未完成，所以沒(méi)來(lái)得及回答；本文寫(xiě)到該部分時(shí)，其問(wèn)題已關(guān)閉！ (?°?°?)?
高票答案已經(jīng)用文字清楚的說(shuō)明該場(chǎng)景下的代碼思路：
著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
作者：
徐飛鏈接：angular js的點(diǎn)擊一個(gè)li標(biāo)簽，觸發(fā)事件添加li標(biāo)簽或者添加div應(yīng)該怎么寫(xiě)？ - 徐飛的回答
來(lái)源：知乎
思維要轉(zhuǎn)變一下啊，用這類(lèi)框架，要這樣想，不考慮特殊情況：
1.所有的界面事件，都是只去操作數(shù)據(jù)的
2.所有界面的變動(dòng)，都是根據(jù)數(shù)據(jù)自動(dòng)綁定出來(lái)的
這樣，你用一個(gè)數(shù)據(jù)（根據(jù)實(shí)際情況，可能是數(shù)組，界面上的li使用ng-repeat綁定這個(gè)數(shù)組，然后，ng-click事件里，往這個(gè)數(shù)組中加一條數(shù)據(jù)），寫(xiě)一下試試。上面那兩條要牢記，尤其是以前用過(guò)jQuery的人，要時(shí)刻注意：界面不是被你的事件改變的，事件只需要改變數(shù)據(jù)，界面是數(shù)據(jù)的實(shí)時(shí)反饋。
VUE.JS 的代碼思路跟angular.js可以說(shuō)一脈相承， 廢話(huà)不多，栗子說(shuō)明：
表單提交設(shè)計(jì)圖：
3.1.JQ實(shí)現(xiàn)方式：
jq實(shí)現(xiàn)思路很簡(jiǎn)單： 監(jiān)聽(tīng)“新增”按鈕點(diǎn)擊事件，然后生成dom節(jié)點(diǎn)，插入到表單父類(lèi)節(jié)點(diǎn)中。點(diǎn)擊“提交”按鈕時(shí)，遍歷所有表單，從表單中獲取用戶(hù)填寫(xiě)的數(shù)據(jù)即可；
（PS: 本部分代碼中沒(méi)細(xì)化用戶(hù)交互，表單提交時(shí)判空處理、表單項(xiàng)手機(jī)格式、身份證格式校驗(yàn)等均沒(méi)實(shí)現(xiàn)）
實(shí)現(xiàn)思路圖：
代碼：表單操作(jq)
3.2.VUE實(shí)現(xiàn)方式：
mvvm框架相對(duì)于jq給使用者感觸最深的或許就是表單， 無(wú)論是vue還是angularjs在表單的處理上都有很多特定的官方指令；可以去官網(wǎng)感受下： vue表單用法；
所以說(shuō)mvvm框架最適合做erp類(lèi)型單頁(yè)面應(yīng)用， 一來(lái)不用管seo, 二來(lái)開(kāi)發(fā)效率極高；
vue實(shí)現(xiàn)思路跟場(chǎng)景2差不多， v-repeat雙向綁定；只要給綁定的數(shù)組添加新數(shù)據(jù)；對(duì)應(yīng)的dom節(jié)點(diǎn)就會(huì)對(duì)應(yīng)變化， 點(diǎn)擊“提交”按鈕時(shí)，直接展示該數(shù)組即可；
（表單操作時(shí)，vue對(duì)比jq優(yōu)勢(shì)就比較明顯了，少了操作dom代碼； 開(kāi)發(fā)、維護(hù)效率都會(huì)明顯提高）
實(shí)現(xiàn)思路圖：
代碼：表單操作(vue)
