在沒有DOM操做的日子裏，我是怎麼熬過來的（上）

前言

在我動筆寫這篇文章的時候，我剛剛從個人項目中刪除了最後一行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... 本博客的文章如無特殊說明，均爲原創，轉載請註明出處。如未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。

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