Wissenspunkte zu Vue-Interviews

Dieses Mal werde ich Ihnen einige Wissenspunkte zum Vue-Interview mitteilen. Freunde, die es brauchen, können darauf achten, es zu lernen.

[Verwandte Empfehlungen: Vue-Interviewfragen (2020)]

1. Einführung in Vue

Vue ist ein Build user Das Framework der Schnittstelle. Es handelt sich um ein leichtes MVV-Framework, das die sogenannte bidirektionale Datenbindung und komponentenbasierte Front-End-Entwicklung implementiert. Es implementiert eine reaktionsfähige Datenbindung und die Kombination von Ansichtskomponenten ist einfach zu bedienen und kompakt.

2. Installieren Sie das vue-devtools-Plugin, um das Debuggen von Vue zu erleichtern. Konfigurieren Sie, ob vue-devtools den Code überprüfen darf, um das Debuggen zu erleichtern. devtools = false;

vue.config.produktionTip=false; Verhindert den Start von Produktionsnachrichten.

3. Allgemeine Befehle.

V-Modell bidirektionale Datenbindung, im Allgemeinen für Formularelemente verwendet.

v-for führt Schleifenoperationen für Arrays oder Objekte aus. Verwenden Sie v-for anstelle von v-repeat zum Binden Zeit einstellen, Verwendung: v-on : time = 'function'

v-show/v-if wird zum Ein- oder Ausblenden von Elementen verwendet, v-show wird durch Anzeige implementiert , v- if wird nach jedem Löschen erstellt

4. Ereignisse und Attribute

v-on:click = "Abkürzung @click=" "

$event-Ereignisobjekt, das ereignisbezogene Informationen wie Ereignisquelle, Zeittyp, Offset usw. enthält.

Ereignis bubbling, Die native js-Methode basiert auf Ereignisobjekten, während die vue-Methode nicht auf Ereignisobjekten basiert. @click.stop verhindert das Bubbling von Ereignissen.

Tastaturereignisse: @keydown.13 oder Keydown. Geben Sie

Ereignismodifikator .stop ruft event.stopPropagation();

v-bind wird für die Attributbindung und Verwendung v -bind :Attribute="" Beispiel v-bind:src="" Abkürzung: src=""

Vorlage

vue .js Mithilfe der HTML-basierten Vorlagensyntax wird die Datenvorlage, die Dom an die Vue-Instanz bindet, {{}} verwendet, um Daten zu binden und auf der Seite anzuzeigen

bidirektionale Bindung V-Modell

Einzelne Bindung {{}} kann Probleme mit Flackern haben, Sie können auch V-Text V-HTML

andere Befehle verwenden v -once Daten werden gebunden, sobald v-pre nicht mutiert und direkt so angezeigt wird, wie sie sind

6. Filter

ist gewohnt Modelldaten filtern. Verarbeiten und filtern Sie Datenpaare vor der Anzeige

Syntax: {{data |.filter (parameter)}}

Integrierte Filter werden nach 2.0 gelöscht. Wenn Sie sie verwenden, können Sie Bibliotheken von Drittanbietern wie lodash data-fns, Datumsformatierung, Accounting.js, Währungsformatierung und Anpassung verwenden

7. Ajax-Anfrage senden

Vue selbst unterstützt das Senden von Ajax-Anfragen nicht, um es zu implementieren Axios verwenden

axios ist ein Promise-basierter HTTP-Anfrage-Client, der zum Senden von Anfragen verwendet wird

Grundlegende Verwendung:

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

Hinweis: Wenn Axios standardmäßig Daten sendet, ist das Datenformat die Anforderungsnutzlast und nicht das von uns verwendete Formulardatenformat. Daher müssen Parameter als Schlüsselwertobjekte übergeben werden

, Parameter können nicht im JSON-Format übergeben werden

Möglichkeiten zum Übergeben von Parametern: Spleißen Sie die Schlüssel-Wert-Paare selbst, verwenden Sie transformrequst, um die Anforderungsdaten vor dem Senden der Anforderung zu konvertieren, oder verwenden Sie qs Modul zum Konvertieren von

axios unterstützt keine domänenübergreifenden Anfragen. Sie können vue-resource verwenden, um domänenübergreifende Anfragen zu senden.

Senden Sie eine domänenübergreifende Anfrage: this.$http.get(url,[options]); this.$http.post(url,[options]);

8.vue-Lebenszyklus

Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz wird zum Lebenszyklus

9. Berechnete Attribute

Berechnete Attribute werden auch zum Speichern von Daten verwendet. Sie haben diese beiden Eigenschaften: Daten können logisch verarbeitet werden und die Daten in den berechneten Attributen können überwacht werden.

10.vue-Instanzeigenschaften und -methoden

Eigenschaften vm.$el vm.$data vm.$options vm.$refs

Methode vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm. $watch(data,callback)

11, benutzerdefinierte Anweisung

benutzerdefinierte globale Anweisung vue.directive (Anweisungs-ID, Definitionsobjekt)

12. Übergang (Animation)

Vue bietet verschiedene Möglichkeiten, den Prozess beim Einfügen von Updates oder einem Dom anzuwenden,

Grundlegende Verwendung: Verwenden Sie die Übergangskomponente und platzieren Sie das zu animierende Element innerhalb der Komponente

Verwenden Sie es zusammen mit der Animationsbibliothek eines Drittanbieters animater.css

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13 .Component

Komponente ist eine der leistungsstärksten Funktionen von Vue. Komponenten können HTML-Elemente wild bekämpfen, wiederverwendeten Code kapseln und Komponenten sind benutzerdefinierte Elementobjekte.

Definieren Sie die Komponentenmethode. Erstellen Sie zunächst einen Komponentenkonstruktor und verwenden Sie dann den Komponentenkonstruktor, um die Komponente zu erstellen. b>Direkt erstellen

Um auf die Vorlage zu verweisen, wird auf den Komponenteninhalt in der Vorlage