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

Tutorial zur Installation von Microsoft TrueType-Schriftarten auf Ubuntu-basierten Distributionen

Wenn Sie einige Microsoft-Dokumente mit LibreOffi...

Javascript Blob-Objekt zum Erzielen eines Dateidownloads

Inhaltsverzeichnis veranschaulichen 1. Blob-Objek...

Implementierung von Nginx Hot Deployment

Inhaltsverzeichnis Semaphor Nginx-Hot-Bereitstell...

Tutorial zur Installation und Bereitstellung des automatischen Mount-Dienstes Autofs unter Linux

Inhaltsverzeichnis 1. Einführung in den Autofs-Di...

js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

In diesem Artikel wird der spezifische Code von j...

Detaillierter Prozess zum Erstellen von mysql5.7.29 unter Centos7 von Linux

1. MySQL herunterladen 1.1 Download-Adresse https...

So starten Sie mehrere MySQL-Instanzen in CentOS 7.0 (mysql-5.7.21)

Konfigurationsanweisungen Linux-System: CentOS-7....

Tutorial zum Bereitstellen des Open-Source-Projekts Tcloud mit Docker auf CentOS8

1. Docker installieren 1. Ich habe Centos7 in der...

Dockerfile echo gibt die Methode zum Implementieren mehrerer Textzeilen in der angegebenen Datei an

Fügen Sie der angegebenen Datei im Dockerfile meh...

CSS implementiert die Webkomponentenfunktion zum Verschieben des Nachrichtenfelds

Hallo zusammen, ich frage mich, ob ihr die gleich...

Lösen Sie das Problem, dass Bilder und andere Ressourcen nach der erneuten Bereitstellung von Tomcat automatisch gelöscht werden

Gestern, als ich die Funktion zum Hochladen von B...

CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt

Der Anwendungsbereich von CSS ist global. Wenn da...

Vue muss Wissenspunkte lernen: die Verwendung von forEach()

Vorwort Bei der Frontend-Entwicklung stoßen wir h...

MySQL häufig verwendete SQL und Befehle vom Eintrag bis zum Löschen der Datenbank und zum Weglaufen

Inhaltsverzeichnis Starten und Stoppen Datenbankb...

Die 10 klassischen Optimierungsfälle und -szenarien von MySQL

Inhaltsverzeichnis 1. Allgemeine Schritte zur SQL...