之前给大家介绍了一下jquery，那么下面要给大家继续讲到的就是jquery和vue的区别，一起通过下面的文章内容来进行了解吧。
区别：
jquery是使用选择器($)选取DOM对象，对它进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别就只是在于能够更方便的选取和操作DOM对象，而数据和界面是在一起的，例如，需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
Vue是通过Vue对象，把数据和View完全分离开来了，对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定，这就是传说中的MVVM。
举例：
场景1：
列表添加一个元素
vue只需要向数据message里面push一条数据，就能够完成添加一个li标签的操作。
jquery需要获取dom元素节点，并且，还要对dom进行添加一个标签的操作。
假如，dom结构很复杂的话，或者是添加的元素很复杂，那么代码就会变得很复杂，并且，阅读性也会很低。
vue:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul>
<!--根据数组数据自动渲染页面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add">添加数据</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app'
, data: {
message: ["第1条数据", "第2条数据"]
, i: 2
}
, methods: {
//向数组添加一条数据即可
add: function () {
this.i++
this.message.push("第" + this.i + "条数据")
}
}
})
</script>jquery:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul id="list">
<li>第1条数据</li>
<li>第2条数据</li>
</ul>
<button id="add">添加数据</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document)
.ready(function () {
var i = 2;
$('#add')
.click(function () {
i++;
//通过dom操作在最后一个li元素后手动添加一个标签
$("#list")
.children("li")
.last()
.append("<li>第" + i + "条数据</li>")
});
});
</script>场景2：
控制按钮的显示隐藏
vue控制isShow的值为true以及false就可以了，而jquery就还是需要操作dom元素控制按钮的显示以及隐藏。
vue:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul>
<!--根据数组数据自动渲染页面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add" v-show="isShow">添加数据</button>
<button @click="showButton">隐藏按钮</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app'
, data: {
message: ["第1条数据", "第2条数据"]
, i: 2
, isShow: true
}
, methods: {
//向数组添加一条数据即可
add: function () {
this.i++
this.message.push("第" + this.i + "条数据")
},
//控制isShow的值即可
showButton: function () {
this.isShow = false;
}
}
})
</script>jquery：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul id="list">
<li>第1条数据</li>
<li>第2条数据</li>
</ul>
<button id="add">添加数据</button>
<button id="showButton">隐藏按钮</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document)
.ready(function () {
var i = 2;
$('#add')
.click(function () {
i++;
//通过dom操作在最后一个li元素后手动添加一个标签
$("#list")
.children("li")
.last()
.append("<li>第" + i + "条数据</li>")
});
//需要手动隐藏dom元素
$("#showButton")
.click(function () {
$("#add")
.hide()
})
});
</script>下面是输出结果：
总结：
vue适用的场景-复杂数据操作的后台页面，表单填写页面;jquery适用的场景-一些html5的动画页面，一些需要js来操作页面样式的页面。
注意，这两者也是可以结合一起来使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等。
以上就是对于jquery和vue区别的一个简单介绍了，你还有什么不清楚的吗?可以继续的关注奇Q工具网来进行了解呢，除此之外，还有更多java项目中常见问题可以为你分享解答。
推荐阅读：
jquery ajax请求，使用jquery发送ajax请求怎么编写?