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

Was sind MySQL-Dirty-Pages?

Inhaltsverzeichnis Schmutzige Seiten (Speichersei...

Einführung in MySQL-Anweisungskommentare

MySQL unterstützt drei Arten von Kommentaren: 1. ...

VUE implementiert eine Timeline-Wiedergabekomponente

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der Linux-Textverarbeitungstools

1. Zählen Sie die Anzahl der Benutzer, deren Stan...

Docker-Compose erstellt schnell Schritte für ein privates Docker-Warehouse

Erstellen Sie docker-compose.yml und füllen Sie d...

So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS

Inhaltsverzeichnis Vorwort Ajax seriell und paral...

Eine kurze Erläuterung der Größeneinheiten in CSS

Die Kompatibilität der Browser wird immer besser....

Analyse und Lösungen für Probleme bei der Verwendung von Label-Tags

Ich habe kürzlich bei einer bestimmten Aufgabe das...

Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster

Systemumgebung: Ubuntu 16.04LTS In diesem Artikel...

Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen

Die Echtzeitreplikation ist die wichtigste Method...

Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten

1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...

So stellen Sie nginx mit Docker bereit und ändern die Konfigurationsdatei

Nginx mit Docker bereitstellen, so einfach ist da...

Ein Artikel, der Ihnen hilft, die Positionsberechnung in js gründlich zu verstehen

Inhaltsverzeichnis Einführung scrollen Element.sc...

WeChat-Applet zum Speichern von Alben und Bildern in Alben

Ich entwickle derzeit eine Video- und Tool-App, ä...

Konkretes Beispiel einer MySQL-Mehrtabellenabfrage

1. Verwenden Sie die SELECT-Klausel, um mehrere T...