前言
在我動筆寫這篇文章的時候，我剛剛從我的專案中刪除了最後一行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，舉個例子：
<div v-bind:class="{ active: isActive }"></div>
複製程式碼上面的語法表示，類名active的存在與否，取決於資料屬性isActive的boolean值是true or false。
另外，你也可以在物件中傳入更多屬性來動態切換多個class，比如以下模板：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
複製程式碼和如下data：
data: {
isActive: true,
hasError: false
}
複製程式碼當然，vue既然可以繫結class，那麼同樣也可以繫結style內聯樣式，同樣貼出程式碼：
<div v-bind:style="styleObject"></div>
複製程式碼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... 本部落格的文章如無特殊說明，均為原創，轉載請註明出處。如未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。
想了解我的更多動態？歡迎關注我的微信公眾號：閏土哥的前端路
