長期使用jQuery，最近轉(zhuǎn)向Vue 的開發(fā)者，或許會對兩者遷移過程感興趣。

首先要明確一點，我並非建議大家放棄jQuery。雖然現(xiàn)在流行這種說法，幾年前我自己也寫過類似的文章（“我如何（不）使用jQuery”）。如果jQuery 能滿足你的需求，並且你的最終用戶也能順利使用你的網(wǎng)站，那就繼續(xù)使用它吧。

本指南主要面向那些擁有多年jQuery 使用經(jīng)驗，並希望了解如何在Vue 中完成相同任務(wù)的開發(fā)者。因此，我將重點關(guān)注我認(rèn)為jQuery 的“核心”用例。我不會涵蓋所有可能的特性，而是採用“我經(jīng)常用jQuery 做[X]”的方法，這可能更容易讓考慮學(xué)習(xí)Vue 的人產(chǎn)生共鳴。 （順便說一句，還要注意，我編寫示例的方式只是一種完成任務(wù)的方法。jQuery 和Vue 都提供了多種方法來實現(xiàn)相同的目標(biāo)，這是一件好事?。?/p>

因此，讓我們考慮一些我們可能會求助於jQuery 的高級任務(wù)：

• 在DOM 中查找元素（以便稍後對其進(jìn)行操作）
• 更改DOM 中的內(nèi)容（例如，段落的文本或按鈕的類）
• 讀取和設(shè)置表單值
• 表單驗證（實際上只是上述各項的組合）
• Ajax 調(diào)用和處理結(jié)果
• 事件處理（例如，單擊按鈕時執(zhí)行操作）
• 測量或更改元素的樣式

當(dāng)然，jQuery 的功能遠(yuǎn)不止這些，但這些用途（至少在我看來）涵蓋了最常見的用例。還要注意，上述列表中有很多交叉關(guān)聯(lián)。那麼，我們應(yīng)該從逐一比較每個功能開始嗎？不，別著急。讓我們先介紹Vue 應(yīng)用程序的主要區(qū)別。

定義Vue 的“作用範(fàn)圍”

當(dāng)我們將jQuery 添加到頁面時，我們實際上是在JavaScript 代碼中添加了一把瑞士軍刀，用於處理常見的Web 開發(fā)任務(wù)。我們可以按照我們認(rèn)為合適的任何順序執(zhí)行任何用例。例如，客戶今天可能需要表單驗證，然後在一個月左右的時間裡，要求在網(wǎng)站的頁眉中添加一個基於Ajax 的搜索表單。

Vue 在這方面有一個顯著的區(qū)別。在開始使用Vue 項目時，我們首先定義要在DOM 中關(guān)注的“區(qū)域”。因此，讓我們考慮一個簡單的原型網(wǎng)頁：

<header>
  花哨的頁眉內(nèi)容</header>
<div id="sidebar">
  一些側(cè)邊欄內(nèi)容</div>

<main>
  <p id="main-content">
    主要的網(wǎng)站內(nèi)容，非常重要的內(nèi)容……
  </p>
  <div id="loginForm">
    當(dāng)然還有登錄表單</div>
</main>

在典型的jQuery 應(yīng)用程序中，我們可能會編寫代碼來處理頁眉、側(cè)邊欄和登錄表單等。沒什麼大不了的：

 $(document).ready(function() {

  $('header') // 做一些事情...

  $('#sidebar') // 做一些事情...

  $('#loginForm') // 做一些事情...

});

在Vue 應(yīng)用程序中，我們首先指定要處理的內(nèi)容。假設(shè)我們的客戶首先要求向loginForm 元素添加驗證。我們的Vue 代碼將指定這一點：

 new Vue({
  el: '#loginForm',
  // 代碼在這裡...
});

這意味著如果客戶後來決定向側(cè)邊欄添加一些內(nèi)容，我們通常會添加一個第二個Vue 應(yīng)用程序：

 new Vue({
  el: '#loginForm',
  // 代碼在這裡...
});

new Vue({
  el: '#sidebar',
  // 代碼在這裡...
});

這是壞事嗎？絕對不是。我們立即獲得了封裝的好處。如果我們意外地使用了具有通用名稱的變量（我們都做過），我們不必?fù)?dān)心與代碼的其他部分發(fā)生衝突。當(dāng)客戶以後添加另一個請求時，像這樣將我們獨特的、邏輯的Vue 代碼集分開，讓我們安心，不用擔(dān)心它們會互相干擾。

所以，這是一件好事。但是當(dāng)我第一次開始使用Vue 時，它確實讓我停頓了一下?，F(xiàn)在，讓我們來看我們的用例。

在DOM 中查找元素

