Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten

Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten

1. Vergleich mit Vue2

1. Neue Funktionen von Vue3

  • Neuimplementierung der Datenantwort ( ES6 proxy ersetzt Object.defineProperty von Es5 )
  • Der Quellcode wird mit ts neu geschrieben, mit besserer Typinferenz
  • Neuer Virtual DOM -Algorithmus (schneller, kleiner)
  • Bietet composition api für eine bessere Wiederverwendung der Logik und Code-Organisation
  • Benutzerdefinierter Renderer ( app , Miniprogramm, Spieleentwicklung)
  • Fragment , Vorlagen können mehrere Stammelemente haben

2. Vergleich der Antwortprinzipien zwischen Vue2 und Vue3

Vue2 verwendet die Methode Object.defineProperty um reaktionsfähige Daten zu implementieren

Mangel:

  • Dynamisches Hinzufügen und Entfernen von Objekteigenschaften kann nicht erkannt werden
  • Änderungen an den Index- und length des Arrays können nicht erkannt werden

Lösung:

  • Vue2 bietet Vue.$set , um Objekten dynamisch Eigenschaften hinzuzufügen
  • Vue.$delete löscht Objekteigenschaften dynamisch

3. Schreiben Sie Array-Methoden neu, um Array-Änderungen zu erkennen

Vue3 verwendet proxy , um reaktionsfähige Daten zu implementieren

Vorteil:

  • Kann das dynamische Hinzufügen und Löschen von Proxy-Objektattributen erkennen
  • Sie können die Änderungen in den Index- und length des Messarrays sehen.

Mangel:

  • es6 proxy unterstützt den Browser mit niedrigerer Version IE11 nicht
  • Eine spezielle Version wird veröffentlicht, um IE11 zu unterstützen

Die obigen Zitate „[Vergleich von Vue2 und Vue3]“ (https://www.cnblogs.com/yaxinwang/p/13800734.html)

4. Intuitives Erlebnis

Derzeit ist Vue2 immer noch das wichtigste in der tatsächlichen Arbeit

Vue3 umfasst mounted , data und methods , alles zusammengefasst in einem setup（）

2. Datenbindungsbeispiel mit Vue3

Im vorherigen Artikel „Details zur integrierten HTTP-Bibliothek Axios in Vue3“ haben wir die Rückgabe von Hintergrunddaten realisiert und diese auf der Startseite angezeigt (obwohl sie sich in der Konsole befinden). Dies bedeutet jedoch nur, dass 90 % davon abgeschlossen sind.

Im nächsten Schritt geht es darum, wie wir Daten von der Hintergrundschnittstelle zurückgeben und wie sie auf der Seite angezeigt werden.

1. Verwenden Sie ref, um die Datenbindung zu implementieren

Wir müssen es noch in home ändern, schließlich wird es auf der Seite angezeigt, also müssen wir nur Home -Teil des Codes ändern. Der spezifische Beispielcode lautet wie folgt:

<Vorlage>
  <a-Layout>
    <a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>
    <a-Layout-Inhalt
        :style="{ Hintergrund: '#fff', Polsterung: '24px', Rand: 0, min. Höhe: '280px' }"
    >
      {{ebooks}}
      <vor>
{{ebooks}}
      </pre>
    </a-layout-inhalt>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent,onMounted,ref } von „vue“;
importiere Axios von „Axios“;

exportiere StandarddefiniereKomponente({
  Name: "Home",
  aufstellen(){
    console.log('einrichten');
    const ebooks = ref();
    beim Montieren(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
        console.log("beiMounted");
        const Daten = Antwort.Daten;
        ebooks.Wert=Daten.Inhalt;
      })
    })
    zurückkehren {
      E-Books
    }

  }
});
</Skript>

Wissenspunkte:

  • const ebooks=ref() ; Dies sind reaktionsfähige Daten, und Vue3 fügt ref hinzu, um reaktionsfähige Daten zu definieren, was bedeutet, dass ebooks eine Echtzeitdatenanzeige sind;
  • Der ref zugewiesene Wert ist value ;
  • Verwenden Sie {{variable}}, um den Wert zu erhalten;

Kompilieren Sie neu, starten Sie den Dienst und sehen Sie sich die Ergebnisse wie folgt an:

2. Verwenden Sie reaktiv, um die Datenbindung zu implementieren

Ändern Sie es auf ähnliche Weise in home . Der Beispielcode lautet wie folgt:

<Vorlage>
  <a-Layout>
    <a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>
    <a-Layout-Inhalt
        :style="{ Hintergrund: '#fff', Polsterung: '24px', Rand: 0, min. Höhe: '280px' }"
    >
      <strong>Verwenden von Ref für Datenbindungsergebnisse:</strong><p></p>
      {{ebooks1}}
      <p></p>
      <vor>
{{ebooks1}}
      </pre>
      <strong>Verwenden von ReactiveF für Datenbindungsergebnisse:</strong><p></p>{{ebooks2}}
      <p></p>
      <vor>
{{ebooks2}}
      </pre>
    </a-layout-inhalt>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent, onMounted, ref, reactive, toRef} von „vue“;
