Alles, was Sie über Vue.js-Spickzettel wissen müssen

Blog

Alles, was Sie über Vue.js-Spickzettel wissen müssen

Alles, was Sie über Vue.js-Spickzettel wissen müssen

Inhaltsverzeichnis

  • Interpolationen
    • Einfache Interpolation
    • Interpolation mit Ausdruck
      • Einfache Ausdrucksinterpolation
      • Interpolation des ternären Operatorausdrucks
    • Raw-HTML-Interpolation
  • Bindung
    • Einfache Bindung
    • Bindung mit Konkat
    • Bedingte Bindung
  • Zwei-Wege-Datenbindung
  • Veranstaltungen
  • Dynamische Argumente
    • Dynamische Argumente nach Objekt
  • Berechnete Eigenschaften
  • Beobachter
  • Bedingtes Rendering
    • Bedingtes Rendering der Anzeige umschalten
  • Listenrendering
    • Array-Rendering
    • Objektrendering
    • Im Bereich iterieren
  • Lifecycle-Haken
    • Vor dem Erstellen von Hooks
    • Haken erstellt
    • Vor der Montage des Hakens
    • Montierter Haken
    • Vor dem Update-Hook
    • Aktualisierter Haken
    • Vor dem Zerstören des Hakens
    • Zerstörter Haken
  • Veranstaltungen
    • Verfügbare Ereignisse
    • Ereignismodifikatoren
      • Bearbeiten beenden
      • Bearbeiten verhindern
      • Aufnahme bearbeiten
      • Einmal bearbeiten
      • Selbst bearbeiten
      • Passive Bearbeitung
    • Tastenmodifikatoren
      • Schlüsselmodifikator eingeben
      • Tab-Tasten-Modifikator
      • Schlüsselmodifikator löschen
      • Esc-Tastenmodifikator
      • Modifikator für die Leertaste
      • Aufwärts-Tastenmodifikator
      • Abwärts-Tastenmodifikator
      • Rechtstastenmodifikator
      • Links-Tasten-Modifikator
      • Home-Tasten-Modifikator
      • Endschlüssel-Modifikator
      • Strg-Tastenmodifikator
      • Alt-Taste bearbeiten
      • Umschalttaste Modifikator
      • Metaschlüssel bearbeiten
      • Benutzerdefinierter Tastenmodifikator
    • Tastenmodifikatoren-Kombination
    • Genauer Schlüsselmodifikator
  • Komponenten
    • Einzeldateikomponente
    • Registrieren von Komponenten
      • Globale Komponentenregistrierung
      • Instanzbezogene Komponentenregistrierung
      • Lazy-Load-Komponentenregistrierung
    • Komponentenstützen
    • Komponentensteckplätze
      • Einfacher Steckplatz
      • Benannte Slots
      • Scoped Slots
  • Mixins
    • Mixin-Option zusammenführen
    • Globale Mixins
  • Benutzerdefinierte Anweisungen
    • Benutzerdefinierte globale Direktiven
  • Filter
    • Globale Filter
  • Router
    • Erste Schritte mit Router
      • Router-Installation
      • Routen definieren
    • Router-Links
    • Fortgeschrittenes Routing
      • Dynamische Routen
        • Reagieren auf Parameteränderungen von dynamischen Routen
      • 404-Route
      • Asterisk-Routen
    • Benannte Routen
      • Benannte Routen mit Parametern
    • Programmatische Navigation
      • Programmatische benannte Navigation
      • Programmatische Navigation mit Parametern
    • Routenumleitung
      • Umleitung mit dem Namen Route
      • Dynamische Routenumleitung
      • Routenumleitung mit Parametern
    • Routenalias
  • Erneutes Rendern erzwingen
  • Verschachtelte Daten ansehen
  • Benutzerdefinierte Komponenten mit V-Modell-Unterstützung
  • Funktionskomponente

Interpolationen

Interpolation bedeutet, Ihre Daten zu platzieren oder zu rendern, was mit der Double-Mustache-Syntax von Vue sehr einfach möglich ist.



Einfache Interpolation

