jqueryとvueの比較例分析-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryとvueの比較例分析

小云云

Mar 05, 2018 pm 05:00 PM

jquery事例分析比較した

jquey と vue は比較対象ではないと言いますが、それらは Angular と React とあまり比較できないと思います。どちらも実装方法が異なるだけです。シナリオによってはパフォーマンスに多少の違いがあります。しかし、jquery から vue または mvvm への移行は、dom を直接操作するという当初の考え方を根本的に変えることです。

1. jquery の紹介: jquery は今も昔も最も人気のある Web フロントエンド JS ライブラリですが、現在ではその使用率が国内外で徐々に他の JS ライブラリに取って代わられています。ブラウザのメーカーが一律に HTML5 仕様に従い、ブラウザ側で ECMA6 を実装すると、jquery の使用率はますます低くなります

2. vue の紹介: vue は、注目を集めているフロントエンド js ライブラリであり、合理化された MVVM です。技術的な観点から見ると、Vue.js は MVVM モデルの ViewModel 層に焦点を当てています。双方向のデータバインディングを通じてビューレイヤーとモデルレイヤーを接続し、データを操作することでページビューのレンダリングを完了できます。もちろん、Angular や React など、他にも多くの mvmm フレームワークがあり、それらはすべて類似しており、本質的に MVVM の概念に基づいています。しかし、vue は、シンプル、高速、組み合わせ、コンパクト、強力、強力という独自の利点により急速に台頭しました

3. vue と jquey の比較

jQuery は、DOM オブジェクトの選択、値の割り当てにセレクター ($) を使用します。実際、イベントバインディングなどの操作とネイティブ HTML の唯一の違いは、DOM オブジェクトをより簡単に選択して操作できることと、データとインターフェイスが一緒になっている点です。たとえば、ラベルタグのコンテンツ $("lable").val(); を取得する必要がある場合でも、それは DOM 要素の値に依存します。

Vue は、Vue オブジェクトを通じてデータとビューを完全に分離します。データを操作するために、対応する DOM オブジェクトを参照する必要はなくなりました。データとビューは、Vue オブジェクト (vm) を通じて相互にバインドされていると言えます。これが伝説の MVVM です。

4. 例

シナリオ 1: リストに要素を追加する以下の図は、vue と jquery の 2 つの操作のコードを示しています。ここから、vue はデータの一部をデータメッセージにプッシュするだけであることがわかります。 li タグの追加を完了するには、jquery が dom 要素ノードを取得して dom にラベルを追加する必要があります。dom 構造が特に複雑な場合、または追加された要素が非常に複雑な場合、コードは非常に複雑で量が少なくなります。可読性の点で

vue:

jqueryとvueの比較例分析

nbsp;html>
    <meta>
    <p>
        </p>

{{item}}

jqueryとvueの比較例分析

jquery:

jqueryとvueの比較例分析

nbsp;html>
    <meta>
    <p>
        </p>

第1条数据
第2条数据

jqueryとvueの比較例分析

シーン 2: コントロールボタンの表示と非表示。下の図は v コードです。 ue と jquery の 2 つの操作について、vue は isShow 属性の値を true と false に制御するだけで済みますが、jquery はボタンを制御するために dom 要素の表示と非表示を操作する必要があることがわかります

vue:

nbsp;html>
    <meta>
    <p>
        </p>

{{item}}

jqueryとvueの比較例分析

jquery:

nbsp;html>
    <meta>
    <p>
        </p>

第1条数据
第2条数据

jqueryとvueの比較例分析

出力結果:

4. 概要: 内容は比較的浅いですが、主に、上記の 2 つの例である vue と jquey の違いを分析するためのものです。これは簡単な説明にすぎませんが、Vue はこれらよりもはるかに多くの問題を解決でき、それらははるかに複雑です。 html5アニメーションページに適用できます。JSがページスタイルを操作するためにJSが必要とするページには、一緒に使用すると組み合わせることができ、vueはデータバインディングに焦点を合わせ、jqueryはスタイル操作、アニメーションに焦点を当てることもできます。エフェクトなど、ビジネス要件をより効率的に完了できます

5. 会社のフロントエンドディレクトリ構造を添付します。興味がある場合は、そのコードを見てください

。

src代码目录包含assets静态文件，components vue组件文件，plugins 插件文件（包含登录操作，http请求操作，过滤器，加解密操作，公共方法等），router 路由文件，store vuex文件，app.js vue相关配置，index.html主页面

build目录为webpack打包文件，dist目录为打包后生成的文件，node_modules 引用的外部组件

补充阅读：

1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
3.可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对
象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的
值的变化而变化就叫做双向数据绑定
用一个简单的例子来说明编写Jquery和Vue上的不同
修改文字
点击按钮后：

改为

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

相关推荐：

vue与jquery实时监听用户输入状态代码分享

jQuery表单元素选择器实例讲解

jQuery基础语法使用方法

以上がjqueryとvueの比較例分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles