本指南更適合那些可能具有多年jQuery經驗並希望了解如何使用Vue來完成工作的人。考慮到這一點，我將重點介紹我所認為的“核心”jQuery用例。我不會涵蓋每一個可能的特性，而是用“我經常使用jQuery來完成 [X]”的方式來代替，這種方式可能更適合那些考慮學習Vue的人。

(注意：我編寫示例的方式只是執行一個任務的一種方式。jQuery和Vue都提供了多種方法來實現相同的目標，這是一件很棒的事情!)

記住了這一點，我們來思考一些可以使用jQuery完成的高階的東西:

在DOM中找到某些東西(稍後再用它做一些事情)修改DOM中的某些東西(例如一個段落的文字或一個按鈕的類)讀取和設定表單值表單驗證(實際上是上面各項的一個組合)ajax呼叫和處理結果事件處理(例如點選按鈕，做某些事情)測量或改變元素的樣式

當然，jQuery還有更多的功能，但是這些用途(至少在我看來)涵蓋了最常見的用例。還要注意，在上面的列表中有很多異花授粉現象。那麼，我們應該從簡單的一一對應的比較開始嗎?不，沒那麼快。我們先從介紹Vue應用程式中的主要差異開始。

#定義Vue的使用場景

當我們將jQuery加入到頁面上時，我們基本上是在JavaScript程式碼中新增一把瑞士軍刀來處理常見的web開發任務。我們可以按照我們認為合適的順序來處理任何一個用例。例如，今天客戶可能會要求表單驗證，然後在一個月左右後，又要求在站點的頭部新增一個基於Ajax的搜尋表單。

Vue在這方面有一個顯著的不同。當使用Vue開始一個專案時，我們首先會在DOM中定義一個我們希望Vue專用的“區域”。因此，我們來考慮一個簡單的原型web頁面:

在一個典型的jQuery應用程式中，我們可以編寫程式碼來處理頭部、側邊欄和登入表單等。這很簡單:

而在一個Vue應用程式中，我們首先需要指定要處理的內容。假設我們的客戶首先要求我們向loginForm元素新增驗證，那麼我們的Vue程式碼就要指定這一點:

這意味著，如果客戶後來決定讓我們在側邊欄中新增一些內容，那我們通常會新增第二個Vue應用程式:

這是件壞事嗎?絕對不是。我們馬上就會得到封裝的好處。如果我們不小心使用了一個具有泛型名稱的變數(我們都這樣做過)，我們不必擔心它與程式碼的其他部分發生衝突。過後，當客戶端增加了另一個要求時，像這樣將我們獨特的、邏輯化的Vue程式碼集區分開就會確保每一個Vue應用程式不會相互干擾。

所以，是的，這是一件好事。但當我第一次開始使用Vue時，它絕對讓我停了下來。現在，進入我們的用例。

#在DOM中查詢東西

你會發現另一個有趣或可怕的方面是如何“在DOM中查詢東西”。這有點模糊，但我們來考慮一個強有力的例子。我們有一個按鈕，當它被點選時，我們讓一些事情發生。下面是一個簡短的例子，展示了它是怎樣的:

現在我們來將這個例子與用Vue的實現方式進行比較:

這個Vue應用程式有點冗長，但是請注意標記是如何在操作(“click”)和將要呼叫的函式之間建立一個直接連線的。Vue的程式碼並沒有與DOM進行向後繫結(我們在el部分之外定義了它需要執行的地方)。這是Vue最吸引我的地方之一——它能很容易地告訴你將要發生什麼。此外，我不需要過多地擔心ID值和選擇器。如果我更改了按鈕的類或ID，我不需要返回程式碼中去更新選擇器。

我已經添加了一個新的span，現在，當按鈕被單擊時，我們使用另一個選擇器來查詢它，並使用一個jQuery工具方法來更改其中的文字。現在我們來考慮一下Vue版本:

