Compréhension approfondie des différences entre jQuery et Vue (avec code)-js tutoriel-php.cn

Compréhension approfondie des différences entre jQuery et Vue (avec code)

烟雨青岚

Libérer： 2020-06-28 13:12:54

avant

4271 Les gens l'ont consulté

Compréhension approfondie des différences entre jQuery et Vue (avec code)

Compréhension approfondie de la différence entre jQuery et Vue (avec code)

1.jQuery doit d'abord obtenir le dom objet, puis L'objet dom effectue une modification de la valeur et d'autres opérations
2. Vue lie d'abord la valeur à l'objet js, puis modifie la valeur de l'objet js. Le framework Vue mettra automatiquement à jour la valeur dom.
3. On peut simplement comprendre que Vue nous aide à effectuer des opérations dom. Lorsque nous utiliserons Vue à l'avenir, nous devrons modifier la valeur de l'objet et lier les éléments et les objets
. aidez-nous. Faites du bon travail dans les opérations liées au dom
4. Ce type d'élément dom change avec le changement de la valeur de l'objet JS, qui est appelé liaison de données unidirectionnelle si la valeur de l'objet JS change également. avec le changement de la valeur
de l'élément dom, c'est ce qu'on appelle la liaison de données bidirectionnelle
Utilisez un exemple simple pour illustrer la différence entre écrire Jquery et Vue
Modifier le texte
Après en cliquant sur le bouton :

Changer en

(1) code 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>  
<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>

Copier après la connexion

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

Copier après la connexion

Merci à tous d'avoir lu, j'espère que vous en bénéficierez beaucoup.

Cet article est reproduit à partir de : https://blog.csdn.net/xutongbao/article/details/77870989

Tutoriel recommandé : "Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!