Benutzerdefinierte Vue-DirektiveBenutzerdefinierte AnweisungenRegistrieren 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> Öffnen Sie die Schnittstelle und platzieren Sie den Cursor direkt im Eingabefeld Hook-FunktionDie Direktivendefinitionsfunktion bietet mehrere Hook-Funktionen (optional).
Die Parameter der Hook-Funktion umfassen hauptsächlich Folgendes
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> 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> ZusammenfassenDieser 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:
|
<<: Das Homepage-Design spiegelt am besten das Niveau des Webdesigners wider
>>: CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern
Wenn Sie einige Microsoft-Dokumente mit LibreOffi...
Inhaltsverzeichnis veranschaulichen 1. Blob-Objek...
Inhaltsverzeichnis Semaphor Nginx-Hot-Bereitstell...
Inhaltsverzeichnis 1. Einführung in den Autofs-Di...
In diesem Artikel wird der spezifische Code von j...
1. MySQL herunterladen 1.1 Download-Adresse https...
Konfigurationsanweisungen Linux-System: CentOS-7....
1. Docker installieren 1. Ich habe Centos7 in der...
Fügen Sie der angegebenen Datei im Dockerfile meh...
Hallo zusammen, ich frage mich, ob ihr die gleich...
Gestern, als ich die Funktion zum Hochladen von B...
Der Anwendungsbereich von CSS ist global. Wenn da...
Vorwort Bei der Frontend-Entwicklung stoßen wir h...
Inhaltsverzeichnis Starten und Stoppen Datenbankb...
Inhaltsverzeichnis 1. Allgemeine Schritte zur SQL...