在本例中，我們使用Vue的模板語言(突出顯示的行)來指定我們希望在span中呈現的一個變數，在本例中是resultText。現在，當按鈕被單擊時，我們更改該值，span的內部文字將會自動更改。

#讀寫表單變數

處理表單可能是我們可以用JavaScript做的最常見也是最有用的事情之一。甚至在JavaScript之前，我早期的“web開發”大部分都是通過編寫Perl指令碼來處理表單提交。作為接受使用者輸入的主要方式，表單對web來說一直都是很重要的，而且很可能會在相當長一段時間內保持不變。我們來考慮一個簡單的jQuery例子，它將讀取幾個表單欄位並設定另一個:

這段程式碼演示了jQuery如何通過val( )方法讀寫表單。最後，我們從DOM中獲取四個專案(所有的三個表單欄位和一個按鈕)，並使用簡單的數學方法來生成一個結果。現在我們來考慮一下Vue版本:

這裡介紹了一些有趣的Vue快捷方法。首先，v-model是Vue如何在DOM和JavaScript中的值之間建立雙向資料繫結。data塊變數將自動與表單欄位同步。更改資料，表單就會更新。更改表單，資料就會更新。.number是Vue的一個標誌，用於將表單欄位的繼承字串值視為數字。如果我們不做這一步，按原樣做加法，我們會看到字串加法，而不是算術。我已經使用JavaScript處理了將近一個世紀了，但還是搞砸了。

另一個簡單的“技巧”是@click.prevent。首先，@click為按鈕定義了一個單擊處理程式，然後.prevent部分會阻止瀏覽器提交表單的預設行為(相當於event.preventDefault( ))。

雖然這主要是我個人的感覺，但我非常喜歡在用Vue編寫指令碼時，指令碼中沒有查詢選擇器，以及HTML如何更清楚地顯示它在做什麼。

Vue的一個更酷的特性是computed properties（計算屬性）。它們是虛擬值，可以識別其派生值何時被更新。在上面的程式碼中，只要兩個表單欄位中的任何一個發生更改，總和就會更新。這也適用於表單欄位之外。我們可以這樣渲染其總和:

#使用Ajax

值得稱讚的是，jQuery使Ajax的使用變得非常簡單。事實上，我可以說我已經以一種“普通”的方式完成了Ajax，可能總共只有一次（如果你對此很好奇，你可以檢視XMLHttpRequest規範，並且你可能會為你已經避免了它而感到高興）。jQuery簡單的$.get(…)方法在很多情況下都能工作，並且當它需要在更復雜的東西中使用時，$.ajax()也能使它變得簡單。jQuery做得很好的另一件事是它處理JSONP請求的方式。雖然現在使用CORS基本上沒有必要，但JSONP是一種處理向不同域中的API發出請求的方法。

那麼，Vue如何讓Ajax變得更簡單呢?沒有什麼!

好吧，聽起來很嚇人，但其實並不可怕。有許多處理HTTP請求的選項，而Vue.js採用了一種更不可知的方式，讓我們開發人員決定如何處理它。所以，是的，這確實意味著更多的工作，但我們有一些不錯的選擇。

首先應該考慮的是Axios，這是一個Promise-based庫，在Vue社群中非常流行。下面是一個使用它的簡單的例子(摘自它們的README檔案):

Axios支援POST請求，當然，它也允許我們在許多其他選項中指定標頭檔案。

雖然Axios在Vue開發人員中非常流行，但我並不是真心喜歡它。(至少現在還沒有。)相反，我更喜歡Fetch。Fetch不是一個外部庫，而是執行HTTP請求的一種web標準方法。Fetch在大約90%的瀏覽器

上都有很好的支援，雖然這意味著使用它並不完全安全，但是我們總是可以使用一個我們需要的polyfill。

和Axios一樣，Fetch也是Promise-based的，並且有一個友好的API:

Axios和Fetch都涵蓋了所有型別的HTTP請求，所以它們都能滿足任意數量的需求。讓我們看一個簡單的比較。下面是一個使用了星球大戰API的簡單jQuery演示。

