Detaillierte Erläuterung des Datenproxys und der Ereignisse von VUE

Inhaltsverzeichnis

Überprüfung der Object.defineProperty-Methode
Was ist ein Datenbroker?
Datenproxy in Vue
Grundlegende Verwendung von Ereignissen
Ereignismodifikatoren
Tastaturereignisse
Zusammenfassen

Ü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>

Bild

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>

Zusammenfassen

Dieser 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:

Eine kurze Diskussion über das Prinzip des bidirektionalen Ereignisbindungs-V-Modells von Vue
Detaillierte Erläuterung der dynamischen Vue-Komponenten und Zusammenfassung der globalen Ereignisbindung
Verwendung von Vue-Filtern und Probleme bei der Zeitstempelkonvertierung
Detaillierte Erläuterung der Implementierung und Anwendungsszenarien des Vue-Filters
Detaillierte Erläuterung der Daten- und Ereignisbindung sowie der Filterfilter von Vue

<<: So stellen Sie Daten mit Binlog in MySQL 5.7 wieder her

>>: So zeichnen Sie eine Schaltfläche in XAML als Kreis neu