摘要：至于我為何要這么做，請(qǐng)聽(tīng)閏土娓娓道來(lái)。那么接下來(lái)，正文從這開始熟悉閏土的朋友都知道，我是從時(shí)代過(guò)來(lái)的前端，在剛接觸和這類框架的時(shí)候，完全可以用一臉懵逼來(lái)形容我，最為貼切。作者閏土少年出處本博客的文章如無(wú)特殊說(shuō)明，均為原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。

在我動(dòng)筆寫這篇文章的時(shí)候，我剛剛從我的項(xiàng)目中刪除了最后一行JQuery代碼。至于我為何要這么做，請(qǐng)聽(tīng)閏土娓娓道來(lái)。前幾年我還在想，假如有一天，前端世界里不能再直接操作dom了，我該怎么辦？沒(méi)想到竟一語(yǔ)成讖，這一天終究還是來(lái)了......

此文記錄了一次JQ黨轉(zhuǎn)變成Vue信徒的心路歷程。

那么接下來(lái)，正文從這開始~

熟悉閏土的朋友都知道，我是從JQ時(shí)代過(guò)來(lái)的前端，在剛接觸react和vue這類MVVM框架的時(shí)候，完全可以用一臉懵逼來(lái)形容我，最為貼切。在啃官方API文檔的時(shí)候，總是按照以前jquery的思想來(lái)衡量，當(dāng)時(shí)看的還是相當(dāng)費(fèi)勁，不過(guò)最后還是艱難的看完了。

我在想，如果能從一開始學(xué)的時(shí)候，把之前的開發(fā)思路忘掉，就當(dāng)自己從來(lái)沒(méi)學(xué)過(guò)編程，以一種空杯心態(tài)從零開始學(xué)的話，應(yīng)該會(huì)比較快。之前沒(méi)有考慮到思路轉(zhuǎn)換這一步，走了彎路?，F(xiàn)在想想，有種欲練此功，必先自宮的感覺(jué)。

相信從JQ時(shí)代過(guò)來(lái)的前端碼農(nóng)們都知道，jQuery完全是通過(guò)美元符號(hào)$來(lái)對(duì)各種元素進(jìn)行操作！根據(jù)HTML元素的id、class、name等屬性來(lái)獲取到元素并對(duì)其進(jìn)行取值、賦值、修改屬性等行為，也就是直接操作DOM。

比如我們公司前些日子正在做的一個(gè)教育平臺(tái)的webOS項(xiàng)目，技術(shù)棧用的正是vue+webpack這對(duì)黃金組合。剛開始我是直接下載vue.js文件，并用script標(biāo)簽引入，此時(shí)vue會(huì)被注冊(cè)為一個(gè)全局變量。

當(dāng)時(shí)我還是習(xí)慣性的沿用jq的思想，想直接操作dom，通過(guò)id或class來(lái)獲取元素，并為其切換class，達(dá)到改變樣式的目的。但是，這樣的想法一開始就是錯(cuò)誤的，因?yàn)槟阋呀?jīng)用了vue作為開發(fā)框架，就不能再按照jquery的思想去直接操作dom了。

當(dāng)時(shí)還被籠罩在jq舊時(shí)代的我，可以說(shuō)是被難住了。按照我以前的開發(fā)經(jīng)驗(yàn)，如果不直接操作dom，難道vue還有更先進(jìn)的辦法嗎？答案是，有的。

vue大法好，應(yīng)該有的盡量有。在vue的王國(guó)里，操作元素的class列表和內(nèi)聯(lián)樣式，是數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求。 那vue的辦法就是，用v-bind去綁定它們。

先來(lái)聊聊綁定HTML Class，舉個(gè)例子：

上面的語(yǔ)法表示，類名active的存在與否，取決于數(shù)據(jù)屬性isActive的boolean值是true or false。

另外，你也可以在對(duì)象中傳入更多屬性來(lái)動(dòng)態(tài)切換多個(gè)class，比如以下模板：

和如下data：

data: {
　　isActive: true,
　　hasError: false
}

當(dāng)然，vue既然可以綁定class，那么同樣也可以綁定style內(nèi)聯(lián)樣式，同樣貼出代碼：

data: {
　　styleObject: {
　　　　color: "red",
　　　　fontSize: "13px"
　　}
}

自此，vue大法的套路已逐漸清晰。

使用jq需要拿到數(shù)據(jù)后操作dom元素來(lái)實(shí)現(xiàn)，vue直接用v-for來(lái)實(shí)現(xiàn)，不需要我們來(lái)操作dom元素，在這種程度上，我們其實(shí)可以說(shuō)vue實(shí)現(xiàn)了model和view的分離。

Vue大法的慣用套路是：先繪制HTML界面，然后在需要綁定數(shù)據(jù)的地方寫下v-model、v-on等這些綁定屬性和方法，在顯示數(shù)據(jù)內(nèi)容的地方使用雙大括號(hào)顯示內(nèi)容。然后在Vue中，el屬性綁定根視圖的id，data屬性定義并初始化v-model、雙大括號(hào)用到的數(shù)據(jù)和一些其他數(shù)據(jù)。methods屬性定義在v-on中用到的和一些其他方法。更新界面修改數(shù)據(jù)實(shí)現(xiàn)。而修改數(shù)據(jù)通過(guò)操作界面實(shí)現(xiàn)。

