Vertiefendes Verständnis der Unterschiede zwischen jQuery und Vue (mit Code)-js-Tutorial-php.cn

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

烟雨青岚

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

nach vorne

4414 Leute haben es durchsucht

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

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!