从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 代码更关注逻辑，这“感觉”上是更好的关注点分离。