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, placeholder zu verwenden, um dieses Problem zu lösen, und v-model wird normalerweise verwendet, um den Wert in data zu binden. Dann setzt der Wert von data den Standardwert auf leer

//script
data(){
    return {
        index:0,
        name:''
    }
}
//template
<input type="number" placeholder="默认值index" v-model="index"/>
<input type="text" placeholder="默认值name" v-model="name"/>

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 Fall computed

sollte verwendet werden

//template
<input type="text" placeholder="城市" v-model="city"/>
<input type="text" placeholder="国家" v-model="country"/>
<input type="text" placeholder="国家+城市" v-model="countryAndCity"/>

//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
<li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li>

//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 eine Mehrfachauswahl-Situation ist, 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

<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>

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

<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components>

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
<dialog v-if="isDialog"></dialog>

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 Signal der Klickzeit weitergeben. Die Referenzkomponentenseite empfängt das Signal und steuert dann das Schließen

//dialog.vue
 
<p @click="close"> 点击关闭 </p>

methods:{
    close() {
        this.$emit('close')
    }
}    

//app.vue
<dialog v-if="isDialog" @close="closeDialog"></dialog>

data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    },
    closeDialog(){
        this.isDialog = false
    }
}

um den eigentlichen Schließvorgang zur einfacheren Bedienung auf die Seite

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

6.css Scoped

css in vue kann verwendet werden Der Bereichsschlüssel wird verwendet, um den Umfang von CSS einzuschränken

<style scoped>...</style>

Dies wird jeden Tag verwendet, da auf diese Weise nicht berücksichtigt werden muss, dass sich die Klassennamen überschneiden, und außerdem Sass verwendet werden muss , weniger, Stift, Postcss und andere CSS-Verarbeitungsgeräte, der Effekt ist einfach großartig.

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
-Tags style

<style> body{...} </style>
<style scoped> .. .</style>

in eine Vue-Datei schreiben. Verwandte Empfehlungen:

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!