jQuery と Vue の違いを深く理解する (コード付き)-jsチュートリアル-php.cn

jQuery と Vue の違いを深く理解する (コード付き)

烟雨青岚

リリース： 2020-06-28 13:12:54

転載

4271 人が閲覧しました

jQuery と Vue の違いを深く理解する (コード付き)

jQuery と Vue の違いを深く理解する (コード付き)

1.jQuery は最初に dom を取得する必要がありますオブジェクトをバインドし、その後 dom オブジェクトが値の変更とその他の操作を実行します
2.Vue は最初に値を js オブジェクトにバインドし、次に js オブジェクトの値を変更します。Vue フレームワークは dom 値を自動的に更新します。
3. Vue は dom 操作の実行に役立つことが簡単に理解できます。将来 Vue を使用するときは、オブジェクトの値を変更し、要素を
オブジェクトにバインドする必要があります。Vue フレームワークは自動的に助けてくれます。dom 関連の操作をうまくやってください。
4. この種の dom 要素は、JS オブジェクトの値の変更に応じて変更されます。これを一方向データバインディングと呼びます。JS オブジェクトの値も変更されると、 dom 要素の
値を変更すると、これは双方向データバインディングと呼ばれます
簡単な例を使用して、Jquery と Vue の記述の違いを説明します
テキストを変更します
Afterボタンをクリックします:

(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>  
<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 コード

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

ログイン後にコピー

読んでいただきありがとうございます。多くのメリットが得られることを願っています。

この記事は、https://blog.csdn.net/xutongbao/article/details/77870989

から転載されたものです。推奨チュートリアル: 「JS チュートリアル」

以上がjQuery と Vue の違いを深く理解する (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。