Detaillierte Erläuterung des Datenproxys und der Ereignisse von VUE
Überprüfung der Object.defineProperty-Methode
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Überprüfung der Object.defineproperty-Methode</title>
</Kopf>
<Text>
<Skripttyp="text/javascript" >
sei Zahl = 18
lass Person = {
Name: 'Zhang San',
Geschlecht: männlich,
}
Object.defineProperty(Person,'Alter',{
// Wert: 18,
// enumerable:true, //steuert, ob die Eigenschaft aufgezählt werden kann, der Standardwert ist false
// beschreibbar:true, //steuert, ob die Eigenschaft geändert werden kann, der Standardwert ist false
// konfigurierbar: true //Steuert, ob die Eigenschaft gelöscht werden kann. Der Standardwert ist false
//Wenn jemand die Alterseigenschaft einer Person liest, wird die Get-Funktion (Getter) aufgerufen und der Rückgabewert ist der Wert von age get(){
console.log('Jemand hat die Alterseigenschaft gelesen')
Rücksendenummer
},
//Wenn jemand die Alterseigenschaft einer Person ändert, wird die Setter-Funktion aufgerufen und erhält den geänderten Wert set(value){
console.log('Jemand hat die Alterseigenschaft geändert und der Wert ist', Wert)
Zahl = Wert
}
})
// Konsole.log(Objekt.Schlüssel(Person))
console.log(Person)
</Skript>
</body>
</html>
Was ist ein Datenbroker?
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Was ist ein Datenagent?</title>
</Kopf>
<Text>
<!-- Datenproxy: Operation (Lesen/Schreiben) von Attributen in einem anderen Objekt durch einen Objektproxy -->
<Skripttyp="text/javascript" >
sei obj = {x:100}
lass obj2 = {y:200}
Objekt.defineProperty(obj2,'x',{
erhalten(){
returniere obj.x
},
setze(Wert){
obj.x = Wert
}
})
</Skript>
</body>
</html>
Datenproxy in Vue
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Datenproxy in Vue</title>
<!-- Vue importieren -->
<script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
<!--
1. Datenproxy in Vue:
Verwenden Sie das VM-Objekt, um den Vorgang (Lesen/Schreiben) der Attribute im Datenobjekt zu proxyen
2. Vorteile des Datenproxys in Vue:
Bequemere Datenverarbeitung in Daten 3. Grundprinzip:
Fügen Sie alle Eigenschaften im Datenobjekt über Object.defineProperty() zur VM hinzu.
Geben Sie für jede der VM hinzugefügte Eigenschaft einen Getter/Setter an.
Bedienen (lesen/schreiben) Sie die entsprechenden Attribute in Daten innerhalb des Getters/Setters.
-->
<!-- Bereiten Sie einen Behälter vor -->
<div id="Wurzel">
<h2>Name der Schule: {{name}}</h2>
<h2>Schuladresse: {{address}}</h2>
</div>
</body>
<Skripttyp="text/javascript">
Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
const vm = neuer Vue({
el:'#Wurzel',
Daten:{
Name: „Shang Silicon Valley“,
Adresse: „Hongfu Technology Park“
}
})
</Skript>
</html>
Grundlegende Verwendung von Ereignissen
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Datenproxy in Vue</title>
<!-- Vue importieren -->
<script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
<!--
1. Datenproxy in Vue:
Verwenden Sie das VM-Objekt, um den Vorgang (Lesen/Schreiben) der Attribute im Datenobjekt zu proxyen
2. Vorteile des Datenproxys in Vue:
Bequemere Datenverarbeitung in Daten 3. Grundprinzip:
Fügen Sie alle Eigenschaften im Datenobjekt über Object.defineProperty() zur VM hinzu.
Geben Sie für jede der VM hinzugefügte Eigenschaft einen Getter/Setter an.
Bedienen (lesen/schreiben) Sie die entsprechenden Attribute in Daten innerhalb des Getters/Setters.
-->
<!-- Bereiten Sie einen Behälter vor -->
<div id="Wurzel">
<h2>Name der Schule: {{name}}</h2>
<h2>Schuladresse: {{address}}</h2>
</div>
</body>
<Skripttyp="text/javascript">
Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
const vm = neuer Vue({
el:'#Wurzel',
Daten:{
Name: „Shang Silicon Valley“,
Adresse: „Hongfu Technology Park“
}
})
</Skript>
</html>
Ereignismodifikatoren
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Grundlegende Verwendung von Ereignissen</title>
<!-- Vue importieren -->
<script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
<!--
Grundlegende Verwendung von Ereignissen:
1. Verwenden Sie v-on:xxx oder @xxx, um das Ereignis zu binden, wobei xxx der Ereignisname ist;
2. Der Ereignisrückruf muss im Methodenobjekt konfiguriert werden und befindet sich letztendlich auf der VM.
3. Verwenden Sie keine Pfeilfunktionen für in Methoden konfigurierte Funktionen! Andernfalls ist dies kein vm;
4. Die in den Methoden konfigurierten Funktionen sind alle von Vue verwaltete Funktionen und verweisen auf das VM- oder Komponenteninstanzobjekt.
5. @click="demo" und @click="demo($event)" haben die gleiche Wirkung, aber letzteres kann Parameter übergeben;
-->
<!-- Bereiten Sie einen Behälter vor -->
<div id="Wurzel">
<h2>Willkommen zur {{name}}-Studie</h2>
<!-- <button v-on:click="showInfo">Klicken Sie hier für Informationen</button> -->
<button @click="showInfo1">Klicken Sie hier für Informationen 1 (keine Parameter)</button>
<button @click="showInfo2($event,66)">Klicken Sie hier, um sofortige Informationen zu erhalten 2 (Parameterübergabe)</button>
</div>
</body>
<Skripttyp="text/javascript">
Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
const vm = neuer Vue({
el:'#Wurzel',
Daten:{
Name: „Shang Silicon Valley“,
},
Methoden:{
showInfo1(Ereignis){
// konsole.log(Ereignis.Ziel.innerText)
// console.log(dies) //Dies ist vm
alert('Hallo, Klassenkamerad!')
},
showInfo2(Ereignis,Nummer){
console.log(Ereignis,Nummer)
// konsole.log(Ereignis.Ziel.innerText)
// console.log(dies) //Dies ist vm
alert('Hallo Klassenkamerad!!')
}
}
})
</Skript>
</html>
Tastaturereignisse
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Tastaturereignisse</title>
<!-- Vue importieren -->
<script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>
<!--
1. Häufig verwendete Button-Aliase in Vue:
Eingeben => Eingeben
Löschen => Löschen (erfasst die Tasten „Entf“ und „Rücktaste“)
Beenden => esc
Raum => Raum
Zeilenumbruch => Tab (speziell, muss mit gedrückter Taste verwendet werden)
Nach oben => nach oben
runter => runter
links => links
Rechts => rechts
2. Für Schaltflächen, für die Vue keine Aliase bereitstellt, können Sie den ursprünglichen Schlüsselwert der Schaltfläche zum Binden verwenden. Achten Sie jedoch darauf, ihn in Kebab-Case (kurze Bindestrich-Benennung) umzuwandeln.
3. Systemmodifizierertasten (spezielle Verwendung): Strg, Alt, Umschalt, Meta
(1) Wird mit „Keyup“ verwendet: Drücken Sie die Modifikatortaste, drücken Sie dann andere Tasten und lassen Sie dann die anderen Tasten los. Das Ereignis wird ausgelöst.
(2) Wird mit der Tastenkombination „Keydown“ verwendet: Ereignisse normal auslösen.
4. Sie können auch keyCode verwenden, um bestimmte Schlüssel anzugeben (nicht empfohlen)
5.Vue.config.keyCodes.Custom Schlüsselname = Schlüsselcode, Sie können den Schlüsselalias anpassen -->
<!-- Bereiten Sie einen Behälter vor -->
<div id="Wurzel">
<h2>Willkommen zur {{name}}-Studie</h2>
<input type="text" placeholder="Drücken Sie die Eingabetaste, um die Eingabe aufzufordern" @keydown.huiche="showInfo">
</div>
</body>
<Skripttyp="text/javascript">
Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
Vue.config.keyCodes.huiche = 13 // definiert einen Alias-Schlüssel new Vue({
el:'#Wurzel',
Daten:{
Name: „Shang Silicon Valley“
},
Methoden: {
zeigeInfo(e){
// konsole.log(e.key,e.keyCode)
Konsole.log(e.Ziel.Wert)
}
},
})
</Skript>
</html>
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
<<: So stellen Sie Daten mit Binlog in MySQL 5.7 wieder her
>>: So zeichnen Sie eine Schaltfläche in XAML als Kreis neu
Artikel empfehlen
Installations-Tutorial zur grünen Version der MySQL-Datenbank zum Beheben des Systemfehlers 1067
Was ist der Unterschied zwischen der grünen Versi...
Detaillierte Erläuterung der Implementierung gemeinsam genutzter Module in Angular-Projekten
Inhaltsverzeichnis 1. Gemeinsam genutztes CommonM...
Zusammenfassung der Funktionsweise von JS auf Seiten innerhalb und außerhalb von Iframes
Inhaltsverzeichnis Holen Sie sich den Inhalt des ...
Eine kurze Diskussion über den Unterschied zwischen src und href in HTML
Einfach ausgedrückt bedeutet src „Ich möchte dies...
Spezifische Verwendung der ES6-Array-Kopier- und Füllmethoden copyWithin() und fill()
Inhaltsverzeichnis Stapelkopie copyWithin() Array...
Umfassende Inventarisierung wichtiger Logdateien in MySQL
Inhaltsverzeichnis Einführung Protokollklassifizi...
Laden Sie MySQL 5.7 herunter und sehen Sie sich das detaillierte Installationsdiagramm für MySql auf dem Mac an.
1. Geben Sie die folgende Adresse in den Browser ...
Beispielanalyse zur Metadatenextraktion von MySQL und Oracle
Inhaltsverzeichnis Vorwort Was sind Metadaten? Ad...
Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung
Ziehen Sie das Bild Docker-Pull MySQL Sehen Sie s...
Einführungstutorial zu React Hooks
Zustandshaken Beispiele: importiere { useState } ...
CSS-Methode zur Steuerung der Elementhöhe von unten nach oben und von oben nach unten
Beginnen wir die Diskussion mit einer häufig gest...
Detaillierte Analyse der Rolle von HTML-Kommentar-Tags <!--...-->
Wenn wir den Quellcode vieler Websites überprüfen...
js behandelt die Kontoabmeldung beim Schließen des Browsers
Inhaltsverzeichnis Klassischer Ansatz Frage Weite...
Definition und Funktion des zoom:1-Attributs in CSS
Heute wurde ich gefragt, wozu das Zoom-Attribut i...
Detaillierte Erklärung zum dynamischen Festlegen des Browsertitels in Vue
Inhaltsverzeichnis Unsinn Text Der erste router/i...