Beispiele für Vue-Entwicklungsfähigkeiten, die es wert sind, gesammelt zu werden

In diesem Artikel werden wir einige nützliche Entwicklungskompetenzen von Vue aus vielerlei Hinsicht näher erläutern. Ich hoffe, dass es allen helfen kann.

1. Der clevere Einsatz von Platzhaltern und berechneten

Formularentwicklung ist definitiv ein wesentlicher Bestandteil der täglichen Entwicklung, aber Konstruktionszeichnungen haben oft Formvorgabewerte, wie zum Beispiel:

Der Bedarfspunkt des Nachfragers ist: Zeigt den Standardwert an, wenn kein Wert eingegeben wird, und zeigt die Eingabe an, wenn der Wert eingegeben wird Wert eingegeben.

Normalerweise können Sie daran denken,placeholderzu verwenden, um dieses Problem zu lösen, undv-modelwird normalerweise verwendet, um den Wert indatazu binden. Dann setzt der Wert vondataden Standardwert auf leer

//script data(){ return { index:0, name:'' } } //template  

Der obige Effekt besteht darin, dass der Wert des Platzhalters der ersten Eingabe nicht angezeigt werden kann und der Wert des Index angezeigt wird: 0 , nein Erfüllt die Anforderungen
Der zweite Typ kann den Wert eines Platzhalters anzeigen, der die Anforderungen erfüllt.

Aber für einige komplexe Anforderungen, wie zum Beispiel die Möglichkeit, dass der Benutzer einen Stadtnamen (city) und einen Ländernamen (country) auswählen und diese schließlich in einer Variablen (countryAndCity) anzeigen kann, in diesem Fallcomputed

//template    //script data(){ return { city:'', country:'' } }, computed:{ countryAndCity () { let str = '' if(this.city && this.country){ str = `${this.city}+${this.country}` } return str } }

Sie müssen oben eine Entscheidung treffen. Das Ergebnis wird angezeigt, wenn Stadt und Land Werte haben. Andernfalls wird der Wert des Platzhalters angezeigt.

2. Design von Einzelauswahl- und Mehrfachauswahl-Auswahlen

Zum Beispiel von Designern entworfene Radio-Select- und Multi-Select-Schaltflächen
Optionsschaltflächen sind relativ einfach

//template 
{{item}}
 //script data(){ return { currentIndex:0， list:['aa','bb','cc','dd'] } }, methods:{ select(index){ this.currentIndex = index } }

Das Obige ist sehr einfach, Sie können es wahrscheinlich verstehen, nachdem Sie es gelesen haben. Dies ist eine Einzelauswahl-Situation, aber wenn es eineMehrfachauswahl-Situationist, müssen Sie Ihre Situation ändern Denken

Ändern Sie zuerst das Datenformat

data(){ return { list:[ {text:'aa',isActive:false}, {text:'bb',isActive:false} {text:'cc',isActive:false}' ] } }, methods:{ select(index){ this.list[index].isActive = !this.list[index].isActive } }

Dann sieht die Vorlage so aus

{{item.text}}

3. Verwendung dynamischer Komponenten und asynchroner Komponenten

Dynamische Komponenten werden im Allgemeinen selten verwendet. Bei der dynamischen Einführung von Komponenten ist die Verwendung jedoch sehr einfach. Es ist der Kern des Komponentenkonfigurationssystems, das wir zuvor erstellt haben. Ich verwende eine dynamische Komponentenschleife, verwende dann „is“, um den Komponentennamen abzurufen, und verwende „props“, um die benutzerdefinierten Requisiten jeder Komponente abzurufen

 componentList:[{ name:'index',props:{title:'title'}}]

4. Serverseitiges Rendern von erstellten und gemounteten Komponenten

Erstellte und gemountete Fensterobjekte sind beide beim Client-Rendering vorhanden, sodass sie direkt bedient werden können.
Aber beim serverseitigen Rendern sind ihre Fenster nicht vorhanden, daher muss vor aller Logik ein Urteil hinzugefügt werden

if(typeof window !== 'object') return ;

Die wunderbare Verwendung von this.$emit

Basierend auf dem Komponentendenken teilen wir eine Seite oft in mehrere Komponenten auf und extrahieren dann einige gemeinsame Komponenten, z. B. die Dialog-Popup-Komponente. Ihr Öffnen und Schließen basiert auf der Referenzkomponentenseite ein Datenwert,

//app.vue 
 data(){ return { isDialog:false } } methods:{ showDialog(){ this.isDialog = true } }

Aber die Schließen-Schaltfläche wird normalerweise in die Dialogkomponente geschrieben, das heißt, es gibt keine solche Schaltfläche, die auf der Referenzkomponentenseite angeklickt werden kann,
Also , Sie können im Dialog das Signalder Klickzeit weitergeben. Die Referenzkomponentenseite empfängt das Signal und steuert dann das Schließen

//dialog.vue 
 点击关闭 
 methods:{ close() { this.$emit('close') } } //app.vue 
 data(){ return { isDialog:false } } methods:{ showDialog(){ this.isDialog = true }, closeDialog(){ this.isDialog = false } }

einzufügen.isDialogIn Zukunft wird es eine Schreibmethode für öffentliche Komponenten geben, die nicht auf diese Weise referenziert und direkt in der Methodenmethode referenziert wird

Aber wenn Sie den CSS-Stil des Body-Elements ändern möchten, aber nicht die öffentliche Layoutvorlage ändern möchten. Dann können Sie zwei
-Tagsstyle

Vue-Implementierung der Aufteilung von Mobiltelefonnummern in Nummerneingabefeldern – Beispiel-Tutorial

Detaillierte Erläuterung der Vue-Syntax-Splicing-Strings

Detaillierte Erläuterung der Verwendung von Eventbus zum Übergeben von Werten zwischen Vue-Komponenten

Vue-Übergang Detaillierte Erklärung der Animation

Ein einfaches Beispiel für die Implementierung der 60-Sekunden-Countdown-Funktion des Bestätigungscodes durch Vue

Das obige ist der detaillierte Inhalt vonBeispiele für Vue-Entwicklungsfähigkeiten, die es wert sind, gesammelt zu werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!