你會發(fā)現(xiàn)另一個有趣或令人害怕的方面是如何“在DOM 中查找元素”。這有點含糊，但讓我們考慮一個具體的例子。我們有一個按鈕，當(dāng)單擊它時，我們會讓某些事情發(fā)生。這是一個簡化的示例：

<button id="myButton">點擊我！</button>

 $(document).ready(function() {

  $('#myButton').click(function() {
    alert(1);
  });

});

現(xiàn)在讓我們將其與Vue 的實現(xiàn)方式進(jìn)行比較：

<div id="app">
  <button>點擊我！</button>
</div>

const app = new Vue({
  el: '#app',
  methods: {
    doSomething: function() {
      alert(1);
    }
  }
});

Vue 應(yīng)用程序比較冗長，但請注意，標(biāo)記之間如何直接連接操作（“click”）和將要調(diào)用的函數(shù)。 Vue 的代碼與DOM 沒有關(guān)聯(lián)（除了el 部分，我們在其中定義它需要工作的地方）。這很容易成為最讓我信服Vue 的事情之一——它更容易理解正在發(fā)生的事情。此外，我不必太擔(dān)心ID 值和選擇器。如果我更改按鈕的類或ID，我不需要返回到我的代碼中並擔(dān)心更新選擇器。

讓我們考慮另一個示例：查找和更改DOM 中的文本。想像一下，單擊該按鈕後，現(xiàn)在會更改DOM 另一部分的文本。

<button id="myButton">點擊我！</button>

$(document).ready(function() {

  $('#myButton').click(function() {
    $('#result').text('你點擊了我，謝謝！');
  });

});

我添加了一個新的span，現(xiàn)在，當(dāng)單擊按鈕時，我們使用另一個選擇器來查找它，並使用jQuery 實用程序方法來更改其內(nèi)部的文本?，F(xiàn)在考慮Vue 版本：

<div id="app">
  <button>點擊我！</button>
  <span>{{ resultText }}</span>
</div>

const app = new Vue({
  el: '#app',
  data: {
    resultText: ''
  },
  methods: {
    doSomething: function() {
      this.resultText = '你點擊了我，謝謝！ ';
    }
  }
});

在此示例中，我們使用Vue 的模板語言（突出顯示的行）來指定我們要在span 內(nèi)渲染一個變量，在本例中為resultText?，F(xiàn)在，當(dāng)單擊按鈕時，我們更改該值，span 的內(nèi)部文本將自動更改。

順便說一句，Vue 支持v-on 屬性的簡寫，因此示例中的按鈕可以用@click="doSomething" 來代替。

讀取和寫入表單變量

處理表單可能是我們可以用JavaScript 完成的最常見和最有用的事情之一。甚至在JavaScript 之前，我早期的大部分“Web 開發(fā)”都是編寫Perl 腳本以處理表單提交。作為接受用戶輸入的主要方式，表單一直對Web 至關(guān)重要，並且在相當(dāng)長的一段時間內(nèi)可能仍然如此。讓我們考慮一個讀取一些表單字段並設(shè)置另一個字段的簡單jQuery 示例：

= 求和

$(document).ready(function() {
  let $first = $('#first');
  let $second = $('#second');
  let $sum = $('#sum');
  let $button = $('#sumButton');

  $button.on('click', function(e) {
    e.preventDefault();
    let total = parseInt($first.val(), 10) parseInt($second.val(), 10);
    $sum.val(total);
  });
});

這段代碼演示了jQuery 如何通過val() 方法讀取和寫入。我們最終從DOM 中獲取四個項目（所有三個表單字段和按鈕），並使用簡單的數(shù)學(xué)運算來生成結(jié)果?，F(xiàn)在考慮Vue 版本：

= 求和

new Vue({
  el: '#myForm',
  data: {
    first: 0,
    second: 0,
    sum: 0
  },
  methods: {
    doSum: function() {
      this.sum = this.first this.second;
    }
  }
})

這引入了一些有趣的Vue 快捷方式。首先，v-model 是Vue 如何在DOM 和JavaScript 中的值之間創(chuàng)建雙向數(shù)據(jù)綁定的方式。數(shù)據(jù)塊變量將自動與表單字段同步。更改數(shù)據(jù)，表單就會更新。更改表單，數(shù)據(jù)就會更新。 .number 是一個標(biāo)誌，指示Vue 將表單字段的繼承字符串值視為數(shù)字。如果我們省略它並進(jìn)行加法運算，我們將看到字符串加法而不是算術(shù)運算。我已經(jīng)使用JavaScript 近一個世紀(jì)了，仍然會搞砸這個。

