系列文章目录

第一篇：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中的实现，本文中的vue对应实现方法可能有多种方式，只列出我所知道的，若有其它对应的操作方法可留言给我补充。

jquery参考文档：

jQuery HTML / CSS 方法


vue参考文档：

Vue Api

二、明细

2.1 class类相关操作：

在vue中的对应实现：


vue中使用v-bind（简写：‘:’或’.’）来绑定元素属性，具体用法说明：

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

addClass()、removeClass()、toggleClass()对应的实现方法代码示例：


绑定那个class使用js代码进行完全控制，可以使用模板语法来指定对应的class。

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

hasClass()对应的实现方法代码示例：


由于绑定那个class是使用js代码控制的，所以无查询元素是否包含对应元素的方法，若要使用对应的功能，需要获取原始dom标签，再通过getAttribute(“class”)获取标签上所有的class，再通过字符串检索的方式进行实现对应功能。

<template>
	<div ref="test" :class="{ classA: true, classB: true }">class测试</div>
</template>
<script>
	import { ref } from 'vue'
	export default {
		mounted() {
			// 第一种方法：
			console.log("第一种方法：" + document.querySelector(".classB").getAttribute("class"))
			// 第二种方法:
			for(var i=0;i<this.$refs.test.attributes.length;i++){
				console.log("第二种方法：" +this.$refs.test.attributes[i].value);
			}
		}
	}
</script>

2.2 css属性相关操作

在vue中的对应实现：


vue中内联样式的处理方式和处理class的方式类似：

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

获取指定内联样式的值，方式和class一样，代码如下：

<template>
	<div ref="test" class="test" :style="{ color: activeColor, fontSize: fontSize + 'px' }">style测试</div>
</template>
<script>
	import {ref} from 'vue'
	export default {
		data() {
			return {
				activeColor: 'red',
				fontSize: 30
			}
		},
		mounted() {
			// 第一种方法：
			console.log("第一种方法："+document.querySelector(".test").getAttribute("style"))
			// 第二种方法:
			for (var i = 0; i < this.$refs.test.attributes.length; i++) {
				console.log("第二种方法："+ this.$refs.test.attributes[i].name+"="+this.$refs.test.attributes[i].value);
			}
		}
	}
</script>
<style></style>

2.3 元素内容相关操作

在vue中的对应实现：



1. html()实现：


vue中使用v-html实现，代码示例：

<div v-html="'<h1>Hello World</h1>'"></div>

2. text()实现：


vue中使用v-text实现，代码示例：

<span v-text="msg"></span>
<!-- 等价于 -->
<span>{{msg}}</span>

3. wrap()、wrapAll()、wrapInner()、after()、append()、appendTo()、before()、detach()、empty()、nsertAfter()、insertBefore()、prepend()、prependTo()、remove()、replaceAll()、replaceWith()、unwrap()实现：


vue中无对应的实现方法，主要是vue中的元素的添加、删除等是通过代码及模板的方式控制的，所以动态更新元素内容无对应的实现方法。要动态更新元素内容时可以使用v-if、v-for、v-slot或动态组件的方式进行实现相应功能。

2.4 元素尺寸相关操作

在vue中的对应实现：


vue中无对应的方法，设置尺寸、位置及滚动条位置等可以使用设置style样式实现，获取对应的值时需要通过原生js获取对应的值。

2.5 元素属性相关操作

在vue中的对应实现：



1. attr()、removeAttr()实现：


vue通过v-bind（缩写: 或 .）实现，获取值同获取class等方式一致。

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

2. prop()、removeProp()实现：


实现方式同attr()。

2.6 表单元素相关操作

在vue中的对应实现：


vue通过v-model实现，实例代码：

<input v-model="message" placeholder="edit me" />

值绑定到vue的data中。

三、总结

本篇汇总了jquery中属性操作、内容操作等对应vue中的实现方式。