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
Beheben Sie das Kompatibilitätsproblem zwischen dem MySQL 8.0-Treiber und der Alibaba Druid-Version
Dieser Artikel stellt hauptsächlich die Lösung fü...
So implementieren Sie die JavaScript-Ausgabe der Fibonacci-Folge
Inhaltsverzeichnis Thema analysieren Basislösung ...
Detaillierte Konfigurationsschritte zur Installation von Linux (CentOS) unter einer virtuellen VMware-Maschine
CentOS7 herunterladen Das Image, das ich herunter...
Notieren Sie einen Fehlerbehebungsbericht für die hohe CPU-Auslastung des Tomcat-Prozesses
Dieser Artikel zeichnet hauptsächlich einen Tomca...
Grafisches Tutorial zur Installation und Konfiguration der Mysql5.7.17 winx64.zip-Dekomprimierungsversion
1. Laden Sie mysql-5.7.17-winx64.zip herunter; Li...
Verwenden Sie Javascript, um die Funktion zum Senden des SMS-Bestätigungscodeintervalls zu implementieren
Wenn wir uns in vielen Apps und Websites anmelden...
Die 9 besten ausländischen Websites mit kostenlosem Bildmaterial
Es ist schwierig, Websites mit gutem Bildmaterial...
JavaScript zum Implementieren einer dynamischen Digitaluhr
In diesem Artikel finden Sie den spezifischen Cod...
Größe von PNG-Bildern mit CSS-Maske deutlich optimieren (empfohlen)
Dieser Artikel darf gerne geteilt und zusammengef...
Das Prinzip und die Implementierung der bidirektionalen Bindung in Vue2.x
Inhaltsverzeichnis 1. Implementierungsprozess 2. ...
Zusammenfassung der Lösungen für allgemeine Linux-Probleme
1. Centos7 unter VMware verbinden und eine feste ...
Docker-Compose-Tutorial: Installation und Schnellstart
Inhaltsverzeichnis 1. Einführung in Compose 2. Co...
Was ist Nginx-Lastausgleich und wie wird er konfiguriert?
Was ist Lastenausgleich? Der Lastausgleich wird h...
JS implementiert einen einfachen Zähler
Verwenden Sie HTML, CSS und JavaScript, um einen ...
Rückgängigmachen der Anmeldung in MySQL
Konzepteinführung: Wir wissen, dass das Redo-Log ...