另一個巧妙的“技巧”是@click.prevent。首先，@click 定義按鈕的點擊處理程序，然後.prevent 部分阻止瀏覽器提交表單的默認(rèn)行為（相當(dāng)於event.preventDefault()）。

最後一點是綁定到該按鈕的doSum 方法的添加。請注意，它只是使用數(shù)據(jù)變量（Vue 在this 範(fàn)圍內(nèi)提供）。

雖然這主要是我個人的感受，但我真的很喜歡在Vue 中編寫時腳本中缺少查詢選擇器，以及HTML 如何更清晰地說明它在做什麼。

最後，我們甚至可以完全擺脫按鈕：

=

new Vue({
  el: '#myForm',
  data: {
    first: 0,
    second: 0
  },
  computed: {
    sum: function() {
      return this.first this.second;
    }
  }
})

Vue 的一個更酷的特性是計算屬性。它們是虛擬值，可以識別其派生值何時更新。在上面的代碼中，只要兩個表單字段中的任何一個發(fā)生更改，sum 就會更新。這在表單字段之外也能工作。我們可以像這樣渲染sum：

總計是{{sum}}。

使用Ajax

jQuery 使使用Ajax 變得多麼容易，這值得稱讚。事實上，我可以說我“原生”的方式使用Ajax 的次數(shù)可能總共只有一次。 （如果您好奇，您可以查看XMLHttpRequest 的規(guī)範(fàn)，並且可能會很高興您自己避免了它。）jQuery 的簡單$.get(...) 方法在很多情況下都有效，當(dāng)需要更複雜的東西時，$.ajax() 也使其變得很容易。 jQuery 做得很好的另一件事是它處理JSONP 請求的方式。雖然現(xiàn)在使用CORS 大多不需要JSONP，但JSONP 是一種處理對不同域上的API 進(jìn)行請求的方式。

那麼，Vue 為您做了什麼來使Ajax 更容易呢？什麼也沒有！

好的，這聽起來很可怕，但實際上並非如此。有很多選項可用於處理HTTP 請求，而Vue.js 採取了一種更不可知論的方法，讓我們開發(fā)者自己決定如何處理它。所以是的，這確實意味著更多工作，但我們有一些很棒的選擇。

