jQuery和Vue的区别[通俗易懂]

全栈程序员-用户IM • 2022年10月16日上午10:46 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
3.可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对
象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的
值的变化而变化就叫做双向数据绑定

用一个简单的例子来说明编写Jquery和Vue上的不同
修改文字

点击按钮后：

jQuery和Vue的区别[通俗易懂]

改为

jQuery和Vue的区别[通俗易懂]

(1)jQuery代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <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">  
    $("#modifyBtn").click(function(){
        $("#name").text("李四");
        $("#jop").text("老师");
    });
</script>  
</body>  
</html>

(2)Vue代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>大家好，我是<span>{
  
  {name}}<span>!</p>
    <p>我是一名<span>{
  
  {jop}}</span>.</p>
    <button v-on:click="modifyInfo">修改</button>
</div>
	
<script>
new Vue({
  	el: '#app',
	data:{
    	name:"张三",
    	jop:"医生"
	},
	methods:{
    	modifyInfo:function(){
        	this.name = "李四";
        	this.jop = "老师";
    	}
	}
})
</script>
</body>
</html>

爱奇艺视频入口（主讲vue和react）：

热门影视_明星点评-爱奇艺

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/181428.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...