欧美成人免费一区二区,久久夜色精品国产噜噜麻豆

定義 Vue 的“作用范圍”

在 DOM 中查找元素

讀取和寫入表單變量

使用 Ajax

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

jQuery 已逝，Vue 長存！

首頁

web前端

css教程

從jQuery轉到Vue

William Shakespeare

Apr 21, 2025 am 09:34 AM

Making the Move from jQuery to Vue

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

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

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

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

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

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

定義 Vue 的“作用范圍”

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

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

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

<main>
  <p id="main-content">
    主要的網(wǎng)站內容，非常重要的內容……
  </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',
  // 代碼在這里...
});

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

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

在 DOM 中查找元素

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

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

$(document).ready(function() {

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

});

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

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

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

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

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

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

$(document).ready(function() {

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

});

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

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

讀取和寫入表單變量

處理表單可能是我們可以用 JavaScript 完成的最常見和最有用的事情之一。甚至在 JavaScript 之前，我早期的大部分“Web 開發(fā)”都是編寫 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 中獲取四個項目（所有三個表單字段和按鈕），并使用簡單的數(shù)學運算來生成結果?，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 是一個標志，指示 Vue 將表單字段的繼承字符串值視為數(shù)字。如果我們省略它并進行加法運算，我們將看到字符串加法而不是算術運算。我已經(jīng)使用 JavaScript 近一個世紀了，仍然會搞砸這個。

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

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

雖然這主要是我個人的感受，但我真的很喜歡在 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ī)范，并且可能會很高興您自己避免了它。）jQuery 的簡單 $.get(...) 方法在很多情況下都有效，當需要更復雜的東西時，$.ajax() 也使其變得很容易。jQuery 做得很好的另一件事是它處理 JSONP 請求的方式。雖然現(xiàn)在使用 CORS 大多不需要 JSONP，但 JSONP 是一種處理對不同域上的 API 進行請求的方式。

那么，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 當然支持 POST 請求，并讓我們指定標頭以及許多其他選項。

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

雖然這完全超出了我們在這里討論的范圍，但 Kingsley Silas 已經(jīng)編寫了一份關于使用 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 標簽元素的標題列表，并將其全部插入到 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 不關心布局（至少是 JavaScript）。數(shù)據(jù)是從 API 中獲取的。它被分配了一個變量。布局負責顯示它。我一直討厭在我的 JavaScript 中使用 HTML，雖然 jQuery 存在解決這個問題的方案，但將其烘焙到 Vue 中使其成為自然的選擇。

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

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

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

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

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

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

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

現(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 應用程序中的值（我們稍后會看到它的作用）。
status 值與之前的示例略有不同。雖然 jQuery 有一個特定方法來設置 DOM 項目中的文本，另一個方法用于 HTML，但 Vue 在將 HTML 分配給要呈現(xiàn)的值時需要使用 v-html。如果我們嘗試使用帶有 HTML 的 {{status}}，則標簽將被轉義。
最后，使用 v-if 有條件地呈現(xiàn)結果列表以及 v-for 來處理迭代。

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

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

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