Dies kann auch auf Veranstaltungen verwendet werden:
v-model v-onBerechnete Eigenschaften Berechnete Eigenschaften sind eine Möglichkeit, Ihren Code zu bereinigen und sie anstelle von Ausdrücken innerhalb Ihrer Doppelschnurrbärte oder an anderen Stellen zu verwenden.
Stellen Sie sich vor, Sie haben den folgenden Code:
Stattdessen können Sie eine berechnete Eigenschaft wie unten beschrieben definieren und anstelle der schlechtesten Programmiersprachen verwenden:
let app = new Vue({ el: '#app', methods: { callMyfunction() { alert('This is it!'); } } }); callMyFunction Die Reihenfolge ist nicht real und ich beurteile keine Programmiersprache. Es dient nur zur Demonstration.
Berechnete Eigenschaften sind Getter, was bedeutet, dass sie nur etwas zurückgeben und keine Rolle beim Festlegen der Daten spielen.
Sie können dieses Verhalten ändern und sowohl |_+_| und |_+_| Methoden für Daten, wie unten:
alert('Hello my friend')'> Der obige Code teilt die Zeichenfolge durch Leerzeichen und setzt den ersten Teil als Vornamen und den zweiten Teil als Nachnamen, wenn Sie versuchen, Daten auf |_+_| . zu setzen aber beim Abrufen der Daten werden Vorname und Nachname verkettet.
Beobachter Eine allgemeinere Methode, um zu erkennen, wann sich Daten ändern, ist die Verwendung von Watchern.
alert('Hello my friend')'> Notiz : Beobachter manipulieren keine Daten, es sei denn, Sie möchten.
Bedingtes Rendering Ein bedingtes Rendering wird verwendet, wenn Sie Teile Ihrer Benutzeroberfläche gemäß einer oder mehreren Bedingungen anzeigen möchten.
Ihre Bedingungen können auch ein „sonst-wenn“ haben:
Vue ist intelligent und ersetzt nur die Teile, die sich unterscheiden.
Click on me if you can Durch die Verwendung von |_+_| Sie können Vue mitteilen, dass diese Felder völlig unterschiedlich sind und Sie sie neu rendern sollten:
let app = new Vue({ el: '#app', data: { myAttr: 'disabled' } }); Bedingtes Rendering der Anzeige umschalten Mit |_+_| Sie rendern das Element, verstecken es aber (setzen Sie die |_+_|-Eigenschaft auf |_+_|) wie folgt:
Hi Notiz : |_+_| unterstützt nicht die |_+_| -Element und funktioniert auch nicht mit |_+_|.
Notiz : |_+_| ist faul, was bedeutet, dass der Block mit der falschen Bedingung am Anfang nicht gerendert wird, andererseits |_+_| rendert tatsächlich, blendet den Block jedoch aus.
Listenrendering Das Rendern einer Datenliste ist fast wie das Schleifen in anderen Programmiersprachen.
Array-Rendering Es kommt oft vor, dass Sie ein Array durchlaufen und rendern möchten.
let app = new Vue({ el: '#app', data: { myEvent: 'click' } }); The best programming languages are: {{ programmingLanguages }}
Sie können auch ein zweites Argument übergeben, um auf den Index des aktuellen Elements zuzugreifen:
The best programming languages are: {{ programmingLanguages }}
git src refspec stimmt mit keiner überein
let app = new Vue({ el: '#app', data: { programmingLangauges: 'JavaScript, C#, PHP, Python, LALALA, HOHOHO' } computed: { worstProgrammingLanguages() { return this.programmingLangauges.split(', ').reverse().join(', '); } } }); Objektrendering Das Rendern von Objekten ist nicht schwieriger als das Rendern von Arrays:
set getSie können auch mit dem zweiten Argument auf den Namen der Eigenschaft zugreifen:
let app = new Vue({ el: '#app', data: { myFirstName: 'Adnan', myLastName: 'Babakan' } computed: { myFullName: { get(): { return this.myFirstName + ' ' + this.myLastName; }, set(v): { let parts = v.split(' '); this.myFirstName = parts[0]; this.myLastName = parts[1]; } } } }); myFullNameDer Zugriff auf den Index ist auch beim Iterieren um ein Objekt möglich:
let app = new Vue({ el: '#app', data: { myAge: 19 } watch: { myAge(v) { console.log('I'm now ' + v); } } }); Hello user Hi guest! Im Bereich iterieren Das Iterieren in einem Zahlenbereich ist auch ziemlich einfach:
Red like apple Blue like sky Hmmm.... Lifecycle-Haken Lifecycle-Hooks sind einfach einige Funktionen, die bei einem bestimmten Ereignis/Zeitpunkt während Ihrer Vue-Komponente ausgeführt werden.
Vor dem Erstellen von Hooks Wird sofort nach der Initialisierung der Instanz synchron aufgerufen, bevor die Datenbeobachtung und das Ereignis-/Beobachter-Setup durchgeführt werden.
Stichprobe:
Username Email Haken erstellt Wird synchron aufgerufen, nachdem die Instanz erstellt wurde. Zu diesem Zeitpunkt hat die Instanz die Verarbeitung der Optionen abgeschlossen, was bedeutet, dass Folgendes eingerichtet wurde: Datenbeobachtung, berechnete Eigenschaften, Methoden, Watch-/Event-Callbacks. Die Montagephase wurde jedoch noch nicht gestartet und die Eigenschaft $el wird noch nicht verfügbar sein.
Stichprobe:
keyVor der Montage des Hakens Wird kurz vor Beginn der Montage aufgerufen: Die Render-Funktion wird zum ersten Mal aufgerufen.
Notiz : Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.
Stichprobe:
Username Email Montierter Haken Wird aufgerufen, nachdem die Instanz gemountet wurde, wobei |_+_| wird durch das neu erstellte |_+_| ersetzt. Wenn die Root-Instanz an ein Element im Dokument gemountet ist, wird |_+_| wird auch im Dokument angezeigt, wenn mount aufgerufen wird.
Notiz : Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.
Stichprobe:
v-showVor dem Update-Hook Wird aufgerufen, wenn sich Daten ändern, bevor das DOM gepatcht wird. Dies ist ein guter Ort, um vor einem Update auf das vorhandene DOM zuzugreifen, z. um manuell hinzugefügte Ereignis-Listener zu entfernen.
Notiz : Dieser Hook wird beim serverseitigen Rendering nicht aufgerufen, da nur das anfängliche Rendering serverseitig ausgeführt wird.
Stichprobe:
displayAktualisierter Haken Wird nach einer Datenänderung aufgerufen, wird das virtuelle DOM neu gerendert und gepatcht.
Das DOM der Komponente wird aktualisiert, wenn dieser Hook aufgerufen wird, sodass Sie hier DOM-abhängige Operationen ausführen können. In den meisten Fällen sollten Sie jedoch vermeiden, den Zustand innerhalb des Hakens zu ändern. Um auf Zustandsänderungen zu reagieren, ist es normalerweise besser, stattdessen eine berechnete Eigenschaft oder einen Watcher zu verwenden.
Notiz : Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.
Stichprobe:
noneVor dem Zerstören des Hakens Wird direkt vor der Zerstörung einer Vue-Instanz aufgerufen. Zu diesem Zeitpunkt ist die Instanz noch voll funktionsfähig.
Notiz : Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.
Stichprobe:
Hello there! Zerstörter Haken Wird aufgerufen, nachdem eine Vue-Instanz zerstört wurde. Wenn dieser Hook aufgerufen wird, wurden alle Direktiven der Vue-Instanz ungebunden, alle Ereignis-Listener wurden entfernt und alle untergeordneten Vue-Instanzen wurden ebenfalls zerstört.
Notiz : Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.
Stichprobe:
v-showVeranstaltungen Ereignisse werden aufgerufen, wenn eine bestimmte Aktion für ein Element ausgeführt wird.
Im vorherigen Vue-Spickzettel habe ich sie wirklich grundlegend beschrieben. Hier werde ich weitere Aspekte von Ereignissen beschreiben.
Denken Sie daran, dass |_+_| ist eine kurze Hand von |_+_|.
Verfügbare Ereignisse Mit |_+_| Sie können auf alle JavaScript-Ereignisse zugreifen. Dies sind einige Beispiele:
Du kannst auch |_+_| Veranstaltung auf Formularen:
v-elseEreignismodifikatoren Ereignismodifikatoren werden verwendet, um ein Verhalten des Ereignisses zu ändern oder mehr Kontrolle darüber zu haben.
Modifikatoren werden gefolgt von einem |_+_| . hinzugefügt nach dem Event.
Das ist also die Struktur |_+_| oder |_+_|.
Modifikatoren können auch verkettet werden, um in der jeweiligen Reihenfolge ausgeführt zu werden, wie zum Beispiel: |_+_|
Bearbeiten beenden v-ifBearbeiten verhindern v-showAufnahme bearbeiten v-forEinmal bearbeiten Selbst bearbeiten var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }); Passive Bearbeitung {{ index }} - {{ item.message }} Tastenmodifikatoren Das Abhören des Tastaturereignisses ist einfach, aber das Erkennen der gedrückten Taste würde den Tastencode benötigen. Vue verfügt über einige Modifikatoren, um bei der Verwendung von Tastaturereignissen auf eine bestimmte Taste zu hören.
Diese Modifikatoren können mit allen Schlüsselereignissen wie |_+_| . verwendet werden oder |_+_|
Schlüsselmodifikator eingeben var example2 = new Vue({ el: '#example-2', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }); Tab-Tasten-Modifikator Schlüsselmodifikator löschen new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }); Esc-Tastenmodifikator Modifikator für die Leertaste new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }); Aufwärts-Tastenmodifikator {{ index }}. {{ name }}: {{ value }} Abwärts-Tastenmodifikator new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }); Rechtstastenmodifikator {{ n }} Links-Tasten-Modifikator let app = new Vue({ beforeCreate() { console.log('I'm not created yet'); } }); Home-Tasten-Modifikator let app = new Vue({ created() { console.log('I'm created'); } }); End-Down-Tastenmodifikator let app = new Vue({ beforeMount() { console.log('Let's begin!'); } }); Strg-Abwärts-Tastenmodifikator elAlt-Down-Tastenmodifikator vm.$elShift-down-Tastenmodifikator vm.$elMeta-Down-Key-Modifikator let app = new Vue({ mounted() { console.log('I'm ready!'); } }); Benutzerdefinierter Schlüsselcode Wenn Vue keinen Alias für den gewünschten Schlüssel bereitstellt, können Sie seinen Schlüsselcode wie folgt verwenden:
let app = new Vue({ beforeUpdate() { console.log('Your DOM is about to change. Be careful!'); } }); Der Tastencode 49 steht für die Nummer 1 oben auf der Tastatur. (Nicht der Nummernblock)
Tastenmodifikatoren-Kombination Sie können Schlüsselmodifikatoren verketten, um eine kombinierte Struktur wie folgt zu erstellen:
let app = new Vue({ updated() { console.log('Hello new DOM!'); } }); Genauer Schlüsselmodifikator Verwenden von |_+_| ermöglicht es Ihnen, die Schaltfläche zu erfassen, die Sie benötigen, und nichts anderes kann kombiniert werden.
Wenn Sie den folgenden Code verwenden, wenn Sie die Umschalttaste gedrückt halten und Strg drücken, wird normal reagiert:
let app = new Vue({ beforeDestroy() { console.log('Well it's the time I think...'); } }); Aber wenn Sie den folgenden Code verwenden, ist die einzige Taste, die gedrückt werden sollte, Strg:
let app = new Vue({ destroyed() { console.log('BOOOOM!'); } }); Komponenten Komponenten sind wiederverwendbare Vue-Instanzen, die verwendet werden, um Ihren Code zu vereinfachen und Ihren Code besser aufzuteilen.
Dies ist eine Vue-Komponente:
@Wie Sie können, sind seine Vorlage sowie die verwendeten Daten darin eingebettet und können in anderen Vue-Komponenten wie dieser verwendet werden:
v-on:Dadurch werden drei verschiedene Schaltflächen gerendert, die nichts miteinander zu tun haben. Jeder von ihnen funktioniert separat und jeder hat seine eigenen |_+_| Daten.
Wichtig : Beim Definieren einer Komponente wird |_+_| sollte eine Funktion sein, die ein Objekt zurückgibt, wenn nicht jede Instanz keine eigenen Daten hat und diese gemeinsam genutzt werden.
Einzeldateikomponente Eine einzelne Dateikomponente (oder SFC) ist eine Komponente, die sich in einer Datei befindet (heiliger Mist! Wirklich?).
Es hat eine sauberere Syntax und ist wie folgt:
v-onRegistrieren von Komponenten Durch die Registrierung von Komponenten können Sie diese in Ihren Vorlagen verwenden.
Globale Komponentenregistrierung Auf diese Weise ist Ihre Komponente in jeder Vue-Instanz verfügbar (falls Sie mehr als eine haben):
alert('Hello')'>Do it alert('Hello')'>Do it alert('Hello')'>Do it alert('Hello')'>Do it Instanzbezogene Registrierung Dadurch ist die Komponente nur in der angegebenen Vue-Instanz verfügbar:
submitLazy-Load-Komponentenregistrierung Diese Methode ist ziemlich cool, da Ihre Komponente nicht mit Ihrer Haupteintragsdatei gebündelt wird, sodass Ihre Website schneller geladen wird und nur die benötigten Komponenten benötigt werden.
alert('This form is submitted')'> Bonus-Tipp : Dies extrahiert Ihre Komponenten, die nach Zahlen von 0 usw. benannt sind. Wenn Sie Webpack verwenden, können Sie einen magischen Kommentar verwenden, um die Dateinamen Ihrer Komponenten wie folgt zu ändern:
.Komponentenstützen Komponenten können Requisiten haben, die sich buchstäblich wie die Attribute von HTML-Tags verhalten.
Indem Sie eine Komponente wie diese haben:
v-on:event.modifierSie können es so verwenden:
@event.modifier Notiz : Beim Definieren von Requisiten ist es besser, es mit camelCase zu definieren, aber wenn es verwendet wird, verwenden Sie es als Kebab-Case. Es ist zwar möglich, kebab-case-definierte Requisiten als camelCase in Vue zu verwenden, aber IDEs könnten darüber verwirrt werden.
Ihre einzelnen Dateikomponenten können auch Requisiten haben:
@event.modifier-one.modifier-twoKomponentensteckplätze Slots werden verwendet, um andere Elemente oder Komponenten in eine Komponente einzubetten.
Einfacher Steckplatz Ein einfacher Slot ist ein unbenannter Slot und wird wie unten in einer Vorlage verwendet:
Nach dem Definieren der obigen Vorlage unter der Annahme, dass der Komponentenname |_+_| . ist und |_+_| ist eine Requisite, Sie können sie wie folgt verwenden:
Wie Sie sehen, haben wir in unseren Komponenten einen Text, der anstelle von |_+_| eingefügt wird.
Benannte Slots Benannte Slots unterscheiden sich ein wenig von unbenannten.
Durch die Definition einer Komponente namens |_+_| so was:
... Sie können es so verwenden:
Scoped Slots Ein Slot kann Zugriff auf seine Eltern-Requisite haben, um so etwas zu vermeiden (falls erforderlich), können Sie eine Slot-Requisite wie folgt definieren:
... Und bei Verwendung:
... Dieser Slot verwendet die |_+_| in der Komponente verfügbar ist und nicht diejenige, die in der übergeordneten Komponente verfügbar ist.
Mixins Um es einfach zu machen, sind Mixins nur Teile Ihrer Komponente, die in einer separaten Datei gespeichert werden, damit sie in anderen Komponenten wieder verwendet werden können.
Ein Mixin kann so aussehen:
keydownWie Sie sehen, hat dies ein |_+_| Hook und eine Methode namens |_+_| Jetzt kann diese Mischung in einer Komponente verwendet werden, wie unten:
keyupDies funktioniert also so, als ob Sie diese Hooks und Methoden in dieser Komponente geschrieben hätten.
Mixin-Option zusammenführen Im Falle von Konflikten zwischen den selbst zugewiesenen Eigenschaften oder Methoden einer Komponente und den Mixins hat die Komponente selbst Priorität, siehe dies:
alert('Hey there!')'> Die Art und Weise, wie Vue das Überschreiben handhabt, kann geändert werden, aber wir werden dies im anderen Spickzettel behandeln.
Globale Mixins Ein globales Mixin unterscheidet sich nicht von einem normalen Mixin, sondern von seinem Zugehörigkeitsbereich, der alle erstellten Vue-Instanzen umfasst.
alert('Hey there!')'> Die Methode |_+_| wird für jede Komponente und Vue-Instanz im obigen Code verfügbar sein.
Benutzerdefinierte Anweisungen Wie Sie wissen, behandelt Vue DOM mit Direktiven. Zum Beispiel |_+_| oder |_+_| sind Richtlinien.
Um eine Direktive zu definieren, können Sie wie folgt vorgehen:
alert('Hey there!')'> Die |_+_| Direktive wird als |_+_| . verfügbar sein und kann so verwendet werden:
alert('Hey there!')'> Die Eingabe wird also fokussiert, sobald die Komponente gerendert wird.
Benutzerdefinierte globale Direktiven Damit Ihre benutzerdefinierten Direktiven in Ihrer Vue-Instanz und global verfügbar sind, können Sie sie wie folgt definieren:
alert('Hey there!')'> Filter Filter werden einfach verwendet, um einen Wert zu ändern und zurückzugeben.
Um einen Filter in einer Komponente zu definieren, können Sie wie folgt vorgehen:
alert('Hey there!')'> Dann kann der Großschreibungsfilter wie folgt verwendet werden:
alert('Hey there!')'> Oder in einer V-Bindung wie folgt:
alert('Hey there!')'> Globale Filter Globale Filter unterscheiden sich nicht von normalen Filtern, werden jedoch einmal definiert und können in jeder Vue-Instanz oder -Komponente verwendet werden.
alert('Hey there!')'> Router Der Vue-Router wird verwendet, um ein Routing-System auf der Client-Seite mit Vue zu entwerfen.
Erste Schritte mit Router Um den Router verwenden zu können, müssen Sie ihn installieren. Dies sind Schritte:
Router-Installation Es wird empfohlen, es mit npm zu installieren:
alert('Hey there!')'> Es kann auch installiert werden, indem die Datei eingeschlossen wird:
alert('Hey there!')'> Nach der Installation ist es an der Zeit, Vue anzuweisen, den Router zu verwenden. Dazu können Sie wie folgt vorgehen:
alert('Hey there!')'> Ihre an Routen gebundenen Komponenten sollten irgendwo auf Ihrer Seite gerendert werden. Dies wird wie folgt deklariert:
alert('Hey there!')'> Routen definieren Jede Route hat ihre eigene eindeutige Komponentengrenze. Sie können Ihre Routen wie folgt definieren:
alert('Hey there!')'> Wenn Sie möchten, dass Sie die Routen in den Verlauf des Browsers des Benutzers verschieben, sollten Sie den Verlaufsmodus wie folgt aktivieren:
alert('Hey there!')'> Hängen Sie dann Ihre Routen an Ihre Ansichtsinstanz an:
alert('Hey there!')'> Notiz : Wenn Sie den Verlaufsmodus verwenden, um alle Ihre Anfragen an Ihr |_+_| . umzuleiten Damit sich Vue um den Rest kümmern kann, sollten Sie Ihren Webserver konfigurieren. Es sei denn, durch Aktualisieren des Browsers auf einer Seite wird 404 zurückgegeben, da diese Seite tatsächlich nicht auf dem Server vorhanden ist.
Router-Links Router-Links sind etwas Besonderes, da sie die Seite nicht aktualisieren, sondern nur die benötigte Komponente abrufen (und die URL im Verlaufsmodus in den Verlauf übertragen), sodass es wie eine neue Seite aussieht.
Anstelle eines Hyperlinks (|_+_|-Tag) sollten Sie |_+_| . verwenden wie nachstehend:
alert('Hey there!')'> Fortgeschrittenes Routing Vue Router geht über nur wenige einfache Routen hinaus und bietet einige großartige Möglichkeiten zur Handhabung von Routen.
Dynamische Routen Dynamische Routen werden verwendet, um eine Reihe von Routen mit einigen zu erfassenden Parametern abzugleichen.
Eine dynamische Route wird wie eine normale Route definiert, jedoch mit einem Doppelpunkt am Anfang des/der dynamischen Segments(e):
exactNun durch die Route vor allem von Links wie |_+_|, |_+_| oder |_+_| ist gültig.
Die |_+_| kann in der Routenkomponente wie folgt aufgerufen werden:
alert('Hey there!')'> Reagieren auf Parameteränderungen dynamischer Routen Betrachten wir das obige Beispiel. Wenn der Benutzer von |_+_| . wechselt nach |_+_| Vue zerstört die vorherige Instanz nicht, da es sich bereits um dieselbe Komponente handelt, die erneut gerendert wird, daher werden die Lifecycle-Hooks nicht aufgerufen, um auf Parameteränderungen zu reagieren. Sie können die |_+_| . sehen Objekt wie
alert('Hey there!')'> 404-Route Jede Website braucht eine gute 404-Route. In einem Vue Router können wir ein Sternchen |_+_| . definieren route am Ende, damit es alles abfängt, was nicht definiert ist.
Warnung : Die Sternchenroute sollte am Ende und nach jeder anderen Route definiert werden. Es sei denn, es passt zu allem anderen und ruiniert Ihr Routing-System.
Sehen Sie sich dazu den folgenden Code an:
Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.' }) Asterisk-Routen Sternchen können verwendet werden, um eine andere Art von dynamischen Routen abzugleichen. Eine dynamische Route kann nur den dynamischen Segmenten zwischen zwei Schrägstrichen entsprechen |_+_| aber asterisk kann darüber hinaus.
css anime einblenden
Schauen Sie sich die Route unten an:
Also nach der Route oben Routen wie |_+_| und |_+_| gerendert werden kann.
Mit der Route unter dem |_+_| hat eine Eigenschaft namens |_+_| der den Teil enthält, der mit dem Sternchen übereinstimmt.
Benannte Routen Benannte Routen werden verwendet, um mit ihrem kürzeren Namen auf lange Routenmuster zuzugreifen.
Stellen Sie sich vor, Sie haben ein Muster wie dieses:
countSie können einen Namen dafür wie folgt definieren:
dataJetzt können Ihre Links so aussehen:
export default { }; An Stelle von:
import Vue from 'vue'; Vue.component('my-component', require('/path/to/your/component')); Notiz : Beim Übergeben eines Objekts an |_+_| Attribut sollten Sie es binden.
Benannte Routen mit Parametern Einige Routen können Parameter haben, wie wir oben einige Beispiele hatten. Sie können auch einen Namen für sie definieren.
Zum Beispiel für die folgende Route:
import Vue from 'vue'; const myComponent = require('/path/to/your/component'); let app = new Vue({ components: { myComponent } }); Den kannst du haben:
import Vue from 'vue'; const myComponent = () => import('./components/myComponent '); let app = new Vue({ components: { myComponent } }); Und um einen Link dafür zu erstellen, können Sie den folgenden Code haben:
import Vue from 'vue'; const myComponent = () => import(/* webpackChunkName: 'myComponent' */ './components/myComponent '); let app = new Vue({ components: { myComponent } }); Programmatische Navigation Wie Sie zuvor in diesem Spickzettel gelesen haben, können Sie mit |_+_| . einen Router-Link erstellen aber was ist, wenn Sie den Benutzer programmgesteuert umleiten müssen? Nun, Sie können das mit diesem Code tun:
Vue.component('blog-post', { props: ['postTitle'], template: '{{ postTitle }} ' }) Dieser Code leitet Ihren Benutzer zu |_+_| weiter. Dies wird insbesondere in einer Bedingung oder anderen Situationen wie der Umleitung nach dem Login verwendet.
Programmatische benannte Navigation Sie können auch |_+_| . verwenden für benannte Routen wie diese:
Programmatische Navigation mit Parametern Auch |_+_| kann zum Umleiten mit Parametern verwendet werden, wie folgt:
export default { props: ['myProp']; }; Routenumleitung Routen können so definiert werden, dass sie zueinander umgeleitet werden. So was:
Umleitung mit dem Namen Route Eine Route kann auch wie folgt auf eine benannte Route umgeleitet werden:
navigation-linkDynamische Routenumleitung Eine Route kann mit einer Funktion zur Auswertung des Ziels umgeleitet werden, wie folgt:
urlRoutenumleitung mit Parametern Wenn die Zielroute einen Parameter hat, kann dieser auch an das Ziel übergeben werden:
Your profile Routenalias Ein Routenalias bedeutet, dass eine Route mehrere Adressen haben kann, von denen aus zugegriffen werden kann.
Zum Beispiel:
Jetzt die Route |_+_| kann als |_+_| . aufgerufen werden sowie.
Eine Route kann auch mehrere Aliase haben:
base-layoutErneutes Rendern erzwingen In einigen Fällen ist es notwendig, Vue zu erzwingen, um Ihre Komponente neu zu rendern, da einige Änderungen nicht verfolgt werden.
Es gibt einige Möglichkeiten, dies zu tun, z. B. die Verwendung von |_+_| hacken, aber der richtige Weg ist die Verwendung von |_+_| Methode:
Denken Sie daran, dass |_+_| ist erforderlich, um diese Methode in Ihrer Vue-Instanz zu verwenden.
Verschachtelte Daten ansehen Manchmal müssen Sie möglicherweise einige verschachtelte Daten anzeigen, die Sie mithilfe der Punktnotation tun können:
A paragraph for the main content.
And another one.
Here's some contact info
Der obige Code ist, wenn Sie wissen, welche Eigenschaft in Ihrem Objekt Sie beobachten müssen!
{{ user.lastName }} Sie können Ihre Uhr nicht sofort als Funktion definieren, sondern als Objekt, dann mit dem |_+_| Schlüssel und der Wert |_+_| Beobachten Sie Ihr Objekt und fügen Sie in eine Funktion namens |_+_| ein, was ausgelöst werden soll, wenn die Daten geändert wurden.
Benutzerdefinierte Komponenten mit V-Modell-Unterstützung Wie Sie wissen |_+_| wird verwendet, um eine bidirektionale Bindung mit einem Eingabeelement/einer Komponente und einer Dateneigenschaft herzustellen.
Wenn Sie eine benutzerdefinierte Komponente erstellen und möchten, dass sie |_+_| . unterstützt du kannst die |_+_| . ausgeben Schlüsselwort und um zu erhalten, was zunächst mit dem |_+_| . an Ihre Komponente übergeben wird Sie brauchen nur eine Requisite namens |_+_|.
Für ein leichteres Verständnis überprüfen Sie den folgenden Code:
{{ slotProps.user.firstName }} Diese einfache Komponente bindet die an sie übergebenen Daten in zwei Richtungen.
Notiz : Wie Sie sehen können, habe ich die Requisite namens |_+_| . zugewiesen zu Daten namens |_+_| und in meiner Eingabe verwendet, denken Sie vielleicht, dass ich die Requisite direkt an meine Eingabe übergeben könnte, aber wie Vue vorschlägt, ist es besser, Requisiten nicht direkt zu ändern.
Funktionskomponente Stellen Sie sich vor, Sie hätten eine Komponente ohne Überwachung oder berechnete Eigenschaft und ohne Methoden! Sie würden es nur verwenden, um einige andere Komponenten als eine mit einigen Requisiten zu rendern. Wenn ja, warum dann Vues Zeit verschwenden, wenn es keine Lebenszyklusmethoden gibt?
Eine funktionale Komponente kann wie folgt definiert werden:
user Notiz : Denken Sie daran, dass es kein |_+_| . gibt Kontext in diesen Komponenten, da es sich um eine funktionale Komponente handelt!
#vuejs #javascript #webdev