Heim >Web-Frontend >js-Tutorial >Was ist das Prinzip der bidirektionalen Bindung in Vue? Implementierung des Prinzips der bidirektionalen Vue-Bindung
Was Ihnen dieser Artikel bringt, ist das Prinzip der bidirektionalen Bindung in Vue? Die prinzipielle Implementierung der Vue-Zwei-Wege-Bindung hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.
Zuerst die Darstellungen
Einfache Implementierung der bidirektionalen Datenbindung
Lassen Sie uns zunächst eines verstehen : Object.defineProperty()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
Hier ist MDNs detaillierte Beschreibung dazu
Einfach ausgedrückt:
Diese Methode kann den Wert der vorhandenen Objekteigenschaft ändern
Objekt. defineProperty (obj, prop, descriptor)
Parameterbeschreibung:
obj: objektdefinierende Attribute
prop: modifiziertes Attribut
descriptor: modifizierter Attributdeskriptor
Nur hier auswählen Um es einfach auszudrücken ,
get:
Offiziell: Eine Methode, die einen Getter für eine Eigenschaft bereitstellt. Wenn kein Getter vorhanden ist, ist er undefiniert. Wenn auf die Eigenschaft zugegriffen wird, wird die Methode ausgeführt. Bei der Ausführung der Methode werden keine Parameter übergeben, aber dieses Objekt wird übergeben (aufgrund der Vererbungsbeziehung ist dies hier nicht unbedingt das Objekt, das die Eigenschaft definiert). . Der Standardwert ist undefiniert.
**Einfach ausgedrückt: Wenn Sie den Attributwert eines Objekts abrufen müssen, rufen Sie einfach diese Funktion auf und erhalten Sie den Wert**
Set:
Beamter: A Methode, die einen Setter für eine Eigenschaft bereitstellt, oder undefiniert, wenn kein Setter vorhanden ist. Diese Methode wird ausgelöst, wenn der Eigenschaftswert geändert wird. Diese Methode akzeptiert den einzigen Parameter, nämlich den neuen Parameterwert der Eigenschaft. Der Standardwert ist undefiniert.
** Einfach ausgedrückt: Wenn Sie den Attributwert eines Objekts festlegen (ändern) müssen, rufen Sie einfach diese Funktion auf, um die Änderung zu erreichen. **
Als nächstes fügen Sie den Code hinzu
nbsp;html> <meta> <meta> <title></title> <div></div> <div> <input> </div> <script> var data = {}; var dom_aa = document.getElementById("aa") function changedata(value){ data.a = value } //直接使用Object.defineProperty里面的set方法进行视图改变 Object.defineProperty(data,"a",{ set:function(newValue){ dom_aa.innerHTML = newValue; }, get:function(){ return a; } }) </script>
Verwandte Empfehlungen:
vue Erkundung des Prinzips der bidirektionalen Datenbindung
Das obige ist der detaillierte Inhalt vonWas ist das Prinzip der bidirektionalen Bindung in Vue? Implementierung des Prinzips der bidirektionalen Vue-Bindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!