Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0

Object.defineProperty verstehen

Grammatik:

Object.defineProperty(Objekt, Eigenschaft, Deskriptor)

obj Das Objekt, für das die Eigenschaften definiert werden sollen.
prop Der Name der zu definierenden oder zu ändernden Eigenschaft
Deskriptor Der zu definierende oder zu ändernde Eigenschaftsdeskriptor

obj und prop sind leicht zu verstehen. Beispielsweise definieren wir eine Variable als

Konstante o = {
    Name: „xbhog“
}

Unter ihnen bezieht sich obj auf o und prop auf o.name. Als nächstes schauen wir uns den Deskriptor an.

Deskriptor Einige Eigenschaften der Zielobjektattribute (es ist ein Objekt)
Es gibt 6 Parameter unter Deskriptor
Parameter 1:
Wert: Attributwert
Parameter 2:
beschreibbar: Gibt an, ob der Objekt-Eigenschaftswert geändert werden kann. „True“ erlaubt dies. „False“ erlaubt dies nicht.
Parameter 3:
konfigurierbar: Ob die Objekteigenschaft gelöscht werden kann. True erlaubt es. False erlaubt es nicht.
Parameter 4:
enumerable: Ob die Objekteigenschaft aufgezählt werden kann
Parameter 5:
get(): ist eine Funktion. Beim Zugriff auf die Eigenschaft wird die Funktion automatisch aufgerufen und der Rückgabewert der Funktion ist der Wert der Eigenschaft.
Parameter 6:
set(): ist eine Funktion, die automatisch aufgerufen wird, wenn die Eigenschaft geändert wird. Die Funktion hat genau einen Parameter, nämlich den neuen Wert, der zugewiesen werden soll.

Hinweis: Die Werteattribute, die beschreibbaren Attribute und die Get- und Set-Attribute im Deskriptor schließen sich gegenseitig aus. Es kann nur eines davon existieren.

Nachdem wir die Voraussetzungen kennen, implementieren wir die bidirektionale Bindung des V-Modells in Vue

Schauen wir uns zunächst den Implementierungscode an:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Bidirektionale Datenbindung durch js realisieren</title>
</Kopf>
<Text>
    
<Eingabetyp="Text"/><br>
<h1>Hallo: <span>Daten aktualisieren</span></h1>


<!-- Realisieren Sie eine bidirektionale Datenbindung durch js -->
<Skript>
	// Die Methode gibt das erste HTMLElement-Objekt im Dokument zurück, das dem angegebenen Selektor oder der angegebenen Selektorgruppe entspricht. var ipt = document.querySelector('input');
    var p = document.querySelector('span');
	
	
    var Daten = {Name:""};
	/* 
	    Das Oninput-Ereignis wird ausgelöst, wenn der Benutzer etwas eingibt.
	    Dieses Ereignis wird ausgelöst, wenn sich der Wert eines <input>- oder <textarea>-Elements ändert.
	 */
    ipt.oninput = Funktion(){
	// Übergebe den Wert in ipt.value an den Wert von data.name
        Datenname = ipt.Wert;
    }
    //ipt.value kapern
    Objekt.defineProperty(Daten,"Name",{
    //Datenabonnement get(){
        return ipt.value; //Beim Zugriff wird die get-Methode aufgerufen},
    //Datenentführung //Name:Wert
    setze(Wert) {
        p.innerHTML = Wert;
        ipt.Wert = Wert;
    }   
})
</Skript>
</body>
</html>

Zuerst verwenden wir document.querySelector, um die HTML-Objekte der Eingabe- und Span-Tags abzurufen, und definieren dann ein Datenobjekt mit dem leeren Attributnamen.

Verwenden Sie den Ereignislistener „oninput“, um Benutzereingaben zu überwachen (dieses Ereignis wird ausgelöst, wenn sich der Wert eines <input>- oder <textarea>-Elements ändert).

Übergeben Sie den Wert in ipt.value an den Wert von data.name.

Datenname = ipt.Wert;

Verwenden Sie Object.defineProperty, um Benutzereingabedaten zu kapern.

Attribut abrufen: Dies ist eine Funktion. Wenn auf das Attribut zugegriffen wird, wird die Funktion automatisch aufgerufen und der Rückgabewert der Funktion ist der Wert des Attributs.
set property: ist eine Funktion. Wenn die Eigenschaft geändert wird, wird die Funktion automatisch aufgerufen. Die Funktion hat genau einen Parameter, nämlich den neuen Wert, der zugewiesen werden soll.

