Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue

Ich habe in letzter Zeit Lust, mit Vue3.0 herumzuspielen, und es fühlt sich großartig an. Also habe ich diese Probleme von Vue2.0 schnell abgeschlossen und einige Sachen für 3.0 geschrieben.
Dieser Artikel listet und analysiert hauptsächlich einige APIs auf, von denen ich persönlich denke, dass sie häufig verwendet werden oder großartige Einsatzmöglichkeiten haben, sowie Notizen und Diskussionen zur Selbstzusammenfassung.

nächstesTick

Funktion:

Fügen Sie einen verzögerten Rückruf hinzu, nachdem der nächste Dom-Aktualisierungszyklus endet. Nach dem Ändern der Daten können Sie den aktualisierten Dom abrufen.
Verwendung:

Vue.nextTick( [Rückruf, Kontext] )
vm.$nextTick( [Rückruf] )
// Verwendung 2
// Als Promise verwenden (neu seit 2.1.0)
Vue.nextTick()
 .dann(Funktion () {
  // DOM aktualisiert})

veranschaulichen:

Rückruf: verzögerte Rückruffunktion
Kontext: optionales Objekt
ps: Neu seit 2.1.0: Wenn kein Rückruf bereitgestellt wird und sich die Umgebung in einer Umgebung befindet, die Promise unterstützt, wird ein Promise zurückgegeben. Bitte beachten Sie, dass Vue nicht mit einem Polyfill für Promise geliefert wird. Wenn Ihre Zielbrowser Promise also nicht nativ unterstützen (z. B.: „Warum starrt ihr alle auf mich?“), müssen Sie das Polyfill selbst bereitstellen.

Erweiterungen:

In Bezug auf den Ausführungsmechanismus und die Verwendungsszenarien von nextTick müssen wir auch ähnliche requestAnimationFrame () und process.nextTick () beherrschen. Ersteres ist ein integrierter Listener für den Browser (wird vor dem nächsten Neuzeichnen ausgeführt), und letzteres wird zum nächsten Ereignisabfragezeitpunkt in der Knotenumgebung ausgeführt.

Mixins

Funktion:

Registriert einen Mixin, der sich auf jede nach der Registrierung erstellte Vue-Instanz auswirkt. Plugin-Autoren können Mixins verwenden, um Komponenten benutzerdefiniertes Verhalten hinzuzufügen.
Verwendung:

// Fügen Sie einen Handler für die benutzerdefinierte Option „myOption“ ein.
Vue.mixin({
 erstellt: Funktion () {
  var meineOption = this.$options.meineOption
  if (meineOption) {
   console.log(meineOption)
  }
 }
})

neuer Vue({
 meineOption: 'Hallo!'
})
// => "Hallo!"

veranschaulichen:

Objekt: ein VM-Attribut oder eine Methode
PS: Bitte verwenden Sie globale Mixins mit Vorsicht, da diese sich auf jede separat erstellte Vue-Instanz (einschließlich Komponenten von Drittanbietern) auswirken. In den meisten Fällen sollte dies nur für benutzerdefinierte Optionen verwendet werden, wie im obigen Beispiel. Es wird empfohlen, es als Plugin zu veröffentlichen, um eine Duplizierung des Mixins zu vermeiden.

$forceUpdate

Funktion:

Erzwingt ein erneutes Rendern der Vue-Instanz.
Verwendung:

vm.$forceUpdate()

setzen, löschen

Funktion:

Legen Sie die Eigenschaften responsiver Daten fest und löschen Sie sie, und lösen Sie Ansichtsaktualisierungen aus.
Verwendung:

// Verwendung 1
Vue.set(Ziel, Schlüssel, Wert)
Vue.delete(Ziel, Schlüssel)
// Verwendung 2
vm.$set(Ziel, Schlüssel, Wert)
vm.$delete(Ziel, Schlüssel)

veranschaulichen:

Ziel: Zielobjekt
Schlüssel: der Name des hinzuzufügenden Attributs
Wert: der hinzuzufügende Attributwert
ps: Das Hauptnutzungsszenario kann die Einschränkung vermeiden, dass Vue nicht erkennen kann, dass die Eigenschaft gelöscht wurde

Filter

Funktion:

Wird für einige allgemeine Textformatierungen und einige Standarddatenzuordnungen verwendet.
Verwendung:

<!-- in doppelten geschweiften Klammern -->
{{ Nachricht | Großschreibung }}

<!-- In `v-bind` -->
<div v-bind:id="rawId | formatId"></div>

// Filter registrieren: {
 Großschreibung: Funktion (Wert) {
  wenn (!Wert) return ''
  Wert = Wert.toString()
  Rückgabewert.charAt(0).toUpperCase() + Wert.slice(1)
 }
}

// Globale Registrierung Vue.filter('capitalize', function (value) {
 wenn (!Wert) return ''
 Wert = Wert.toString()
 Rückgabewert.charAt(0).toUpperCase() + Wert.slice(1)
})

neuer Vue({
 // ...
})

veranschaulichen:

Filterfunktionen erhalten immer den Wert des Ausdrucks (das Ergebnis der vorherigen Operatorkette) als erstes Argument.
Filter sollten am Ende eines JavaScript-Ausdrucks hinzugefügt werden, gekennzeichnet durch das „Pipe“-Symbol.

