摘要：至于我為何要這么做，請聽閏土娓娓道來。那么接下來，正文從這開始熟悉閏土的朋友都知道，我是從時代過來的前端，在剛接觸和這類框架的時候，完全可以用一臉懵逼來形容我，最為貼切。作者閏土少年出處本博客的文章如無特殊說明，均為原創，轉載請注明出處。

在我動筆寫這篇文章的時候，我剛剛從我的項目中刪除了最后一行JQuery代碼。至于我為何要這么做，請聽閏土娓娓道來。前幾年我還在想，假如有一天，前端世界里不能再直接操作dom了，我該怎么辦？沒想到竟一語成讖，這一天終究還是來了......

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

那么接下來，正文從這開始~

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

我在想，如果能從一開始學的時候，把之前的開發思路忘掉，就當自己從來沒學過編程，以一種空杯心態從零開始學的話，應該會比較快。之前沒有考慮到思路轉換這一步，走了彎路。現在想想，有種欲練此功，必先自宮的感覺。

相信從JQ時代過來的前端碼農們都知道，jQuery完全是通過美元符號$來對各種元素進行操作！根據HTML元素的id、class、name等屬性來獲取到元素并對其進行取值、賦值、修改屬性等行為，也就是直接操作DOM。

比如我們公司前些日子正在做的一個教育平臺的webOS項目，技術棧用的正是vue+webpack這對黃金組合。剛開始我是直接下載vue.js文件，并用script標簽引入，此時vue會被注冊為一個全局變量。

當時我還是習慣性的沿用jq的思想，想直接操作dom，通過id或class來獲取元素，并為其切換class，達到改變樣式的目的。但是，這樣的想法一開始就是錯誤的，因為你已經用了vue作為開發框架，就不能再按照jquery的思想去直接操作dom了。

當時還被籠罩在jq舊時代的我，可以說是被難住了。按照我以前的開發經驗，如果不直接操作dom，難道vue還有更先進的辦法嗎？答案是，有的。

vue大法好，應該有的盡量有。在vue的王國里，操作元素的class列表和內聯樣式，是數據綁定的一個常見需求。 那vue的辦法就是，用v-bind去綁定它們。

先來聊聊綁定HTML Class，舉個例子：

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

另外，你也可以在對象中傳入更多屬性來動態切換多個class，比如以下模板：

和如下data：

data: {
　　isActive: true,
　　hasError: false
}

當然，vue既然可以綁定class，那么同樣也可以綁定style內聯樣式，同樣貼出代碼：

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

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

使用jq需要拿到數據后操作dom元素來實現，vue直接用v-for來實現，不需要我們來操作dom元素，在這種程度上，我們其實可以說vue實現了model和view的分離。

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

在寫完了這個demo后，我感覺到了Vue的確有它的魅力所在。它的MVVM讓業務邏輯變得更加清晰和簡單。

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

還有，后端人員上手 Vue.js 的效率應該會比傳統前端人員上手的快，因為大多數后端的模板都是數據綁定，而傳統前端又有先入為主的思想，會受到以前開發思路的影響，反而降低了上手效率。

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

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

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

答案自然是可以的。JQuery 和 VueJS 合理使用并不會造成沖突，因為他們的側重點不同，VueJS 側重數據綁定和視圖組件，JQuery 側重異步請求和動畫效果。如果使用JQuery + VueJS 開發，一定要在 Vue 渲染完所有的 HTML組件之后再通過 JQuery 處理，而使用 JQuery 時應避免直接操作 DOM ，但是應用動畫是允許的。

JQuery 與 VueJS 相互配合可以非常高效的完成異步任務，首先通過 JQuery 發出 Ajax 請求，接收到從服務器端傳遞過來的 JSON 數據后，再通過 Vue 將數據綁定到組件上，最后由 JQuery 進行動畫處理，整個過程就如行云流水般自然。

說句題外話，Vue 的目的不是取代 JQuery，它是為了解決前后端分離而出現的。如果沒有數據變化，只是單純的樣式變化，則沒有必要去大費周章進行視圖模型的綁定，并且還不利于 SEO 優化。

jQuery本質上只是一個簡化了的操作函數庫而已，代表的是優化過的JavaScript dom操作。vue的話是一個能提供動態綁定等等功能的一個框架，把你從復雜繁瑣的dom操作中解放出來了，代表的是虛擬dom的新思路。其實兩者并沒有什么功能上的交集，如果你非要問可不可以用vue來實現jQuery所能實現的功能的話，我只想說，能，并且更加簡潔。

在公司里用了大半年Vue，體驗不用說，個人感覺VueJS是MVVM 里最好的。用 Node.js 來做前后端分離，開發效率實在太快了。其實 vue 有個好基友 Vuex 類Flux數據流控制框架，和 Vue 配合起來才是移動端 WebApp 大殺器。開發體驗非常接近 React Native + Redux，思維上可以做到非常好的切換。今年在前端圈內極有可能會大爆發～

至此，學習vue已有一段時間了，不斷的填坑，es6，vue-router，vuex，webpack，看來我還有好長一段路要走。關于后來我是如何從DOM操作的時代毫無壓力地過渡到了MVVM的時代，我們下一篇再聊。

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

聲明  
歡迎轉載，請注明出處和作者，同時保留聲明。  
作者：閏土少年 
出處：http://www.cnblogs.com/runnin...
本博客的文章如無特殊說明，均為原創，轉載請注明出處。如未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

想了解我的更多動態？歡迎關注我的微信公眾號：閏土哥的前端路