Heim > Artikel > Web-Frontend > Vertiefendes Verständnis der Unterschiede zwischen jQuery und Vue (mit Code)

Vertiefendes Verständnis der Unterschiede zwischen jQuery und Vue (mit Code)

烟雨青岚nach vorne: 2020-06-28 13:12:544258Durchsuche

Umfassendes Verständnis des Unterschieds zwischen jQuery und Vue (mit Code)

1.jQuery muss zuerst den Dom erhalten Objekt, und dann Das Dom-Objekt führt Wertänderungen und andere Vorgänge aus
2. Vue bindet zuerst den Wert an das js-Objekt und ändert dann den Wert des js-Objekts, und das Vue-Framework aktualisiert automatisch den Dom-Wert.
3. Es ist einfach zu verstehen, dass Vue uns bei der Durchführung von Dom-Operationen hilft. Wenn wir in Zukunft den Wert des Objekts ändern und die Elemente und Objekte binden müssen, wird dies automatisch der Fall sein Helfen Sie uns. Machen Sie gute Arbeit bei DOM-bezogenen Operationen. 4. Diese Art von DOM-Element ändert sich mit der Änderung des JS-Objektwerts, was als unidirektionale Datenbindung bezeichnet wird Mit der Änderung des
-Werts des dom-Elements wird dies als bidirektionale Datenbindung bezeichnet.
Verwenden Sie ein einfaches Beispiel, um den Unterschied zwischen dem Schreiben von Jquery und Vue zu veranschaulichen.
Ändern Sie den Text.

Danach Klicken Sie auf die Schaltfläche:

Ändern zu

(1)jAbfragecode

<!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>

(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>

Vielen Dank fürs Lesen, ich hoffe, Sie werden viel davon profitieren.

Dieser Artikel wurde reproduziert von: https://blog.csdn.net/xutongbao/article/details/77870989

Empfohlenes Tutorial: „

JS Tutorial

“

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der Unterschiede zwischen jQuery und Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery .net JS 对象 dom https

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So verstehen Sie JavaScript-PrototypenNächster Artikel：So verstehen Sie JavaScript-Prototypen

In Verbindung stehende Artikel

Mehr sehen