Detaillierte Analyse von Javascript-Datenproxys und Ereignissen
Datenbroker und Events
Das Sternenlicht enttäuscht die Reisenden nicht und die Schmetterlinge kommen mit dem Duft der Blumen zu Ihnen Ü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?Datenproxy: Operation (Lesen/Schreiben) von Attributen in einem anderen Objekt durch einen Objektproxy
<!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>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>
Ereignismodifikatoren
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8" />
<title>Ereignismodifikatoren</title>
<!-- Vue importieren -->
<script type="text/javascript" src="../js/vue.js"></script>
<Stil>
*{
Rand oben: 20px;
}
.demo1{
Höhe: 50px;
Hintergrundfarbe: himmelblau;
}
.box1{
Polsterung: 5px;
Hintergrundfarbe: himmelblau;
}
.box2{
Polsterung: 5px;
Hintergrundfarbe: orange;
}
.Liste{
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: Peru;
Überlauf: automatisch;
}
li{
Höhe: 100px;
}
</Stil>
</Kopf>
<Text>
<!--
Ereignismodifikatoren in Vue:
1.prevent: Standardereignisse verhindern (häufig verwendet);
2.stop: Stoppt das Aufsteigen von Ereignissen (häufig verwendet);
3.once: das Ereignis wird nur einmal ausgelöst (häufig verwendet);
4. Erfassen: Verwenden Sie den Ereigniserfassungsmodus.
5.self: Das Ereignis wird nur ausgelöst, wenn event.target das aktuell bearbeitete Element ist;
6. passiv: Das Standardverhalten des Ereignisses wird sofort ausgeführt, ohne auf die Ausführung des Ereignisrückrufs zu warten.
-->
<!-- Bereiten Sie einen Behälter vor -->
<div id="Wurzel">
<h2>Willkommen zur {{name}}-Studie</h2>
<!-- Standardereignisse verhindern (häufig verwendet) -->
<a href="http://www.atguigu.com" rel="external nofollow" rel="external nofollow" @click.prevent="showInfo">Klicken Sie hier, um Informationen zu erhalten</a>
<!-- Event-Bubbling verhindern (häufig verwendet) -->
<div Klasse="demo1" @click="showInfo">
<button @click.stop="showInfo">Klicken Sie hier, um Informationen zu erhalten</button>
<!-- Modifikatoren können hintereinander geschrieben werden-->
<!-- <a href="http://www.atguigu.com" rel="external nofollow" rel="external nofollow" @click.prevent.stop="showInfo">Klicken Sie hier, um Informationen zu erhalten</a> -->
</div>
<!-- Ereignis wird nur einmal ausgelöst (häufig verwendet) -->
<button @click.once="showInfo">Klicken Sie hier, um Informationen zu erhalten</button>
<!-- Ereigniserfassungsmodus verwenden -->
<div Klasse="box1" @click.capture="showMsg(1)">
div1
<div Klasse="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- Das Ereignis wird nur ausgelöst, wenn event.target das aktuell bearbeitete Element ist; -->
<div Klasse="demo1" @click.self="showInfo">
<button @click="showInfo">Klicken Sie hier für Informationen</button>
</div>
<!-- Das Standardverhalten des Ereignisses wird sofort ausgeführt, ohne auf den Abschluss des Ereignisrückrufs zu warten. -->
<ul @wheel.passive="demo" Klasse="Liste">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<Skripttyp="text/javascript">
Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
neuer Vue({
el:'#Wurzel',
Daten:{
Name: „Shang Silicon Valley“
},
Methoden:{
zeigeInfo(e){
alert('Hallo, Klassenkamerad!')
// konsole.log(e.target)
},
Nachricht anzeigen(Nachricht){
Konsole.log(Nachricht)
},
Demo(){
für (sei i = 0; i < 100000; i++) {
konsole.log('#')
}
console.log('Müde')
}
}
})
</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>
Dies ist das Ende dieses Artikels über die detaillierte Analyse von JavaScript-Datenproxys und -Ereignissen. Weitere relevante Inhalte zu JavaScript-Datenproxys und -Ereignissen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Reines CSS zum Erreichen einer einzelnen Div-Transformation eines regulären Polygons
>>: So stellen Sie das umfassende Benutzererlebnis sicher
Artikel empfehlen
Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue
Inhaltsverzeichnis 1. Datenbankdesign 2. Frontend...
Detaillierte Analyse von MySQL-Deadlock-Problemen
Vorwort Wenn sich unser Geschäft in einem sehr fr...
Ausführliche Erklärung des Sperrmechanismus in MySQL InnoDB
Vorne geschrieben Eine Datenbank ist im Wesentlic...
CSS verwendet calc(), um die aktuell sichtbare Bildschirmhöhe zu ermitteln
Schauen wir uns zunächst die relativen Längeneinh...
Lösung zum Vergessen des MySQL-Passworts unter Linux
Das Problem ist folgendes: Ich habe den Befehl my...
Lösung für das Paging-Fehlerproblem bei MySQL-Eins-zu-viele-Assoziationsabfragen
Die Abfragedaten in der XML-Preisabfrage enthalte...
Drei Möglichkeiten zur Realisierung der horizontalen Zentrierung von Elementen und zum Verständnis der Konzepte von festem Layout und fließendem Layout
Die Eigenschaft, Text in CSS zu zentrieren, lässt ...
Lösung für VMware Workstation Pro, das unter Windows nicht läuft
Hat jemand von Ihnen nach dem Nationalfeiertag fe...
Detaillierte Erläuterung der Konfigurationsmethode „Groß-/Kleinschreibung ignorieren“ für MySQL-Tabellennamen
Standardmäßig unterscheidet MySQL unter Linux zwi...
Nginx' praktische Methode zur Lösung domänenübergreifender Probleme
Trennen Sie Front- und Backend und lösen Sie domä...
Detaillierte Analyse des MySQL-Datentyps DECIMAL
Vorwort: Wenn wir Dezimalzahlen speichern müssen ...
So überwachen Sie den Linux-Serverstatus
Wir, insbesondere Linux-Ingenieure, haben täglich...
Docker stellt eine Verbindung zum Host-Mysql-Vorgang her
Heute muss das Unternehmensprojekt Docker konfigu...
Beste Tools zum Erstellen und Bearbeiten von Screenshots unter Linux
Als ich mein primäres Betriebssystem von Windows ...
Welche Codes sollte ich beherrschen, wenn ich Webdesign lerne?
In diesem Artikel werden einige der Techniken ausf...