Durch die Verwendung der Doppelschnurrbart-Syntax können Sie Ihre Daten rendern:

My name is: {{ myName }}

Interpolation mit Ausdruck

Interpolationen können in Vue einfache Ausdrücke enthalten.



Einfache Ausdrucksinterpolation

Sie können auch JavaScript-Ausdrücke in doppelten Schnurrbärten verwenden:

I'm {{ myAge + 5 }} years old!

Sie können auch Methoden verwenden, um Ihre Daten zu bearbeiten und eine zu rendernde Zeichenfolge oder Ganzzahl zurückzugeben:



My pets' names are {{ myPets.join(', ') }}

Interpolation des ternären Operatorausdrucks

Sie können auch den ternären Operator verwenden, um ein einfaches bedingtes Rendering zu erhalten:

I'm a {{ myAge > 50 ? 'kinda old' : 'young' }}!

Notiz :

  • Sie können nur einen Ausdruck innerhalb von Doppelschnurrbärten verwenden
  • Ein Ausdruck ist anders als eine Anweisung. Zum Beispiel funktioniert der folgende Code nicht, weil er kein Ausdruck ist, sondern eine Anweisung:
{{ let msg = 'Hello World!'; }}
  • Die Flusskontrolle wird in Doppelschnurrbärten nicht unterstützt:
{{ if(true) { return 'Yes!' } }}

Raw-HTML-Interpolation

Wenn Sie Ihre Daten nicht entkommen und als echtes HTML rendern möchten, verwenden Sie das |_+_| Direktive:

v-html

Warnung : Das Rendern von HTML kann riskant sein, da es zu XSS-Angriffen auf Ihre Website führen kann.

Bindung

Bindung bedeutet, dass Ihre Daten in den Attributen Ihres Tags verwendet werden.

Einfache Bindung

Etwas Falsches, das neue Vue-Entwickler versuchen, ist, Daten in ein Attribut wie dieses einzufügen:

Aber das ist falsch und Sie müssen es tatsächlich binden:

Es gibt eine kürzere Art der Bindung, nämlich das Weglassen von |_+_| Direktive, wie unten:

Bindung mit Konkat

Was also, wenn Sie beim Binden einige Zeichenfolgen mit Ihren Daten kombinieren möchten? Verwenden Sie Ihre Zeichenfolge in Anführungszeichen und verketten Sie sie wie gewohnt:

v-bind

Dies kann wirklich nützlich sein, wenn Sie es in Hyperlinks verwenden:

Das obige Beispiel ist ein gutes Beispiel für einen Link zum Beitrag mit der Basis-URL und dem |_+_| Suffix und dann die Post-ID.

Bedingte Bindung

Sie können Bindungen verwenden, um bedingt etwas zu tun.

Für die Attribute, die keinen Wert wie |_+_| . haben oder |_+_| Wenn Ihre gebundenen Daten true zurückgeben, wird das Attribut hinzugefügt und wenn false zurückgegeben wird, wird das Attribut dem Element nicht hinzugefügt.

Sie können auch Ausdrücke verwenden, die einen booleschen Wert zurückgeben:

Read more

Sie können ein Objekt innerhalb des Klassenattributs verwenden, um die angegebene Klasse zu binden, wenn die Bedingung erfüllt ist:

post

Im obigen Beispiel |_+_| Klasse wird zu unserem |_+_| . hinzugefügt aber nicht rot.
Sie können auch Vergleichs- und logische Operatoren verwenden:

disabled

Zwei-Wege-Datenbindung

Mit dem |_+_| -Anweisung können Sie eine bidirektionale Datenbindung erstellen. Das heißt, der Benutzer kann die Daten über eine Eingabe ändern und bei Bedarf gleichzeitig das Ergebnis sehen.

required

Die |_+_| -Direktive kann mit fast jedem Eingabetyp arbeiten.

Veranstaltungen

Ereignisse werden aufgerufen, wenn eine bestimmte Aktion für ein Element ausgeführt wird.
Ereignisse werden mit |_+_| . deklariert Richtlinie.