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
Detaillierte Erklärung des Unterschieds zwischen dem Standardwert des CSS-Attributs width: auto und width: 100%
Breite: automatisch Das untergeordnete Element (e...
WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)
Inhaltsverzeichnis 1. Wirkungsdiagramm (mehrere S...
Tutorial zur Installation der PyTorch-Entwicklungsumgebung unter Windows
Anaconda-Installation Anaconda ist ein Softwarepa...
Lösung für das Problem, dass Docker Nginx nach dem Ausführen nicht mehr aufgerufen werden kann
## 1 Ich lerne gerade die Docker-Bereitstellung u...
Windows 10 und MySQL 5.5 installieren und verwenden ohne Installation ausführliches Tutorial (Bild und Text)
Dieser Artikel stellt die Installation und Verwen...
Eine kurze Diskussion über einen effizienten Algorithmus zum Erstellen von Baumstrukturen in JavaScript
Inhaltsverzeichnis Einführung Ideen Erstellen ein...
JavaScript implementiert die H5-Goldmünzenfunktion (Beispielcode)
Heute habe ich eine Aktivität für einen roten Ums...
So legen Sie fest, dass der Text im Dropdown-Auswahlmenü nach links und rechts gescrollt wird
Ich möchte das Marquee-Tag verwenden, um das Scrol...
Führt MySQL die Aktualisierungsanweisung erneut aus, wenn sie dieselben Daten enthält wie die ursprüngliche?
Hintergrund In diesem Artikel wird hauptsächlich ...
JS implementiert einen Stoppuhr-Timer
In diesem Artikelbeispiel wird der spezifische JS...
Lehr- oder Lernprogramm für Webdesign
Abschnitt Studieninhalte Std 1 Webdesign-Übersich...
Sublime/vscode – schnelle Implementierung zur Generierung von HTML-Code
Inhaltsverzeichnis Grundlegende HTML-Struktur Gen...
So lösen Sie das jQuery-Konfliktproblem
In der Frontend-Entwicklung ist $ eine Funktion i...
Theorie: Die zwei Jahre User Experience
<br />Es ist nicht länger als zwei Jahre her...
So löschen Sie den Timer elegant in Vue
Inhaltsverzeichnis Vorwort Optimierung Ableitungs...