jQuery与Vue的区别

最新推荐文章于 2022-06-16 21:39:53 发布

码尊强者

最新推荐文章于 2022-06-16 21:39:53 发布

阅读量1.7k

点赞数 5

分类专栏： web前端文章标签：前端 jQuery vue 函数库框架

本文链接：https://blog.csdn.net/weixin_40485430/article/details/84204469

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

码尊强者

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery与Vue的区别

jQuery与Vue的区别1.jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，数据和界面是在一起的。2.Vue则是把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。对数据进行操作不再需要引用相应的DOM对象3.区别简单来说，最明显的就是思维方式不同，jquery 是以操作dom为主，做了数据处理之后还需要对dom进行操作...
复制链接

扫一扫