検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >vueはmvvmモードですか?

vueはmvvmモードですか?

WBOY
WBOYオリジナル
2022-04-08 11:33:184208ブラウズ

vue は mvvm モードです。 vue でサポートされている双方向バインディングは、mvvm モードを使用して実現されます。m 層のデータが変更されると、vm 層がその変更を検出し、対応する変更を行うように v 層に通知します。つまり、データはビューに影響します。ビューがデータに影響を与えるため、開発効率が大幅に向上します。

vueはmvvmモードですか?

#この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue は mvvm モードですか?

MVVM は Model-View-ViewModel であり、vue は mvvm モードです。

  • #モデルはデータ モデル (データ レイヤーも指します) であり、固定データである場合もあれば、サーバーから要求されたデータである場合もあります。

  • View はページ DOM (ビュー レイヤーとも呼ばれます) であり、主にユーザーに情報を表示するために使用されます。

  • vue の ViewModel は、View と Model の間の通信のブリッジとして機能する vue インスタンスを指します (データ モデル層も指します)。

ViewModel は Vue.js のコアであり、Vue インスタンスです。 Vue インスタンスは、特定の HTML 要素に作用します。この要素は、HTML 本体要素または指定された ID を持つ要素です。

vueはmvvmモードですか?

双方向バインディングは、ViewModel の作成後に実現されます。

まず、上図の DOM リスナーとデータ バインディングを 2 つのツールとみなします。これは双方向バインディングを実現するための鍵です。

ビュー側から見ると、ViewModel の DOM リスナー ツールは、ページ上の DOM 要素の変更を監視するのに役立ちます。変更がある場合は、モデル内のデータを変更します。

ビュー側から見るモデル側では、モデル内のデータを更新するときに、データ バインディング ツールがページ内の DOM 要素の更新に役立ちます。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- div铺满全屏而不是缩放网页  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，
        这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
     -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生实现js实现M-V-VM</title>
    <script>
        /*
          MVVM : model 模型对象--》指的是构成界面内容的相关数据
                 view  视图对象--》指的给给用户或者开发者展示数据的界面
                 viewmodel 视图模型对象--》 指的是view与model之间的桥梁
        */
        let msg="Hello world!";//相当于model
        window.onload=function(){
            let h4Dom = document.getElementById("h4Dom");
            let inputDom = document.getElementById("inputDom");
            h4Dom.innerHTML=msg;
            inputDom.value=msg;
            
            //通过对事件源的监听来实现，为js对象实现动态事件监听
            //input输入事件
            inputDom.addEventListener("input",function(){
                msg=this.value;
                h4Dom.innerHTML=msg;
            });
        }
    </script>
</head>
<body>
    <div>
        <h4 id="h4Dom"></h4>
        <input type="text" value="" id="inputDom"/>
    </div>
</body>
</html>

達成効果:

vueはmvvmモードですか?

[関連する推奨事項: 「

vue.js チュートリアル」]

以上がvueはmvvmモードですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

関連記事

続きを見る