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
CocosCreator Version 2.3.4 Drachenknochenanimatio...
Hintergrund: Da die Projekte des Unternehmens dem...
Als eines der beliebtesten Front-End-Frameworks i...
Ausführen des Skripts im Debugmodus Sie können da...
Navicat meldet beim Verbinden mit der Datenbank d...
Wie wir alle wissen, sind Binlog-Protokolle für M...
Vorwort: Die Funktion „Gruppieren nach“ ruft das ...
einführen Haben Sie schon einmal einen ganzen Tag...
1. Zeitformatierung und andere Methoden Es wird e...
1. Ziehen Sie das Bild Docker-Pull-Registrierung....
1. Übersicht 1.1 Grundlegende Konzepte: Docker is...
Nach dem Einrichten des MySQL-Master-Slaves wisse...
Die Auswirkung der Vervollständigung einer Menüle...
Docker-Übersicht Docker ist eine Open-Source-Lösu...
Inhaltsverzeichnis 1. Selbstsortierung der Tabell...