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

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.

Artikel empfehlen

Beispielschritte zum Implementieren von Klassenselektoren und Namensattributselektoren in js

Das Aufkommen von jQuery hat unsere Effizienz bei...

Schritte zum Konfigurieren von IIS10 unter Win10 und zum Unterstützen des Debuggens von ASP-Programmen

Microsoft IIS IIS (Internet Information Server) i...

Ausführliches Tutorial zur CentOS-Installation von MySQL5.7

In diesem Artikel werden die detaillierten Schrit...

Detaillierte Erläuterung der MySQL-Remoteverbindungsberechtigung

1. Melden Sie sich bei der MySQL-Datenbank an mys...

Erläuterung zur Verwendung und Änderung des Standard-Programmveröffentlichungspfads von Tomcat

Der standardmäßige Programmveröffentlichungspfad ...

Beispiel eines Befehls zur Linux-Hardwarekonfiguration

Hardware-Ansichtsbefehle System # uname -a # Kern...

Einführung in die Installation von JDK unter Linux, einschließlich der Deinstallation von OpenJDK

1. OpenJDK anzeigen rpm -qa|grep jdk 2. Löschen S...

SMS-Bestätigungscode-Anmeldefunktion basierend auf Antd Pro (Prozessanalyse)

Inhaltsverzeichnis Zusammenfassung Gesamtprozess ...

Implementierungsbeispiel für die Bereitstellung von Docker rocketmq

Inhaltsverzeichnis Vorbereitung Bereitstellungspr...

Drei häufig verwendete MySQL-Datentypen

Das Definieren des Datenfeldtyps in MySQL ist für...

Häufig verwendete JS-Funktionsmethoden im Frontend

Inhaltsverzeichnis 1. E-Mail 2. Mobiltelefonnumme...

So aktivieren Sie die Protokollfunktion für langsame Abfragen in MySQL

Das MySQL-Protokoll für langsame Abfragen ist seh...

Schritte zum Übertragen von Dateien und Ordnern zwischen zwei Linux-Servern

Heute habe ich mich mit der Migration eines Proje...

Ausführliche Erklärung zur Docker-Maschine

Unterschiede zwischen Docker und Docker Machine D...

Detaillierte Erläuterung der Idee zum Einrichten einer Abfangfunktion für die Anmeldeüberprüfung in Vue

Inhaltsverzeichnis 1. Lösung 2. Lassen Sie den Br...