Eine kurze Diskussion über das Prinzip des bidirektionalen Ereignisbindungs-V-Modells von Vue

Im Gegensatz zu js oder jQuery, die das DOM direkt ändern und betreiben, verwendet Vue das v-Modell, um eine bidirektionale Datenbindung zu implementieren. Es wählt automatisch die richtige Methode zum Aktualisieren des Elements entsprechend dem Steuerelementtyp aus.

v-model ist eine bidirektionale Bindungsanweisung von Vue, die den Wert der Steuerelementeingabe auf der Seite synchron auf das relevante gebundene Datenattribut aktualisieren und beim Aktualisieren des Datenbindungsattributs auch den Wert des Eingabesteuerelements auf der Seite aktualisieren kann.

In der offiziellen Dokumentation heißt es:

v-model ist nur ein Syntax-Sugar, die tatsächliche Implementierung hängt immer noch davon ab

• v-bind: Responsive Daten binden
• Eingabeereignis auslösen und Daten weitergeben (Kern und Fokus)

Der folgende Code

<Eingabe v-Modell="txt"> 

Im Wesentlichen

<Eingabe: Wert="txt" @Eingabe="txt = $event.target.value">

erklären:

Wenn die Vue-Instanz initialisiert wird, wird jede Eigenschaft der Daten rekursiv durchlaufen, und die Get- und Set-Methoden jeder Eigenschaft werden über defineProperty überwacht, sodass nach der Neuzuweisung einer Eigenschaft die Änderung überwacht werden kann, um die entsprechende Seitensteuerung zu betreiben

Sehen Sie sich den Code unten an:

Objekt.defineProperty(Daten,"Name",{
        erhalten(){
            Daten zurückgeben["Name"];
        },
        setze(neuerWert){
            let val = Daten["Name"];
            wenn (Wert === neuerWert) {
                zurückkehren;
            }
            Daten["Name"]=neuerWert;
            // Auf Änderungen in Attributwerten achten. Wenn der Knoten der entsprechende Eingabeknoten ist, node.value=newVal;
        }    
    })

Zusammenfassen

Einerseits kapert die modale Ebene jede Eigenschaft über Object.defineProperty, und sobald die Änderung erkannt wird, wird sie über die relevanten Seitenelemente aktualisiert. Andererseits wird durch das Kompilieren der Vorlagendatei das Eingabeereignis an das V-Modell des Steuerelements gebunden, sodass die Seiteneingabe den relevanten Datenattributwert in Echtzeit aktualisieren kann.

Object.defineProperty wird verwendet, um einige spezielle Operationen der Eigenschaften eines Objekts zu steuern, wie z. B. Lese- und Schreibrechte und ob es aufgezählt werden kann. Hier untersuchen wir hauptsächlich die entsprechenden beiden Beschreibungseigenschaften get und set. v-model schreibt seine get- und set-Operationen tatsächlich neu. Get ist eine Funktion, die durch Lesen des Werts des Namensattributs ausgelöst wird, und set ist eine Funktion, die durch Festlegen des Werts des Namensattributs ausgelöst wird.

Auffüllen

v-model-Modifikatoren: .lazy, .trim und .number

lazy: Nachdem jedes Eingabeereignis ausgelöst wurde, wird der Wert des Eingabefelds mit den Daten synchronisiert und der Lazy-Modifikator hinzugefügt, um ihn in die Verwendung des Änderungsereignisses zur Synchronisierung umzuwandeln.

<Eingabe v-Modell.lazy="msg">

trim: Leerzeichen am Anfang und Ende einer Zeichenfolge entfernen

<Eingabe v-Modell.trim="msg">

Nummer: Daten in Wertetyp konvertieren

<Eingabe v-Modell.Nummer="msg">

Dies ist das Ende dieses Artikels über das Prinzip des Zweiwege-Ereignisbindungs-V-Modells von Vue. Weitere relevante Inhalte zum Zweiwege-Ereignisbindungs-V-Modell von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!