本指南更适合那些可能具有多年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，我不需要返回代码中去更新选择器。

我们来考虑另一个例子:在DOM中查找和更改文本。想象一下那个按钮，单击它，现在会更改DOM的另一部分的文本。

我已经添加了一个新的span，现在，当按钮被单击时，我们使用另一个选择器来查找它，并使用一个jQuery工具方法来更改其中的文本。现在我们来考虑一下Vue版本:

在本例中，我们使用Vue的模板语言(突出显示的行)来指定我们希望在span中呈现的一个变量，在本例中是resultText。现在，当按钮被单击时，我们更改该值，span的内部文本将会自动更改。

顺便说一句，Vue支持v-on属性的简写，因此示例中的按钮可以用@click=“ doSomething"代替。

#读写表单变量

处理表单可能是我们可以用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( ))。

最后一个是绑定到该按钮的doSum方法进行的相加操作。注意，它只处理数据变量(Vue在this作用域内允许对这些变量进行操作)。

虽然这主要是我个人的感觉，但我非常喜欢在用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。

虽然这完全超出了我们在这里讨论的范围，但是Kingsley Silas写了一本关于在React中使用Axios和Fetch的优秀指南。

和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:无需构建步骤”，因为它包含了其他一些超级有用的例子。