vue介绍
vue是一个刚兴起不久的前端框架，有一套完整的体系，是一个精简的MVVM。从技术角度讲，vue.js专注于MVVM模型的ViewModel层，通过双向数据绑定把view层和Model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。vue以它独特的优势简单、快速、组合、紧凑、强大而迅速崛起。
jquery介绍
jquery是一个类库，提供了很多方法，不能算框架。在过去和现在Jquery是最流行的web前端js库，可是现在无论国内还是国外，他的使用率正在渐渐被其他的js库所替代。随着浏览器厂商对H5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率会越来越低。
vue和jquey对比
- jquery是直接操作DOM；使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作；和原生的js区别只在于可以更方便的选取和操作DOM对象；数据和界面是在一起，比如获取input标签的内容
$('input').val();
- vue基于一种MVVM模式，使用数据驱动的方式，通过Vue对象将数据和View完全分离开来。对数据进行操作，不在需要引用相应的DOM对象，通过vue对象，将数据和相应的DOM对象相互绑定起来。
举例说明
案例一：列表添加一个元素,下图为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:
<div id="app">
<ul id="list">
<li>第1个小朋友</li>
<li>第2个小朋友</li>
</ul>
<button id="add">添加人数</button>
</div>
<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>
-
vue适用的场景：复杂数据操作的后台页面，表单填写页面
-
jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面
-
然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求
1716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
