In-depth understanding of the differences between jQuery and Vue (with code)-JS Tutorial-php.cn

In-depth understanding of the differences between jQuery and Vue (with code)

烟雨青岚

Release： 2020-06-28 13:12:54

forward

4333 people have browsed it

In-depth understanding of the differences between jQuery and Vue (with code)

In-depth understanding of the difference between jQuery and Vue (with code)

1.jQuery must first obtain the dom object, and then The dom object performs value modification and other operations
2.Vue first binds the value to the js object, and then modifies the value of the js object. The Vue framework will automatically update the dom value.
3. It can be simply understood that Vue helps us perform dom operations. When we use Vue in the future, we need to modify the value of the object and bind the elements to the
object. The Vue framework will automatically help us. Do a good job in dom related operations
4. This kind of dom element changes with the change of the JS object value, which is called one-way data binding. If the value of the JS object also changes with the change of the dom element's
value, it is It’s called two-way data binding
Use a simple example to illustrate the difference between writing Jquery and Vue
Modify the text
After clicking the button:

Change to

(1)jQuery code

<!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>  
<p>
    <p>大家好，我是<span id="name">张三<span>!</p>
    <p>我是一名<span id="jop">医生</span>.</p>
    <button id = "modifyBtn">修改</button>
</p>
<script type="text/javascript">  
    $("#modifyBtn").click(function(){
        $("#name").text("李四");
        $("#jop").text("老师");
    });
</script>  
</body>  
</html>

Copy after login

(2)Vue code

<!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>
<p id="app">
    <p>大家好，我是<span>{{name}}<span>!</p>
    <p>我是一名<span>{{jop}}</span>.</p>
    <button v-on:click="modifyInfo">修改</button>
</p>
	
<script>
new Vue({
  	el: &#39;#app&#39;,
	data:{
    	name:"张三",
    	jop:"医生"
	},
	methods:{
    	modifyInfo:function(){
        	this.name = "李四";
        	this.jop = "老师";
    	}
	}
})
</script>
</body>
</html>

Copy after login

Thank you everyone for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/xutongbao/article/details/77870989