在寫完了這個(gè)demo后，我感覺(jué)到了Vue的確有它的魅力所在。它的MVVM讓業(yè)務(wù)邏輯變得更加清晰和簡(jiǎn)單。

vue.js能在那么多前端框架中脫穎而出確實(shí)有它的獨(dú)到之處，組件相較于react有很大特色，開發(fā)效率相當(dāng)高，打包的時(shí)候可以把所有的東西都整合到 js 文件中，執(zhí)行效率也很高。不過(guò)傳統(tǒng)的前端開發(fā)最麻煩的就是頻繁的dom操作，有時(shí)候還會(huì)有性能問(wèn)題。

還有，后端人員上手 Vue.js 的效率應(yīng)該會(huì)比傳統(tǒng)前端人員上手的快，因?yàn)榇蠖鄶?shù)后端的模板都是數(shù)據(jù)綁定，而傳統(tǒng)前端又有先入為主的思想，會(huì)受到以前開發(fā)思路的影響，反而降低了上手效率。

那么，在棄用JQ的日子里，Vue是否能承擔(dān)起操作dom的重任呢？

尤雨溪說(shuō)，我們Vue 官方是不建議直接操作 DOM 的，Vue 的用途在于視圖和數(shù)據(jù)的綁定。如果通過(guò)JQuery 直接操作 DOM 的話，勢(shì)必會(huì)造成視圖數(shù)據(jù)和模型數(shù)據(jù)的不匹配，這樣 Vue 就失去它存在的意義了。

既然vue不能直接操作dom，而我又不想完全棄用jQuery，那么請(qǐng)問(wèn)jQuery和VueJS能否一起使用呢？

答案自然是可以的。JQuery 和 VueJS 合理使用并不會(huì)造成沖突，因?yàn)樗麄兊膫?cè)重點(diǎn)不同，VueJS 側(cè)重?cái)?shù)據(jù)綁定和視圖組件，JQuery 側(cè)重異步請(qǐng)求和動(dòng)畫效果。如果使用JQuery + VueJS 開發(fā)，一定要在 Vue 渲染完所有的 HTML組件之后再通過(guò) JQuery 處理，而使用 JQuery 時(shí)應(yīng)避免直接操作 DOM ，但是應(yīng)用動(dòng)畫是允許的。

JQuery 與 VueJS 相互配合可以非常高效的完成異步任務(wù)，首先通過(guò) JQuery 發(fā)出 Ajax 請(qǐng)求，接收到從服務(wù)器端傳遞過(guò)來(lái)的 JSON 數(shù)據(jù)后，再通過(guò) Vue 將數(shù)據(jù)綁定到組件上，最后由 JQuery 進(jìn)行動(dòng)畫處理，整個(gè)過(guò)程就如行云流水般自然。

說(shuō)句題外話，Vue 的目的不是取代 JQuery，它是為了解決前后端分離而出現(xiàn)的。如果沒(méi)有數(shù)據(jù)變化，只是單純的樣式變化，則沒(méi)有必要去大費(fèi)周章進(jìn)行視圖模型的綁定，并且還不利于 SEO 優(yōu)化。

jQuery本質(zhì)上只是一個(gè)簡(jiǎn)化了的操作函數(shù)庫(kù)而已，代表的是優(yōu)化過(guò)的JavaScript dom操作。vue的話是一個(gè)能提供動(dòng)態(tài)綁定等等功能的一個(gè)框架，把你從復(fù)雜繁瑣的dom操作中解放出來(lái)了，代表的是虛擬dom的新思路。其實(shí)兩者并沒(méi)有什么功能上的交集，如果你非要問(wèn)可不可以用vue來(lái)實(shí)現(xiàn)jQuery所能實(shí)現(xiàn)的功能的話，我只想說(shuō)，能，并且更加簡(jiǎn)潔。

在公司里用了大半年Vue，體驗(yàn)不用說(shuō)，個(gè)人感覺(jué)VueJS是MVVM 里最好的。用 Node.js 來(lái)做前后端分離，開發(fā)效率實(shí)在太快了。其實(shí) vue 有個(gè)好基友 Vuex 類Flux數(shù)據(jù)流控制框架，和 Vue 配合起來(lái)才是移動(dòng)端 WebApp 大殺器。開發(fā)體驗(yàn)非常接近 React Native + Redux，思維上可以做到非常好的切換。今年在前端圈內(nèi)極有可能會(huì)大爆發(fā)～

至此，學(xué)習(xí)vue已有一段時(shí)間了，不斷的填坑，es6，vue-router，vuex，webpack，看來(lái)我還有好長(zhǎng)一段路要走。關(guān)于后來(lái)我是如何從DOM操作的時(shí)代毫無(wú)壓力地過(guò)渡到了MVVM的時(shí)代，我們下一篇再聊。

以上，是我今天分享的所有內(nèi)容，中篇即將更新。

聲明  
歡迎轉(zhuǎn)載，請(qǐng)注明出處和作者，同時(shí)保留聲明。  
作者：閏土少年 
出處：http://www.cnblogs.com/runnin...
本博客的文章如無(wú)特殊說(shuō)明，均為原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。如未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。

想了解我的更多動(dòng)態(tài)？歡迎關(guān)注我的微信公眾號(hào)：閏土哥的前端路