ホームページ > 記事 > ウェブフロントエンド > jQuery と Vue の違いを深く理解する (コード付き)
jQuery と Vue の違いを深く理解する (コード付き)
- 烟雨青岚転載
- 2020-06-28 13:12:544258ブラウズ
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: '#app',
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 サイトの他の関連記事を参照してください。