Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen

Inhaltsverzeichnis

Benutzerdefinierte Vue-Direktive

Benutzerdefinierte Anweisungen
Hook-Funktion
Ausgabebezogene Attribute
Anwendungsbeispiele

Zusammenfassen

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