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

烟雨青岚
リリース: 2020-06-28 13:12:54
転載
4352 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!