1. Nennen Sie die Verzeichnisstruktur
1. Erstellen Sie eine Vue-Instanz
2. Vue-Optionsname (8 Typen)
3. Vue-Instanz-Mount-Element
4. Bindungsdaten der Vue-Instanz
5. Von vue.js bereitgestellte Instanzeigenschaften und -methoden
6. Datenbindung
(1) Textinterpolation
(2) HTML-Inhalt ausgeben
(3) Bindung von HTML-Attributen
(4) Abkürzung zum Binden von HTML-Attributen
7. Filtern
(1) Vertretungsformular
(2) Definieren Sie einen globalen Filter
(3) Lokale Filter definieren
8. Bedingungsbeurteilungsanweisung
(1) Einzelelementurteil
(2) Beurteilung einer Gruppe von Elementen
9. Schleifenanweisung
(1) Anweisungen zum Durchlaufen von Arrays und 2 Verwendungsformen
(2) Durchlaufen Sie eine Reihe von Elementen
(3) Verwenden Sie die Form des Traversierungsobjekts
(4) Durchlaufen von ganzen Zahlen
10. Methode zur Array-Aktualisierung
11. Definition und Form berechneter Attribute
12. Der Unterschied zwischen Hörattributen und berechneten Attributen (2 Punkte)
13. Definition und Verwendung von Überwachungsattributen
14. Klassenattributbindung
(1) Inline-Bindung
(2) Nicht-Inline-Bindung
15. Stilbindung
(1) Inline-Bindung
(2) Nicht-Inline-Bindung
16. Anweisungen und Abkürzungen zur Ereignisüberwachung
17. Anweisungen zur bidirektionalen Bindung von Formularelementen
18. Kontrollkästchen „Bindung“.
(1) Bindung eines einzelnen Kontrollkästchens
(2) Mehrere Kontrollkästchenbindungen
19. V-Modell-Modifikator
(1) Verzögerte Synchronisierung
(2) Konvertieren Sie die Benutzereingabe in einen numerischen Typ
(3) Filtern Sie die Leerzeichen am Anfang und Ende der Eingabezeichenfolge
20. Registrieren Sie benutzerdefinierte Anweisungen
(1) Registrieren Sie globale benutzerdefinierte Anweisungen und Beispiele
(2) Registrieren Sie lokale benutzerdefinierte Anweisungen
21. Häufig verwendete Hook-Funktionen in benutzerdefinierten Anweisungen
22. Komponenten registrieren
(1) Registrieren Sie globale Komponenten und Beispiele
(2) Lokale Komponenten registrieren
(3) Daten- und Vorlagenoptionen in Komponenten
23. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente
24. Methoden und Beispiele zum Übergeben dynamischer Prop
25. Die übergeordnete Komponente erhält Informationen und Beispiele zu untergeordneten Komponenten
26. Definition der Inhaltsverteilung
27. Beispiele für die Verwendung von Slots
(1) Grundlegende Verwendung
(2) Benannte Slots
28. Häufig verwendete Deklarationszyklusfunktionen für Vue-Komponenten
29. Die Methode der dynamischen Komponenten
30. Die Methode zum Speichern des Status, wenn die Komponente dynamisch umgeschaltet wird
31. Der Name des Plug-Ins, das Routing, Datenanforderung und Statusverwaltung implementiert
32. Die Rolle des Vue-Routers
33. Grundlegende Verwendung des Vue-Routers
34. Die Methode des Verschachtelungsroutings
35. Vues integrierte dynamische Navigationsmethode
36. Die Methode der Multi-Interface-Anzeige in der Routing-Ansicht
37. Die Get-Request-Methode von Axios gibt Erfolg/Misserfolg und entsprechende Beispiele zurück
38. Die Rolle von Vuex
39. Die Rolle und Einbindung von Store in Vuex
40. Das Funktionsprinzip von vuex
41. ...mapState- und ...mapActions-Funktionen in vuex
-------------------------------------------------- -------------------------------------------------- ------------
2. Entsprechender Inhalt
1. Erstellen Sie eine Vue-Instanz
var vm=new Vue({})
2. Vue-Optionsname (8 Typen)
el/data/methods/computed/watch/filters/directives/components
3. Vue-Instanz-Mount-Element
Verwenden Sie die el-Option, z. B. el: „#app“
4. Bindungsdaten der Vue-Instanz
Verwenden Sie die Datenoption
5. Von vue.js bereitgestellte Instanzeigenschaften und -methoden
mit dem Präfix $, z. B. vm.$data.company
6. Datenbindung
(1) Textinterpolation
Verwenden Sie { {}}-Tags mit doppelten geschweiften Klammern, z. B. { { message }}
(2) HTML-Inhalt ausgeben
Verwenden Sie die v-html-Direktive, z. B. v-html="message"
(3) Bindung von HTML-Attributen
Sie können die Textinterpolation nicht direkt verwenden, sondern müssen v-bind:-Attributanweisungen verwenden, z. B. v-bind:src="src"
(4) Kurzform zum Binden von HTML-Attributen
: Attribut, zum Beispiel: src="src"
7. Filtern
(1) Vertretungsformular
Angezeigt durch das Pipe-Symbol „|“, z. B. { { message | myFilter }}
(2) Definieren Sie einen globalen Filter
Vue.filter(ID, function(){})
(3) Lokale Filter definieren
Wenden Sie die Filteroption im von Vue erstellten Konstruktor an
8. Bedingungsbeurteilungsanweisung
(1) Einzelelementurteil
v-if / v-else / v-else-if
Beispiel: <p v-if="a<b">
(2) Beurteilung einer Gruppe von Elementen
Verwenden Sie das <template>-Element als Wrapper-Element
Beispiel: <template v-if="show">
9. Schleifenanweisung
(1) Anweisungen zum Durchlaufen von Arrays und 2 Verwendungsformen
v-for-Anweisung
Verwendungsformat: v-for=“item in items“ / „(item, index) in items“
(2) Durchlaufen Sie eine Reihe von Elementen
Verwenden Sie das <template>-Element als Wrapper-Element
<template v-for=“item in items“>
(3) Verwenden Sie die Form des Traversierungsobjekts
v-for=“Wert im Objekt“ / v-for=“(Wert, Schlüssel) im Objekt“
(4) Durchlaufen von ganzen Zahlen
v-for=“n in 5“
10. Methode zur Array-Aktualisierung
push() / pop() / shift() / unshift() / splice() / sort() / reverse()
Zum Beispiel: vm.items.push()
11. Definition und Form berechneter Attribute
Im berechneten Attribut definiert, wird der Attributwert aktualisiert, wenn sich die Daten ändern, von denen das Attribut abhängt, und die Datenbindung, die vom Attribut abhängt, wird ebenfalls aktualisiert.
Zum Beispiel:
berechnet: {
newstr: function(){}
}
12. Der Unterschied zwischen Höreigenschaften und Recheneigenschaften
- Der Wert der berechneten Eigenschaft wird in „berechnet“ definiert, während der überwachte in „Daten“ definiert wird
- Der Wert der berechneten Eigenschaft kann zwischengespeichert werden, während die überwachte Eigenschaft jedes Mal berechnet wird
13. Definition und Verwendung von Überwachungsattributen
Bei jeder Änderung der überwachten Eigenschaft wird eine bestimmte Aktion ausgeführt.
Verwendung: Kann in der Watch-Option definiert werden oder die Instanzmethode vm.$watch() verwenden.
14. Klassenattributbindung
(1) Inline-Bindung
Binden Sie das Klassenattribut des Elements direkt in die Form eines Objekts
v-bind:class=“{active: isActive}“
(2) Nicht-Inline-Bindung
Definieren Sie das Objekt, das an das Klassenattribut des Elements in der Datenoption gebunden ist
v-bind:class=“classObject“
15. Stilbindung
(1) Inline-Bindung
Binden Sie die Style-Eigenschaft des Elements direkt an ein Objekt
v-bind:style=“{fontWeight:weight}“
(2) Nicht-Inline-Bindung
Definieren Sie das an das Stilattribut des Elements gebundene Objekt in der Datenoption
v-bind:style=“styleObject“
16. Form und Abkürzung des Ereignisüberwachungsbefehls
v-on-Richtlinie
Zum Beispiel: v-on:click="show" oder @click="show"
17. Anweisungen zur bidirektionalen Bindung von Formularelementen
V-Modell-Direktive
18. Kontrollkästchen „Bindung“.
(1) Bindung eines einzelnen Kontrollkästchens
Verwenden Sie das V-Modell, um einen booleschen Wert zu binden
Zum Beispiel:
<input type=“checkbox“ v-model=“checked“>
Dann die Datenoption eingecheckt: false
(2) Mehrere Kontrollkästchenbindungen
Verwenden Sie das V-Modell, um ein Array zu binden
Zum Beispiel:
<input type=“checkbox“ value=“A“ v-model=“brand“>
<label>A</label>
<input type=“checkbox“ value=“B“ v-model=“brand“>
<label>B</label>
Markieren Sie dann die Datenoption: []
19. Modifikatoren des V-Modells
(1) Verzögerte Synchronisierung
Nach dem Hinzufügen des Lazy-Modifikators wird er so konvertiert, dass das Änderungsereignis für die Synchronisierung verwendet wird
(2) Konvertieren Sie die Benutzereingabe in einen numerischen Typ
Verwenden Sie den Zahlenmodifikator
(3) Filtern Sie die Leerzeichen am Anfang und Ende der Eingabezeichenfolge
Verwenden Sie den Trimmmodifikator
20. Registrieren Sie benutzerdefinierte Anweisungen
(1) Registrieren Sie globale benutzerdefinierte Anweisungen und Beispiele
Verwenden Sie die Methode Vue.directive(id, definition). Definition ist eine spezifische Anweisungs-Hook-Funktion.
Beispiel:
Vue.directive('focus', {
eingefügt: function(el){
el.focus();
}
})
(2) Registrieren Sie lokale benutzerdefinierte Anweisungen
Registrieren Sie eine lokale benutzerdefinierte Direktive in der Option „directives“.
21. Häufig verwendete Hook-Funktionen in benutzerdefinierten Anweisungen
bind: Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an das Element gebunden wird.
eingefügt: Wird aufgerufen, wenn das gebundene Element in das übergeordnete Element eingefügt wird
update: Wird aufgerufen, wenn sich der gebundene Wert ändert
22. Komponenten registrieren
(1) Registrieren Sie globale Komponenten und Beispiele
Verwenden Sie die Methode Vue.component(tagName, options).
Beispiel:
Vue.component('my-component', {
Vorlage: '<div>Globale Komponenten registrieren</div>'
})
(2) Lokale Komponenten registrieren
Registrieren Sie eine Teilkomponente in der Komponentenoption.
(3) Daten- und Vorlagenoptionen in Komponenten
Die Datenoption einer Komponente muss eine Funktion und kein Objekt sein.
Vorlage sind die Seiteninformationen von HTML
23. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente
Dies wird durch die Prop-Funktion erreicht.
Untergeordnete Komponenten müssen Prop explizit mit der Option props deklarieren, und das übergeordnete Element übergibt Daten über dieses Attribut an die untergeordnete Komponente.
24. Methoden und Beispiele zum Übergeben dynamischer Prop
Die Daten in der übergeordneten Komponente werden über v-bind an die untergeordnete Komponente übergeben.
Beispiel:
<my-component v-bind:boxoffice=“boxoffice_data“>
25. Die übergeordnete Komponente erhält Informationen und Beispiele zu untergeordneten Komponenten
Die untergeordnete Komponente löst ein benutzerdefiniertes Ereignis aus, indem sie die integrierte Methode $emit() aufruft und den Ereignisnamen übergibt. Die übergeordnete Komponente lauscht über v-on auf das benutzerdefinierte Ereignis der Instanz der untergeordneten Komponente.
Das Format der Emit-Methode:
vm.$emit(eventName, Parameter)
Die übergeordnete Komponente greift über $event auf die übergebenen Parameter zu
Beispiel:
In der Unterkomponente:
this.$emit('enlarge', value);
In der übergeordneten Komponente:
v-on:enlarge=“fontSize += $event“
26. Definition der Inhaltsverteilung
Eine Möglichkeit, den Inhalt übergeordneter Komponenten und die von Vue.js bereitgestellten Vorlagen für untergeordnete Komponenten zu mischen.
Übergeben Sie das <slot>-Element in der untergeordneten Komponente als Slot für den Originalinhalt.
27. Beispiele für die Verwendung von Slots
(1) Grundlegende Verwendung
übergeordnetes Element:
<my-slot>{ { message }} </my-slot>
Unterbaugruppe:
Fügen Sie <slot></slot> zur Vorlage hinzu
Die { {message}} der übergeordneten Komponente ersetzt beim Rendern das <slot>-Tag in der untergeordneten Komponente.
(2) Benannte Slots
Um mehrere Slots in einer Komponentenvorlage zu verwenden, müssen Sie das Namensattribut des <slot>-Elements verwenden. Die v-slot-Direktive kann für ein <template>-Element verwendet werden, wenn Inhalte für benannte Slots bereitgestellt werden. Der Parameter der v-slot-Direktive muss mit dem Namenswert des Slot-Elements in der untergeordneten Komponente übereinstimmen.
übergeordnetes Element:
<mein-Slot>
<template v-slot:title>
{ { title_data }}
</template>
</my-slot>
Unterbaugruppe:
Fügen Sie <slot name="title"></slot> zur Vorlage hinzu
28. Häufig verwendete Deklarationszyklusfunktionen für Vue-Komponenten
erstellt: wird aufgerufen, nachdem die Instanz erstellt wurde
mount: wird aufgerufen, wenn el durch das neu erstellte vm.$el ersetzt und auf der Instanz gemountet wird
aktualisiert: Wird aufgerufen, wenn sich die Daten ändern
29. Die Methode der dynamischen Komponenten
Verwenden Sie das <component>-Element, um eine dynamische Bindung an sein is-Attribut durchzuführen und anhand des Werts des is-Attributs zu bestimmen, welche Komponente verwendet werden soll.
30. Die Methode zum Speichern des Status, wenn die Komponente dynamisch umgeschaltet wird
Um den umgeschalteten Zustand im Speicher zu behalten und wiederholtes Rendern zu vermeiden, verwenden Sie ein <keep-alive>-Element, um dynamische Komponenten einzuschließen.
31. Der Name des Plug-Ins, das Routing, Datenanforderung und Statusverwaltung implementiert
Routing-Management: Vue-Router
Datenanfrage: axios
Staatsverwaltung: vuex
32. Die Rolle des Vue-Routers
Ordnen Sie jeden Pfad der entsprechenden Komponente zu und wechseln Sie durch Routing zwischen den einzelnen Komponenten
33. Grundlegende Verwendung des Vue-Routers
(1) Seitenseite
Navigieren Sie durch den Router-Link, wobei das to-Attribut den Link angibt
Konfigurieren Sie dann den Routing-Exit-Router-View
(2) Skriptende
Definieren Sie Routing-Komponenten
Routen definieren
var Routen = [{Pfad: '/first', Komponente: first}]
Erstellen Sie eine Router-Instanz
var router = new VueRouter({routes});
Mounten Sie die Root-Instanz
var app = new Vue({router}).$mount('#example');
34. Die Methode des Verschachtelungsroutings
Fügen Sie beim Neudefinieren der Route zusätzlich zu den Pfad- und Komponenteninformationen die Informationen zu den untergeordneten Elementen hinzu. Die Informationen zu Pfad und Komponente liegen auch in Kindern vor.
35. Vues integrierte dynamische Navigationsmethode
this.$router.push({name: '<url-name>'})
36. Die Methode der Multi-Interface-Anzeige in der Routing-Ansicht
Fügen Sie Namensinformationen in der Router-Ansicht hinzu
Zum Beispiel:
<router-view name=“left“></router-view>
<router-view name=“right“></router-view>
37. Die Get-Anforderungsmethode von Axios, die Erfolgs-/Fehlerverarbeitung zurückgeben und entsprechende Beispiele.
axios.get()
.then(function(response){console.log(response.data);})
.catch(function(error){console.log(error);})
38. Die Rolle von Vuex:
Die Zustandsänderung einer Komponente wirkt sich auf andere Komponenten aus, sodass diese ebenfalls entsprechend geändert werden.
39. Die Rolle und Einbindung von Store in Vuex
Wird zum Speichern von Daten oder Statusinformationen verwendet, die von der gesamten Anwendung gemeinsam genutzt werden müssen
Enthaltene Informationen sind:
Status: Definierte Statusinformationen
Getter: Äquivalent zu berechneten Eigenschaften
Mutationen: Definieren Sie Mutationsfunktionen zur Zustandsänderung
Aktionen: Definieren Sie die Aktion, um die Methode bei Mutationen zum Ändern des Status zu übermitteln
40. Das Funktionsprinzip von vuex
Lösen Sie eine Aktion über die Dispatch-Methode in der Vue-Komponente aus, übermitteln Sie eine Mutation über die Commit-Methode in der Aktion, ändern Sie einen neuen Statuswert über die der Mutation entsprechende Funktion und vuex rendert den neuen Statuswert in der Komponente.
41. ...mapState- und ...mapActions-Funktionen in vuex
...ist ein Objekt-Expander, das heißt, ihm folgt ein Array, das erweitert werden kann.
Die MapState-Funktion gibt ein Array-Objekt zurück, das den Status im Store zuordnet und direkt in der Vorlage verwendet werden kann, ohne dass die Statusdaten im Store einzeln über this.$store.state abgerufen werden müssen.
Zum Beispiel:
berechnet:{ ...mapState(['name', 'age']) // Identisch mit dem Namen im Bundesstaat, Sie können Name und Alter direkt in der Vorlage verwenden }
Andernfalls in der berechneten Eigenschaft:
name: state => this.$store.state.name
age: state => this.$store.state.age
Wenn also derselbe Name wie store.js verwendet wird, vereinfacht die Verwendung von mapState das Schreiben
Die Toolfunktion „mapActions“ ordnet die Dispatch-Methode im Store den Methoden der Komponente zu.
Zum Beispiel:
...mapActions([
'logoutAction'
])
Wenn mapActions verwendet wird, wird es wie folgt geschrieben:
logoutAction(){ this.$store.dispatch('logoutAction') } Also im Fall des gleichen Namens wie store .js vereinfacht die Verwendung von MapActions das Schreiben.