第一個要考慮的是Axios，這是一個基於Promise 的庫，在Vue 社區(qū)中非常流行。以下是它在行動中的一個簡單示例（取自其自述文件）：

 axios.get('/user?ID=12345')
  .then(function (response) {
    // 處理成功console.log(response);
  })
  .catch(function (error) {
    // 處理錯誤console.log(error);
  })
  .then(function () {
    // 始終執(zhí)行});

Axios 當(dāng)然支持POST 請求，並讓我們指定標(biāo)頭以及許多其他選項。

雖然Axios 在Vue 開發(fā)人員中非常流行，但我並沒有真正喜歡它。 （至少現(xiàn)在還沒有。）相反，我更喜歡Fetch。 Fetch不是一個外部庫，而是一種執(zhí)行HTTP 請求的Web 標(biāo)準(zhǔn)方式。 Fetch 在大約90% 的瀏覽器中都具有很好的支持，但這意味著它並非完全安全，但如果需要，我們始終可以使用polyfill。

雖然這完全超出了我們在這裡討論的範(fàn)圍，但Kingsley Silas 已經(jīng)編寫了一份關(guān)於使用Axios 和Fetch 與React 的優(yōu)秀指南。

與Axios 一樣，F(xiàn)etch 也是基於Promise 的，並且具有友好的API：

 fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Axios 和Fetch 都涵蓋所有類型的HTTP 請求，因此任何一種都適合任何數(shù)量的需求。讓我們來看一個簡單的比較。這是一個使用Star Wars API 的簡單jQuery 演示。

<h1>星球大戰(zhàn)電影</h1>

$(document).ready(function() {
  $.get('https://swapi.com/api/films', function(res) {
    let list = '';
    res.results.forEach(function(r) {
      list = `

${r.title}

`; }); $('#films').html(list); }); });

在上面的示例中，我使用$.get 來訪問API 並返回電影列表。然後我使用該數(shù)據(jù)生成一個作為li 標(biāo)籤元素的標(biāo)題列表，並將其全部插入到ul 塊中。

現(xiàn)在，讓我們考慮使用Vue 的示例：

  <h1>星球大戰(zhàn)電影</h1>
  
{{ film.title }}

const app = new Vue({
  el: '#app',
  data: {
    films: []
  },
  created() {
    fetch('https://swapi.com/api/films')
      .then(res => res.json())
      .then(res => {
        this.films = res.results;
      });
  }
})

這最好的部分可能是v-for 模板的使用。請注意，Vue 不關(guān)心佈局（至少是JavaScript）。數(shù)據(jù)是從API 中獲取的。它被分配了一個變量。佈局負(fù)責(zé)顯示它。我一直討厭在我的JavaScript 中使用HTML，雖然jQuery 存在解決這個問題的方案，但將其烘焙到Vue 中使其成為自然的選擇。

一個完整的（雖然有點瑣碎）示例

為了更深入地了解，讓我們考慮一個更真實的示例。我們的客戶要求我們?yōu)楫a(chǎn)品API 構(gòu)建一個高級的、支持Ajax 的前端搜索界面。功能列表包括：

• 支持按名稱和產(chǎn)品類別進(jìn)行篩選
• 表單驗證，要求我們提供搜索詞或類別
• 當(dāng)API 正在訪問時，向用戶顯示消息並禁用提交按鈕
• 完成後，處理報告未顯示任何產(chǎn)品或列出匹配項

讓我們從jQuery 版本開始。首先是HTML：

搜尋 類別 所有 食品 遊戲 搜尋

有一個帶有我們的兩個過濾器和兩個div 的表單。一個在搜索或報告錯誤時用作臨時狀態(tài)，另一個用於呈現(xiàn)結(jié)果?，F(xiàn)在，查看代碼。

 // ... (代碼太長，此處省略) ...

代碼首先為我們要使用的每個DOM 項目創(chuàng)建一組變量——表單字段、按鈕和div。邏輯的核心位於按鈕的點擊處理程序中。我們進(jìn)行驗證，如果一切正常，則對API 進(jìn)行POST 請求。當(dāng)它返回時，如果沒有任何匹配項，我們要么呈現(xiàn)結(jié)果，要么顯示消息。

現(xiàn)在讓我們考慮Vue 版本。同樣，讓我們從佈局開始：

<div id="app">
  <form>
    <p>
      <label for="search">搜尋</label>
      <input type="text" v-model="search" id="search">
    </p>
    <p>
      <label for="category">類別</label>
      <select v-model="category" id="category">
        <option value="">所有</option>
        <option value="Food">食品</option>
        <option value="Games">遊戲</option>
      </select>
    </p>
    <button :disabled="searchBtnDisabled">搜尋</button>
  </form>

  <div v-html="status"></div>
  <ul v-if="results"><li v-for="result in results">{{ result.name }}</li></ul>
</div>

從頂部開始，更改包括：

• 將佈局包裝在一個div 中，以便讓Vue 知道在哪里工作。
• 使用v-model 用於表單字段，以便輕鬆處理數(shù)據(jù)。
• 使用@click.prevent 來處理主要搜索操作。
• 使用:disabled 將按鈕是否禁用的狀態(tài)綁定到Vue 應(yīng)用程序中的值（我們稍後會看到它的作用）。
• status 值與之前的示例略有不同。雖然jQuery 有一個特定方法來設(shè)置DOM 項目中的文本，另一個方法用於HTML，但Vue 在將HTML 分配給要呈現(xiàn)的值時需要使用v-html。如果我們嘗試使用帶有HTML 的{{status}}，則標(biāo)籤將被轉(zhuǎn)義。
• 最後，使用v-if 有條件地呈現(xiàn)結(jié)果列表以及v-for 來處理迭代。

現(xiàn)在讓我們看看代碼。

 // ... (代碼太長，此處省略) ...

第一個值得一提的代碼塊是一組數(shù)據(jù)字段。有些映射到表單字段，而另一些映射到結(jié)果、狀態(tài)消息等。 searchProducts 方法處理與jQuery 版本中大部分相同的內(nèi)容，但總的來說，直接與DOM 綁定的代碼要少得多。例如，即使我們知道結(jié)果列在一個無序列表中，代碼本身也不關(guān)心這一點。它只是分配值，而標(biāo)記負(fù)責(zé)呈現(xiàn)它。總的來說，與jQuery 代碼相比，JavaScript 代碼更關(guān)注邏輯，這“感覺”上是更好的關(guān)注點分離。

jQuery 已逝，Vue 長存！

好吧，這有點誇張了。正如我在開頭所說，如果你喜歡使用jQuery 並且它對你有用，我絕對認(rèn)為你不應(yīng)該更改任何內(nèi)容。

但是，我可以說，對於習(xí)慣使用jQuery 的人來說，Vue 感覺像是很好的“下一步”。 Vue 支持複雜的應(yīng)用程序，並且具有用於腳手架和構(gòu)建項目的強大的命令行工具。但是對於更簡單的任務(wù)，Vue 作為一種很好的“現(xiàn)代jQuery”替代品，已成為我的首選開發(fā)工具！

以上是從jQuery轉(zhuǎn)到Vue的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！