從jQuery轉到Vue-css教學-PHP中文網

首頁

web前端

css教學

從jQuery轉到Vue

William Shakespeare

Apr 21, 2025 am 09:34 AM

Making the Move from jQuery to Vue

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

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

本指南主要面向那些擁有多年jQuery 使用經驗，並希望了解如何在Vue 中完成相同任務的開發者。因此，我將重點關注我認為jQuery 的“核心”用例。我不會涵蓋所有可能的特性，而是採用“我經常用jQuery 做[X]”的方法，這可能更容易讓考慮學習Vue 的人產生共鳴。（順便說一句，還要注意，我編寫示例的方式只是一種完成任務的方法。jQuery 和Vue 都提供了多種方法來實現相同的目標，這是一件好事！）

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

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

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

定義Vue 的“作用範圍”

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

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

<header>
  花哨的頁眉內容</header>
<div id="sidebar">
  一些側邊欄內容</div>

<main>
  <p id="main-content">
    主要的網站內容，非常重要的內容……
  </p>
  <div id="loginForm">
    當然還有登錄表單</div>
</main>

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

 $(document).ready(function() {

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

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

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

});

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

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

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

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

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

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

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

在DOM 中查找元素

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

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

 $(document).ready(function() {

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

});

現在讓我們將其與Vue 的實現方式進行比較：

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

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

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

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

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

$(document).ready(function() {

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

});

我添加了一個新的span，現在，當單擊按鈕時，我們使用另一個選擇器來查找它，並使用jQuery 實用程序方法來更改其內部的文本。現在考慮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 內渲染一個變量，在本例中為resultText。現在，當單擊按鈕時，我們更改該值，span 的內部文本將自動更改。

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

讀取和寫入表單變量

處理表單可能是我們可以用JavaScript 完成的最常見和最有用的事情之一。甚至在JavaScript 之前，我早期的大部分“Web 開發”都是編寫Perl 腳本以處理表單提交。作為接受用戶輸入的主要方式，表單一直對Web 至關重要，並且在相當長的一段時間內可能仍然如此。讓我們考慮一個讀取一些表單字段並設置另一個字段的簡單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 中獲取四個項目（所有三個表單字段和按鈕），並使用簡單的數學運算來生成結果。現在考慮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 中的值之間創建雙向數據綁定的方式。數據塊變量將自動與表單字段同步。更改數據，表單就會更新。更改表單，數據就會更新。 .number 是一個標誌，指示Vue 將表單字段的繼承字符串值視為數字。如果我們省略它並進行加法運算，我們將看到字符串加法而不是算術運算。我已經使用JavaScript 近一個世紀了，仍然會搞砸這個。

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

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

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

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

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

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

總計是{{sum}}。

使用Ajax

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

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

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

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

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

Axios 當然支持POST 請求，並讓我們指定標頭以及許多其他選項。

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

雖然這完全超出了我們在這裡討論的範圍，但Kingsley Silas 已經編寫了一份關於使用Axios 和Fetch 與React 的優秀指南。

與Axios 一樣，Fetch 也是基於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 請求，因此任何一種都適合任何數量的需求。讓我們來看一個簡單的比較。這是一個使用Star Wars API 的簡單jQuery 演示。

<h1 id="星球大戰電影">星球大戰電影</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 並返回電影列表。然後我使用該數據生成一個作為li 標籤元素的標題列表，並將其全部插入到ul 塊中。

現在，讓我們考慮使用Vue 的示例：


  <h1 id="星球大戰電影">星球大戰電影</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 不關心佈局（至少是JavaScript）。數據是從API 中獲取的。它被分配了一個變量。佈局負責顯示它。我一直討厭在我的JavaScript 中使用HTML，雖然jQuery 存在解決這個問題的方案，但將其烘焙到Vue 中使其成為自然的選擇。

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

為了更深入地了解，讓我們考慮一個更真實的示例。我們的客戶要求我們為產品API 構建一個高級的、支持Ajax 的前端搜索界面。功能列表包括：

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

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

有一個帶有我們的兩個過濾器和兩個div 的表單。一個在搜索或報告錯誤時用作臨時狀態，另一個用於呈現結果。現在，查看代碼。

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

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

現在讓我們考慮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 用於表單字段，以便輕鬆處理數據。
使用@click.prevent 來處理主要搜索操作。
使用:disabled 將按鈕是否禁用的狀態綁定到Vue 應用程序中的值（我們稍後會看到它的作用）。
status 值與之前的示例略有不同。雖然jQuery 有一個特定方法來設置DOM 項目中的文本，另一個方法用於HTML，但Vue 在將HTML 分配給要呈現的值時需要使用v-html。如果我們嘗試使用帶有HTML 的{{status}}，則標籤將被轉義。
最後，使用v-if 有條件地呈現結果列表以及v-for 來處理迭代。

現在讓我們看看代碼。

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

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