Heim > Artikel > Web-Frontend > Befindet sich Vue im MVVM-Modus?

Befindet sich Vue im MVVM-Modus?

WBOYOriginal: 2022-04-08 11:33:184158Durchsuche

vue ist der MVVM-Modus. Die in Vue unterstützte bidirektionale Bindung verwendet den MVVM-Modus. Wenn die M-Layer-Daten geändert werden, erkennt der VM-Layer die Änderung und benachrichtigt den V-Layer, um entsprechende Änderungen vorzunehmen. Das heißt, die Daten wirken sich auf die Ansicht aus wirkt sich extrem auf die Daten aus. Es verbessert die Entwicklungseffizienz erheblich.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Befindet sich Vue im MVVM-Modus?

MVVM ist Model-View-ViewModel und Vue befindet sich im MVVM-Modus.

Modell ist das Datenmodell (bezieht sich auch auf die Datenschicht). Es können unsere festen Daten oder vom Server angeforderte Daten sein.
Ansicht ist das Seiten-DOM (auch als Ansichtsebene bezeichnet), das hauptsächlich zum Anzeigen von Informationen für Benutzer verwendet wird.
ViewModel in Vue bezieht sich auf die Vue-Instanz (bezieht sich auch auf die Datenmodellebene), die als Kommunikationsbrücke zwischen Ansicht und Modell fungiert.

ViewModel ist der Kern von Vue.js, es ist eine Vue-Instanz. Die Vue-Instanz wirkt auf ein bestimmtes HTML-Element. Dieses Element kann das HTML-Body-Element oder ein Element mit einer angegebenen ID sein.

Befindet sich Vue im MVVM-Modus?

Nach dem Erstellen des ViewModel wird eine bidirektionale Bindung erreicht

Zunächst betrachten wir die DOM-Listener und Datenbindungen in der obigen Abbildung als zwei Werkzeuge, die der Schlüssel zum Erreichen einer bidirektionalen Bindung sind.

Von der Ansichtsseite aus gesehen hilft uns das DOM-Listener-Tool in ViewModel, Änderungen an DOM-Elementen auf der Seite zu überwachen. Wenn es Änderungen gibt, ändern Sie die Daten im Modell Daten im Modell verwenden, hilft uns das Datenbindungstool dabei, die DOM-Elemente auf der Seite zu aktualisieren.

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

Erzielter Effekt:

Befindet sich Vue im MVVM-Modus? [Verwandte Empfehlung: „

vue.js Tutorial

“]

Das obige ist der detaillierte Inhalt vonBefindet sich Vue im MVVM-Modus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche Funktion haben Symbole in es6?Nächster Artikel：Welche Funktion haben Symbole in es6?

In Verbindung stehende Artikel

Mehr sehen