在上面的示例中，我使用$.get呼叫該API並返回一個電影列表。然後我用這些資料生成一個標題列表作為 li 標記元素，並將其全部插入到一個ul塊中。

現在，讓我們考慮一個使用Vue的例子:

其中最好的部分可能是使用v-for模板。注意Vue是如何做到與佈局無關的(至少與JavaScript無關)。資料是從該API中獲取的。它被分配了一個變數。佈局處理如何顯示它。我一直討厭在我的JavaScript中使用HTML，但是jQuery提供了解決方案，把它嵌入到Vue中看起來就很自然很合適。

#一個完整的（在某種程度上有點瑣碎）例子

為了更好地理解它，讓我們考慮一個更真實的例子。我們的客戶要求我們為一個產品API構建一個支援Ajax的前端搜尋介面。功能列表包括:

支援按名稱和產品類別進行過濾我們必須提供搜尋項或類別的表單驗證當API被點選時，向用戶顯示一條訊息並禁用提交按鈕完成後，對未顯示產品進行報告或列出匹配項

我們從jQuery版本開始。首先, HTML部分如下:

有一個帶有兩個過濾器和兩個div的表單。一個用做搜尋或報告錯誤時的臨時狀態，另一個用於呈現結果。現在，檢查程式碼。

程式碼首先為要處理的每個DOM項(表單欄位、按鈕和div)建立一組變數。程式碼的邏輯核心在按鈕的點選處理程式中。我們進行驗證，如果一切正常，就對該API執行一個POST請求。當請求返回時，我們要麼呈現結果

，要麼在沒有匹配的情況下顯示訊息。

你可以使用下面的CodePen來執行這個演示的完整版本。

現在讓我們考慮Vue版本。同樣，我們先從佈局開始:

從頂部看，其中的變化包括:

用一個div包裝佈局，可以讓Vue知道在哪裡執行。對錶單欄位使用v-model，以便它能輕鬆處理資料。使用@click.prevent處理執行主搜尋操作。使用 :disabled 在這個Vue應用程式中將按鈕繫結到一個值，無論按鈕是否禁用 (我們稍後將看到它的實際操作)。狀態值與前面的示例稍有不同。jQuery有一個特定的方法來設定DOM項中的文字和HTML中的文字，而Vue在將HTML分配給要呈現的值時需要使用v-html。如果我們在HTML中直接編寫{{status}}，標籤將被轉義。最後，使用v-if條件性地呈現結果列表，同時使用v-for來處理迭代。

現在讓我們看看程式碼。

值得呼叫的第一個塊是data欄位集。有些對映到表單欄位，有些對映到結果、狀態訊息等等。searchProducts方法處理的內容與jQuery版本大致相同，但通常直接繫結到DOM的程式碼要少得多。例如，即使我們知道結果是以一個無序列表列出的，但程式碼本身並不關心這一點。它只是進行賦值，標記才處理呈現值。總的來說，與jQuery程式碼相比，JavaScript程式碼更關心邏輯，jQuery程式碼“感覺”是更好的分離了關注點。

和以前一樣，這裡有一個CodePen可以讓你自己試試:

#jQuery將死! Vue萬歲!

好吧，這有點過分了。正如我在開始時所說的，如果你喜歡使用jQuery並且它對你有用的話，那我覺得你完全沒必要更改任何東西。

不過，我想說的是，對於習慣使用jQuery的人來說，Vue似乎是一個很好的“下一步”。Vue支援複雜的應用程式，併為搭建和構建專案提供了一個非常棒的命令列工具。但是對於更簡單的任務來說，Vue是一個很棒的“現代jQuery”的替代品，它已經成為我開發的可選工具!

有關使用Vue替代jQuery的另一個觀點，請檢視Sarah Drasner的“使用Vue.js替換jQuery:無需構建步驟”，因為它包含了其他一些超級有用的例子。