Objekt.defineProperty(Daten,"Name",{
    //Datenabonnement get(){
       return ipt.value; //Beim Zugriff auf data.name wird die get-Methode aufgerufen, um ipt.value aufzurufen und den aktuellen Wert abzurufen},
    // Datenentführung set(value) { // Die Set-Methode wird beim Setzen von Daten automatisch aufgerufen p.innerHTML = value;
        ipt.Wert = Wert;
    }

Der Effekt ist deutlicher:

Methode festlegen:

Get-Methode:

Der endgültige Effekt:

Quellen:

https://blog.csdn.net/Doulvme/article/details/107978012
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
https://www.jianshu.com/p/6f589af16ad4
//www.jb51.net/article/217657.htm (empfohlen)

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von js zur Implementierung der bidirektionalen Datenbindungsfunktion in Vue2.0. Weitere relevante Inhalte zur Verwendung von js zur Implementierung der bidirektionalen Vue2-Bindung 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!

Das könnte Sie auch interessieren:

Beispielcode einer benutzerdefinierten Vue-Komponente zur Implementierung bidirektionaler V-Model-Bindungsdaten
Das Prinzip und die Implementierung der bidirektionalen Bindung in Vue2.x
Implementierung der bidirektionalen Bindung von übergeordneten und untergeordneten Komponentendaten im Front-End-Framework Vue
Eine kurze Diskussion über das Prinzip des bidirektionalen Ereignisbindungs-V-Modells von Vue
So implementieren Sie eine bidirektionale Bindungsfunktion in vue.js mit reinem JS
Detaillierte Erläuterung der bidirektionalen Bindung von Vue

<<: Lösung für das Problem, dass Docker-Protokolle nicht abgerufen werden können

>>: Bei der Installation der Version MySql 8.0.16 wird die Verwendung von „UTF8B4“ anstelle von „UTF8B3“ gefordert.

Analyse des Prinzips des dynamischen Proxys des Mybatis-Mappers

Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0

Object.defineProperty verstehen

Nachdem wir die Voraussetzungen kennen, implementieren wir die bidirektionale Bindung des V-Modells in Vue

Zusammenfassen

Analyse des Prinzips des dynamischen Proxys des Mybatis-Mappers

Installationsmethode für komprimierte MySQL 5.6-Pakete

Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

Probleme bei der Verwendung der Rich-Text-Bearbeitung mit Wangeditor in Vue

MySQL-Operationen: Operationen mit JSON-Datentyp

Zusammenfassung des CSS-Zählers und des Inhalts

Detaillierte Erklärung des Unterschieds zwischen Routing-Hooks in Vue2.x und Vue3.x

Beheben Sie das Kompatibilitätsproblem zwischen dem MySQL 8.0-Treiber und der Alibaba Druid-Version

Vue-Beispielcode für die Online-Vorschau von Office-Dateien

js einfacher und grober Beispielcode zum Veröffentlichen und Abonnieren

Artikel empfehlen

Zusammenfassung der CSS-Farbverlaufseffekte (linearer Farbverlauf und radialer Farbverlauf)

Gegenfall für die Vue-Implementierung

Vue verwendet drei Methoden zum Aktualisieren der Seite

So beheben Sie den 10060-Unknow-Fehler, wenn Navicat eine Remote-Verbindung zu MySQL herstellt

Warum MySQL große Transaktionen vermeiden sollte und wie man sie löst

Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue

Syntax und Beispielanalyse der JavaScript-Array-Methode „reduce()“

Tutorial zur Installation von MySQL 5.7.18 auf Mac OS 10.12

Detaillierte Erläuterung der Reihenfolge der MySQL-Abfrageergebnisse gemäß der Reihenfolge der ID in in ()

Methoden und Schritte für die verteilte Bereitstellung von Etcd basierend auf Docker

Einführung in den Vue-Lebenszyklus und detaillierte Erklärung der Hook-Funktionen

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini

Web-Kenntnisse: Lösung für die Koexistenz mehrerer IE-Versionen IETester

So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz

Erklärung zur Verwendung von JavaScript ECharts