Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen

Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen

Benutzerdefinierte Vue-Direktive

Benutzerdefinierte Anweisungen

Registrieren Sie eine globale Direktive „v-focus“, die verwendet wird, um das Element zu fokussieren, wenn die Seite geladen wird

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script src="../js/vue.js"></script>
	</Kopf>
	<Text>
		<div id="app">
			<Eingabe v-fo>
		</div>
		<Skript>
            // Benutzerdefinierte Direktive registrieren Vue.directive('fo',{
				eingefügt:Funktion(el){
                    // Fokuselement el.focus()
				}
			})
			neuer Vue({
				el: '#app'
			})
		</Skript>
	</body>
</html>

Bild-20211112151122161

Öffnen Sie die Schnittstelle und platzieren Sie den Cursor direkt im Eingabefeld

Hook-Funktion

Die Direktivendefinitionsfunktion bietet mehrere Hook-Funktionen (optional).

  • bind : Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird. Mit dieser Hook-Funktion kann eine Initialisierungsaktion definiert werden, die einmal während der Bindung ausgeführt wird.
  • inserted : Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (kann aufgerufen werden, wenn der übergeordnete Knoten vorhanden ist, muss aber nicht unbedingt im Dokument vorhanden sein).
  • update : Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, aktualisiert wird, unabhängig davon, ob sich der gebundene Wert ändert. Durch den Vergleich der Bindungswerte vor und nach der Aktualisierung können unnötige Vorlagenaktualisierungen ignoriert werden.
  • componentUpdated : Wird aufgerufen, wenn die Vorlage des gebundenen Elements einen Aktualisierungszyklus abschließt.
  • unbind : Wird nur einmal aufgerufen, wenn die Direktive vom Element getrennt wird.

Die Parameter der Hook-Funktion umfassen hauptsächlich Folgendes

  • el : Das Element, an das die Anweisung gebunden ist, mit der das DOM direkt manipuliert werden kann.
  • binding : ein Objekt mit den folgenden Eigenschaften
  • name : Der Name der Direktive ohne das Präfix „v-“.
  • value : Der Bindungswert der Direktive, z. B. v-my-directive="1+1", der Wert ist 2.
  • oldValue : Der vorherige an die Direktive gebundene Wert, nur in Update- und ComponentUpdated-Hooks verfügbar, unabhängig davon, ob sich der Wert geändert hat.
  • expression : Der Ausdruck oder Variablenname des Bindungswerts, z. B. v-my-directive="1+1", der Wert des Ausdrucks ist "1+1".
  • arg : Der an die Direktive übergebene Parameter, z. B. v-my-directive:foo, der Wert von arg ist „foo“.
  • modifiers : Ein Objekt, das Modifikatoren enthält, z. B. v-my-directive.foo.bar. Der Wert des Modifikatorobjekts Modifikatoren ist {foo: true, bar: true}.
  • vnode : Der durch die Vue-Kompilierung generierte virtuelle Knoten.
  • oldVnode : Der vorherige virtuelle Knoten, nur in den Hooks „Update“ und „componentUpdated“ verfügbar.

Ausgabebezogene Attribute

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script src="../js/vue.js"></script>
	</Kopf>
	<Text>
		<div id="app" v-hh:abc="mess">
		</div>
		<Skript>
			Vue.direktive('hh',{
				binden: Funktion(el,Bindung,vnode){
					var s = JSON.stringify
					el.innerHTML = 'Name:'+s(Bindung.Name)+'<br>'+
					'Wert:'+s(Bindung.Wert)+'<br>'+
					'Ausdruck:'+s(Bindung.Ausdruck)+'<br>'+
					'Argument:'+s(Bindung.arg)+'<br>'+
					'Modifikatoren:'+s(Bindung.Modifikatoren)+'<br>'+
					'vnode-Schlüssel:'+Object.keys(vnode).join(',')
				}
			})
			neuer Vue({
				el:'#app',
				Daten:{
					Chaos: 'abc'
				}
			})
		</Skript>
	</body>
</html>

Bild-20211112163153199

Anwendungsbeispiele

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<script src="../js/vue.js"></script>
	</Kopf>
	<Text>
		<div id="app">
			<div v-hh="{text:'123',c:'blau'}"></div>
		</div>
		<Skript>
			Vue.Direktive('hh',Funktion(el,Bindung){
				el.innerHTML=Bindung.Wert.Text
				el.style.color=Bindung.Wert.c
			})
			neuer Vue({
				el:'#app'
			})
		</Skript>
	</body>
</html>

Bild-20211112164831459

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Verwendung globaler und lokaler benutzerdefinierter Vue-Anweisungen
  • Detaillierter Code zu benutzerdefinierten Vue-Anweisungen zum Implementieren des Elementziehens
  • So schreiben Sie eine benutzerdefinierte Direktive für Vue3
  • Erklärung und Beispielverwendung von 4 benutzerdefinierten Anweisungen in Vue
  • Details zu benutzerdefinierten Vue3-Anweisungen
  • Beschreibung der benutzerdefinierten Vue-Direktiven und ihrer allgemeinen Hook-Funktionen

<<:  Das Homepage-Design spiegelt am besten das Niveau des Webdesigners wider

>>:  CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

Artikel empfehlen

CocosCreator Skelettanimation Drachenknochen

CocosCreator Version 2.3.4 Drachenknochenanimatio...

Implementierungsideen und Schritte für die MySQL-Master-Slave-Konstruktion (mehrere Master und ein Slave)

Hintergrund: Da die Projekte des Unternehmens dem...

Ein kurzer Vortrag über die Kenntnisse, die Sie für den Einstieg in Vue beherrschen müssen

Als eines der beliebtesten Front-End-Frameworks i...

Detaillierte Erklärung des Skript-Debugging-Mechanismus in Bash

Ausführen des Skripts im Debugmodus Sie können da...

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini

Navicat meldet beim Verbinden mit der Datenbank d...

Erläutern Sie das Binlog-Protokoll von MySQL und wie Sie das Binlog-Protokoll zum Wiederherstellen von Daten verwenden

Wie wir alle wissen, sind Binlog-Protokolle für M...

Implementieren Sie Group By basierend auf MySQL, um die neuesten Daten jeder Gruppe zu erhalten

Vorwort: Die Funktion „Gruppieren nach“ ruft das ...

Starten Sie eine lokale Kubernetes-Umgebung mit Kind und Docker

einführen Haben Sie schon einmal einen ganzen Tag...

Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen

1. Zeitformatierung und andere Methoden Es wird e...

Detaillierte Erläuterung des Prozesses zum Erstellen eines MQTT-Servers mit Docker

1. Ziehen Sie das Bild Docker-Pull-Registrierung....

Einführung in Docker-Container

1. Übersicht 1.1 Grundlegende Konzepte: Docker is...

Detaillierte Erklärung, wie Zabbix den Master-Slave-Status von MySQL überwacht

Nach dem Einrichten des MySQL-Master-Slaves wisse...

So verwenden Sie display:olck/none zum Erstellen einer Menüleiste

Die Auswirkung der Vervollständigung einer Menüle...

Einführung in Docker-Container

Docker-Übersicht Docker ist eine Open-Source-Lösu...

Detaillierte Erläuterung der Schritte zur Verwendung von ElementUI in tatsächlichen Projekten

Inhaltsverzeichnis 1. Selbstsortierung der Tabell...