jQuery与Vue的区别
1.jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，数据和界面是在一起的。
2.Vue则是把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。对数据进行操作不再需要引用相应的DOM对象
3.区别
简单来说，最明显的就是思维方式不同，jquery 是以操作dom为主，做了数据处理之后还需要对dom进行操作。vue.js是以操作数据为主，不操作dom，也就是传说中的双向数据绑定，你只需要操作数据就好，dom自动更新。这只是对初学者来说最大的不同。jquery只是一个类库，只是提供了很多的方法，不能算框架，而vue.js是一个框架，有一套完整的体系。
将第一个页面显示点击修改按钮，修改为第二个页面显示
1.jQuery方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 下面是动态导入jquery.js函数库-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div>
<p>大家好，我是<span id="name">张三<span>!</p>
<p>我是一名<span id="jop">医生</span>.</p>
<button id = "modifyBtn">修改</button>
</div>
<script type="text/javascript"> //jquery代码也可放在前面，要入口函数
//按钮点击事件所执行的函数
$("#modifyBtn").click(function(){
$("#name").text("李四");
$("#jop").text("老师");
});
</script>
</body>
</html>
2.vue方法
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<!-- 下面是动态导入vue.js函数库/框架-->
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"> //与vue进行绑定
<p>大家好，我是<span>{{name}}<span>!</p>
<p>我是一名<span>{{jop}}</span>.</p>
//v-on:click也可以简写成@click
<button v-on:click="modifyInfo">修改</button>
</div>
<script>
new Vue({
el: '#app', //#app是vue代码快要控制的容器的ID
data:{ //data里面用来放数据
name:"张三",
jop:"医生"
},
methods:{ //methods(方法)，里面用来放函数
modifyInfo:function(){
this.name = "李四";
this.jop = "老师";
}
}
})
</script>
</body>
</html>
版权声明：本文为weixin_40485430原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。