ps: Ein Filter kann mehrere Parameter akzeptieren, wie z. B. {{ message | filterA('arg1', arg2) }}. Hier wird filterA als Filterfunktion definiert, die drei Parameter empfängt. Der Wert der Nachricht ist der erste Parameter, die normale Zeichenfolge „arg1“ ist der zweite Parameter und der Wert des Ausdrucks arg2 ist der dritte Parameter.

Richtlinie

Funktion:

Wird zum Registrieren benutzerdefinierter Anweisungen verwendet.

Verwendung:

<!-- Wenn die Seite geladen wird, erhält dieses Element den Fokus --> 
<Eingabe V-Fokus>

// Registriere eine globale benutzerdefinierte Direktive `v-focus`
Vue.direktive('Fokus', {
 // Wenn das gebundene Element in das DOM eingefügt wird ...
 eingefügt: Funktion (el) {
  // Fokuselement el.focus()
 }
})

// Registrieren Sie eine lokale Direktive. Die Komponente akzeptiert auch eine Direktivenoption direktiven: {
 Fokus:
  // Definition der Anweisung eingefügt: function (el) {
   el.fokus()
  }
 }
}

veranschaulichen:

eingefügt ist nur eine der Interpolationsfunktionen der Registrierungsanweisung. Die vollständigen Registrierungsattribute können außerdem Folgendes umfassen:
binden: Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird, wo Sie ein einmaliges Initialisierungs-Setup durchführen können.
eingefügt: wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (es wird nur garantiert, dass der übergeordnete Knoten existiert, er wurde aber nicht notwendigerweise in das Dokument eingefügt).
update: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird. Dies kann jedoch geschehen, bevor die untergeordneten VNodes aktualisiert werden. Der Wert der Direktive kann sich geändert haben oder nicht, aber unnötige Vorlagenaktualisierungen können ignoriert werden, indem die Werte vor und nach der Aktualisierung verglichen werden.
componentUpdated: Wird aufgerufen, nachdem der VNode der Komponente, in dem sich die Anweisung befindet, und alle seine untergeordneten VNodes aktualisiert wurden.
unbind: Wird nur einmal aufgerufen, wenn die Direktive vom Element getrennt wird.

Vue.directive('meine-direktive', {
 binden: Funktion () {},
 eingefügt: Funktion () {},
 Aktualisierung: Funktion () {},
 Komponente aktualisiert: Funktion () {},
 lösen: Funktion () {}
})

Andere einfache allgemeine Eigenschaften und Methoden

// Konsole.log(vm.$root); 
vm.$root //Instanzobjekt vm.$el //Stammelement (echtes DOM-Element)
// konsole.log(vm.$el);

vm.$el.innerHTML //Holen Sie sich den Inhalt des Stammelements (echtes DOM-Element) // console.log(vm.$el.innerHTML);

vm.$data //Datenobjekt unter der Instanz// console.log(vm.$data);

vm.$options //Elemente unter der Instanz mounten// console.log(vm.$options);

vm.$props //Daten für die Kommunikation zwischen Komponenten// console.log(vm.$props);

vm.$parent //In einer Komponente bezieht es sich auf das übergeordnete Element // console.log(vm.$parent);

vm.$children //Bezieht sich in einer Komponente auf untergeordnete Elemente // console.log(vm.$children);

vm.$attrs //Wird verwendet, um alle von der übergeordneten Komponente übergebenen Attribute abzurufen // console.log(vm.$attrs);

vm.$listeners //Wird verwendet, um alle von der übergeordneten Komponente übergebenen Methoden abzurufen // console.log(vm.$listeners);

vm.$slots //Slots in Komponente// console.log(vm.$slots);

vm.$scopedSlots //Wird für den Zugriff auf bereichsbezogene Slots verwendet // console.log(vm.$scopedSlots);

vm.$refs //Wird zum Auffinden von DOM-Elementen verwendet (mithilfe von „ref“ zur Nachverfolgung)
// Konsole.log(vm.$refs);

vm.$watch // Wird zum Überwachen von Daten verwendet (wird nach der Verwendung in der Vue-Datei automatisch zerstört)
// Konsole.log(vm.$watch);

vm.$emit //Wird zum Versenden von Ereignissen verwendet (üblicherweise für die Datenkommunikation verwendet)
// Konsole.log(vm.$emit);

vm.$on //Wird zur Überwachung der Ereignisverteilung verwendet// console.log(vm.$on);

vm.$once //Nur einmal auf das Ereignis hören (danach nicht mehr hören)
// konsole.log(vm.$once);

//Lebenszyklus beforeCreate() {
}
erstellt() {
}
vorMount() {
}
montiert() {
}
vorUpdate() {
}
aktualisiert() {
}
vorZerstören() {
}
zerstört() {
}

Zusammenfassen

Dieser Artikel behandelt hauptsächlich mehrere häufig verwendete APIs in Vue. Wenn Sie mehr erfahren möchten, können Sie die offizielle Website besuchen. Ich hoffe, dieser Artikel ist für Sie nützlich und lässt sich geschickt in der tatsächlichen Projektentwicklung anwenden.

Zum leichteren Lesen und Verstehen wurde der Code dieses Artikels auf Github hochgeladen

Wenn der Artikel Fehler enthält, weisen Sie bitte im Kommentarbereich darauf hin. Wenn es hilft, liken und folgen Sie bitte.

Oben finden Sie eine detaillierte Zusammenfassung der häufig verwendeten und erweiterten APIs von Vue. Weitere Informationen zu den häufig verwendeten und erweiterten APIs von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!