Zwei-Wege-Bindung und allgemeine Anweisungen für Vue.js-Daten

Zwei-Wege-Bindung von Daten (ES6-Schreibmethode)

Wirkung:

Wenn der Wert im Eingabefeld nicht geändert wird:

Beim Löschen des Werts im Eingabefeld:

Geben Sie nach Doudou den an {{testData.name}} gebundenen Wert erneut ein Die Spanne auf der Seite folgt den Eingabeänderungen, wenn sich der Boxwert ändert.

In Vue.js können Sie die V-Model-Direktive verwenden, um eine bidirektionale Datenbindung zu erstellen auf Formularelementen. Und die V-Model-Direktive kann nur für drei Tags verwendet werden: , , .

<template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model=&#39;testData.name&#39; class="form-control">
   <span class="control-span">姓名变为:{{testData.name}}</span>
  </div>
 </div>
</div>
</template>
 
 
<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</script>

Vue.js-Komponenten können als ViewModel-Klassen mit vordefiniertem Verhalten verstanden werden. Eine Komponente kann viele Optionen vordefinieren, die wichtigsten sind jedoch die folgenden:

Vorlage (Vorlage): Die Vorlage deklariert die Zuordnungsbeziehung zwischen den Daten und dem DOM, die letztendlich dem Benutzer angezeigt wird.
Komponenten registrieren: Nach der Registrierung können Sie eine untergeordnete Komponente in Form eines benutzerdefinierten Elements in der Vorlage für die übergeordnete Komponente aufrufen.
Anfangsdaten (Daten): der anfängliche Datenzustand einer Komponente. Bei wiederverwendbaren Komponenten ist dies normalerweise der private Status.
Akzeptierte externe Parameter (Requisiten): Daten werden über Parameter übertragen und zwischen Komponenten geteilt. Parameter sind standardmäßig unidirektional (von oben nach unten) gebunden, können aber auch explizit bidirektional deklariert werden.
Methoden: Änderungsvorgänge an Daten werden im Allgemeinen innerhalb der Methoden von Komponenten durchgeführt. Benutzereingabeereignisse und Komponentenmethoden können über die v-on-Direktive gebunden werden.
Lebenszyklus-Hooks: Eine Komponente löst mehrere Lifecycle-Hook-Funktionen aus, z. B. erstellt, angehängt, zerstört usw. In diesen Hook-Funktionen können wir eine benutzerdefinierte Logik einkapseln. Im Vergleich zu herkömmlichem MVC ist es verständlich, dass die Logik des Controllers auf diese Hook-Funktionen verteilt ist.
Private Ressourcen (Assets): In Vue.js werden benutzerdefinierte Anweisungen, Filter, Komponenten usw. zusammenfassend als Ressourcen bezeichnet. Da global registrierte Ressourcen leicht zu Namenskonflikten führen können, kann eine Komponente ihre eigenen privaten Ressourcen deklarieren. Private Ressourcen können nur von der Komponente und ihren Unterkomponenten aufgerufen werden.

Allgemeine Anweisungen:

Die sogenannten Anweisungen sind eigentlich spezielle Tags, die in der Vorlage erscheinen. Anhand dieser Tags weiß das Framework, welche Vorgänge im DOM ausgeführt werden müssen Elemente hier.

Allgemeine Befehle:

v-if-Befehl

v-show-Befehl

v-else-Befehl

v-for-Befehl

v-bind-Direktive

v-on-Direktive

v-if-Direktive:

v-if rendert Elemente basierend auf der wahren oder falschen Bedingung der Wert eines Ausdrucks. Das Element und seine Datenbindungen/Komponenten werden beim Wechsel zerstört und neu erstellt. Wenn das Element