系列文章目录

第一篇：Jquery VS Vue之差异比较概览
第二篇：Jquery VS Vue之元素操作明细对照
第三篇：Jquery VS Vue之事件监听明细对照
第四篇：Jquery VS Vue之网络请求明细对照
第五篇：Jquery VS Vue之杂项方法明细对照
第六篇：Jquery VS Vue之全局属性对照
第七篇：Jquery VS Vue之遍历方法对照
第八篇：Jquery VS Vue之页面动画明细对照

一、前言

比较熟悉Jquery的使用，Vue中的不太熟悉，今天来汇总下jquery中的常用操作在Vue中的对应实现方法。
Jquery中的常用操作包括：网页动态更新、选择器、第三方库的引用、html元素操作、元素动画、Ajax、事件监听及处理、JS原生的接口等，本篇汇总下这些操作在Vue中对应的实现方式。

Jquery参考网站：jQuery 教程 | 菜鸟教程
Vue参考网站：Vue.js 教程 | 菜鸟教程

二、常用方法

1.安装引入：

• jQuery安装及项目结构：
  直接使用script引入Jquery文件即可。
  项目机构自行定义。

• Vue安装及项目结构：
  第一种方式： 同Jquery一样直接使用script引入Vue文件即可。
  第二种方式： 使用npm及vue-cli生产并打包项目。
  项目结构第一种方式时目录结构可以自行定义，第二种方式创建的项目打包后目录结构如下：
  命令行工具 vue-cli（runoob-vue3-test）：
  

  Vite（runoob-vue3-test2）:
  
  Vue目录界面说明：

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。
static	静态资源目录，如图片、字体等。
public	公共资源目录。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
dist	使用 npm run build 命令打包后会生成该目录。

2.网页元素操作：

• jQuery网页元素操作的一些方法：
  jquery可以通过选择器绑定页面dom元素，帮定后可以操作元素属性、值、内容、事件等。如常用的addClass()、after()、append()、appendTo()、attr()、before()、css()、empty()、hasClass()、height()、html()、remove()、removeAttr()、removeClass()、text()、val()、width()等等操作方法。
• Vue网页元素操作的方法：
  Vue中通过模板语法实现元素的更新、属性操作、内容更新等。将所有的元素操作通过代码和模板的方式进行控制。

3.事件监听及处理：

• jQuery事件监听：
  Jquery通过bind、on、one、unbind、off、click、keyup等方法实现元素事件监听处理。
• Vue事件监听：
  Vue使用v-on、@+事件名的方式实现事件的监听。

4.页面动画实现：

• jQuery页面动画：
  Jquery提供动画方法，如hide、show、fadein()、fadeOut()等实现动画效果。
• Vue页面动画：
  vue通过内置组件transition及transition-group的方式实现动画效果，具体的动画类型通过参数的方式进行配置。

5.网页动态更新：

• jQuery页面动态更新：
  Jquery提供html()、remove()、empty()、append()等各种方法动态更新页面内容，也可以使用.load()方法加载外部的html元素。
• Vue页面动态更新：
  Vue使用组件的方式及v-if等标签和模板语法实现页面元素的动态更新。

6.插件引入：

• jQuery插件引入：
  Jquery通过$.extend的方式定义插件内容，通过script标签引入插件js文件使用。
• Vue插件引入：
  vue引入时需要npm进行导入或者script标签进行引入，并且通过import的方式引入到具体的组件进行使用。

7.Ajax网络处理：

• jQuery网络请求：
  Jquery通过$.get、$.ajax等方法实现网络请求。
• Vue网络请求：
  ue需要引入axios进行网络请求。

三、汇总对照

模块	Jquery实现	Vue实现
安装引入	引入方式： 通过script标签直接引入Jquery文件。 项目结构： 可以自行定义。	引入方式： 1.同Jquery通过script标签直接引入Vue文件。 2.通过vue提供的工具生成项目 项目结构： 1.第一种方式时，目录结构自行定义。 2.第二种方式时：
元素操作	通过选择器选择页面元素，通过内定的方法实现元素属性、值、内容等的更新。	使用组件、模板语法及元素标签控制实现元素相关内容的更新。
事件监听	bind/on/click/keyup等方法添加事件监听。	通过v-on/@+事件名称的方式实现添加事件监听。
页面动画	show/hide/fadein/fadeout等方法实现动画。	通过内置组件transition及配置的方式实现动画效果。
动态更新	html()、remove()、empty()、append()、load方法加载外部代码等。	组件的方式及v-if等标签和模板语法实现页面元素的动态更新。
插件引入	$.extend的方式定义插件内容，通过script标签引入插件js文件使用。	需要npm进行导入或者script标签进行引入，并且通过import的方式引入到具体的组件进行使用。
Ajax网络	$.get、$.ajax等方法实现网络请求。	引入axios进行网络请求。

四、总结

两者是不同方向的两款产品，没法进行专门对比，本篇主要的目的是熟悉jquery的相关知识后，使用vue时能快速的查找到vue中相同操作的处理方法。
个人理解：Jquery是在页面有元素后通过各种接口方法操作元素内容，所有有选择器及遍历等各种接口方法用于操作页面元素；Vue是通过代码及模板控制页面元素，通过组件组合的方式生成最终的界面效果。