jquery和vue对比
前言：很多人说 jquey 和 vue 没有什么可比的，应该和 Angular，React 来比吧，我到觉得他们倒没有多大的可比性，都是基于 mvvm 思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从 jquery 到 vue 或者说是到 mvvm 的转变则是一个思想想的转变，是将原有的直接操作 dom 的思想转变到操作数据上去，难道不是一个根本性的改变吗？
1.jquery 介绍：想必大家都用过 jquery 吧，这个曾经也是现在依然最流行的 web 前端 js 库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的 js 库所代替，随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏览器端的实现，jquery 的使用率将会越来越低
2.vue 介绍：vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvmm 框架如 Angular，React 都是大同小异，本质上都是基于 MVVM 的理念。 然而 vue 以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起
3.vue 和 jquey 对比
jQuery 是使用选择器（$）选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。比如需要获取 label 标签的内容：$("lable").val();, 它还是依赖 DOM 元素的值。
Vue 则是通过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定。这就是传说中的 MVVM。
4. 举例说明
场景一：列表添加一个元素, 下图为 vue 和 jquery 两种操作的代码，我们从中可以看出 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>
场景二：控制按钮的显示隐藏，下图为 vue 和 jquery 两种操作的代码，我们从中可以看出 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>
输出结果：
4. 总结：内容讲的比较浅，主要就是分析一下 vue 和 jquey 对比的区别，上面两个例子只是做了一个简单的说明，然而 vue 能解决的问题远比这些要多的多，复杂的多。
vue 适用的场景：复杂数据操作的后台页面，表单填写页面
jquery 适用的场景：比如说一些 html5 的动画页面，一些需要 js 来操作页面样式的页面
然而二者也是可以结合起来一起使用的，vue 侧重数据绑定，jquery 侧重样式操作，动画效果等，则会更加高效率的完成业务需求
5. 附上公司前端目录结构，感兴趣的可以分享代码给大家看看
src 代码目录包含 assets 静态文件，components vue 组件文件，plugins 插件文件（包含登录操作，http 请求操作，过滤器，加解密操作，公共方法等），router 路由文件，store vuex 文件，app.js vue 相关配置，index.html 主页面
build 目录为 webpack 打包文件，dist 目录为打包后生成的文件，node_modules 引用的外部组件