importiere Axios von „Axios“;

exportiere StandarddefiniereKomponente({
  Name: "Home",
  aufstellen(){
    console.log('einrichten');
    //Verwenden Sie ref zur Datenbindung const ebooks=ref();
    // Reaktive Datenbindung verwenden const ebooks1 = reactive({books:[]})
    beim Montieren(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
        console.log("beiMounted");
        const Daten = Antwort.Daten;
        ebooks.Wert=Daten.Inhalt;
        ebooks1.books=Daten.Inhalt;
      })
    })
    zurückkehren {
      ebooks1: E-Books,
      ebooks2:toRef(ebooks1,"Bücher")
    }

  }
});
</Skript>

Wissenspunkte:

reactive und toRef müssen von vue importiert werden;
In reactive({books:[]}) muss reactive （） Objekte speichern. Hier füge ich eine leere Sammlung in books hinzu.
toRef(ebooks1,"books") wandelt books in eine responsive Variable um;
Offensichtlich ist die Verwendung von Reactive problematischer. Bei der tatsächlichen Projektentwicklung müssen Sie sowohl reactive als auch ref verwenden.
Das Problem bei der Verwendung von ref besteht darin, dass Sie beim Verwenden einer Variablen value hinzufügen müssen, unabhängig davon, ob Sie es abrufen oder verwenden.

Kompilieren Sie neu, starten Sie den Dienst und sehen Sie sich die Ergebnisse wie folgt an:

3. Abschließende Gedanken

Das Erfolgserlebnis, das die Front-End-Entwicklung den Leuten vermittelt, ist direkter, weil man es intuitiv sehen kann, im Gegensatz zum Geschäftslogikcode im controller oder service , wo man viel schreiben muss und den Sinn nicht versteht. Aber das hat keinen Einfluss auf meine Liebe zum coding .

Dies ist das Ende dieses Artikels über die Verwendung von Vue3 zur Datenbindung und Anzeige von Listendaten. Weitere relevante Inhalte zur Vue3-Datenbindung und Anzeige von Listendaten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Details zur Datenanzeige der Vue3-Listenschnittstelle

<<:  CSS-Zusammenfassungsnotizen: Beispiele für Transformationen, Übergänge und Animationen

>>:  So verwenden Sie Docker zum Bereitstellen eines Dubbo-Projekts

Artikel empfehlen

Vue-Handschrift-Ladeanimationsprojekt

Wenn die Seite nicht reagiert, ist die Anzeige de...

Autotrash-Tool für Linux zum automatischen Löschen alter Junk-Dateien zu einem festgelegten Zeitpunkt

Autotrash ist ein Befehlszeilenprogramm, das den ...

Analysieren Sie, wie eine SQL-Abfrageanweisung in MySQL ausgeführt wird

Inhaltsverzeichnis 1. Übersicht über die logische...

Anfänger verstehen das MySQL-Deadlock-Problem anhand des Quellcodes

Nach vielen schwierigen Einzelschritt-Debuggings ...

Docker verwendet Dockerfile, um die Node.js-Anwendung zu starten

Schreiben einer Docker-Datei Am Beispiel des von ...

Informationen zum Konfigurationsproblem bei der Verbindung von MyBatis mit der MySql8.0-Version

Beim Erlernen von Mybatis ist mir ein Fehler aufg...

Lösen Sie das Problem, dass die Methoden der document.getElementBy-Reihe keine Objekte abrufen können

getElementById kann das Objekt nicht abrufen Beim...

Lösen Sie das Problem, dass der MySQL-Server aktiv die Verbindung trennt, wenn kein Betriebstimeout vorliegt

Wenn wir den MySQL-Dienst verwenden, beträgt die ...

So löschen Sie zusätzliche Kernel in Ubuntu

Schritt 1: Den aktuellen Kernel anzeigen rew $ un...

Schritte zum Einrichten und Mounten freigegebener Ordner auf Windows-Host und Docker-Container

Programme in Docker-Containern müssen häufig auf ...

Der gesamte Prozess der Installation und Konfiguration von Harbor1.7 auf CentOS7.5

1. Laden Sie die erforderlichen Pakete herunter w...

Ausführliches Tutorial zur Konfiguration der kostenlosen Installationsversion von MySQL 8.0.23

Der erste Schritt besteht darin, die kostenlose I...

So verwenden Sie Nginx als Proxy-Cache

Der Zweck der Cache-Verwendung besteht darin, den...

Detaillierte Erläuterung der Vorgänge und Implementierungen im Zusammenhang mit dem HTML-Druck

Das Prinzip besteht darin, die Methode window.pri...

Verwendung des Linux-Telnet-Befehls

1. Einleitung Der Befehl Telnet dient zur Anmeldu...