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