So ersetzen Sie JQuery durch Vue

verabschieden

Möchten Sie Vue.js von Grund auf lernen? Treten Sie jetzt SidePoint Premium bei, um eine vollständige Sammlung von Vue.js -Büchern zu erhalten, die Vue.js -Grundlagen, Projektpraktiken, Tipps und mehr für nur 14,99 USD pro Monat abdecken!

Viele Entwickler verlassen sich beim Erstellen einfacher Anwendungen immer noch auf JQuery. Während Sie Ihrer Seite manchmal nur eine kleine Menge an Interaktivität hinzufügen müssen, erscheint die Verwendung von JavaScript -Frameworks zu kompliziert - zusätzliches Codevolumen, Boilerplate -Code, Build -Tools und Modulpacker und vieles mehr. Die Einführung von JQuery von CDN scheint eine Kinderspiel zu wählen.

Dieser Artikel soll Sie überzeugen, dass selbst bei relativ einfachen Projekten die Verwendung von VUE.JS (im Folgenden als Vue bezeichnet) keine Anstrengungen erfordert, sondern Ihnen beim Schreiben eines besseren Codes schneller beim Schreiben von besserem Code benötigt. Wir werden ein einfaches Beispiel als Beispiel nutzen, um JQuery bzw. VUE zu codieren, und nach und nach seine Unterschiede nachweisen.

Schlüsselpunkte

JQuery durch Vue.js für grundlegende Projekte ersetzen, ist nicht schwierig und kann einen besseren, schnelleren Code schreiben.
vue.js ermöglicht es der Benutzeroberfläche, von den Logik/Daten, die sie antreiben, klar getrennt zu sein, wodurch der Code leichter zu verstehen und zu testen ist.
Die Benutzeroberfläche in Vue.js ist deklarativ, was bedeutet, dass Entwickler sich nur auf das konzentrieren müssen, was sie sehen möchten, ohne darauf zu achten, wie das DOM betrieben werden soll, um es umzusetzen.
vue.js und jQuery sind ähnlich in Größe, aber Vue.js bietet ein bequemeres Entwicklungserlebnis und einen einfacheren lesbaren Code.
vue.js können modulare, wiederverwendbare UI-Komponenten erstellen, die zu komplexen Front-End-Anwendungen kombiniert werden können.

was wir bauen

Dieser Artikel erstellt eine einfache Online -Rechnung mit der von Sparksuite bereitgestellten Open -Source -Vorlage. Hoffentlich ist dies innovativer als eine andere To-Do-Liste und ist komplex genug, um die Vorteile der Verwendung von VUE zu demonstrieren und gleichzeitig leicht zu verstehen.

Wir werden es interaktiv machen, indem wir Artikel, Einheitenpreis und Mengeneingänge bereitstellen und die Spalte "Preis" automatisch neu berechnen, wenn sich einer der Werte ändert. Wir werden auch eine Schaltfläche hinzufügen, um neue leere Zeilen in die Rechnung sowie ein "Gesamt" -Feld einzufügen, das beim Bearbeiten der Daten automatisch aktualisiert wird.

Ich habe die Vorlage so geändert, dass die HTML für eine einzelne (leere) Zeile so aussieht:

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00 jQuery -Implementierung

Erstens sehen wir, wie diese Funktion mit JQuery implementiert wird.

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

Wir haben den Hörer an der Tabelle selbst angeschlossen, und wenn sich die Wert "Einheit kosten" oder "Menge" ändert

Diese Funktion schaut nach allen Elementzeilen in der Tabelle und schleift sie durch, übergibt jede Zeile an die Berechnung der Funktion und füge dann die Ergebnisse hinzu. Stecken Sie diese Gesamtsumme in die relevante Position der Rechnung.

<code class="language-javascript">function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</code>

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00

Im obigen Code erhalten wir einen Hinweis auf alle Eingabelemente in der Zeile und multiplizieren Sie die zweiten und dritten, um eine subtotale zu erhalten. Fügen Sie diesen Wert dann in die letzte Zelle in der Zeile ein.

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

Wir haben auch eine Helferfunktion, um sicherzustellen, dass sowohl subtotale als auch insgesamt in zwei Dezimalstellen formatiert und mit Währungssymbolen vorangestellt werden.

<code class="language-javascript">function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</code>

Schließlich haben wir einen Klick -Handler für die Schaltfläche "Zeile hinzufügen". Was wir hier tun, ist die letzte Projektzeile und erstellen Sie eine Kopie. Die Eingabe in die geklonte Zeile wird auf den Standardwert gesetzt und als neue letzte Zeile einfügt. Wir können Benutzer auch erleichtern und den Fokus auf die erste Eingabe setzen, damit sie mit der Eingabe beginnen können.

Folgendes ist die vollständige jQuery -Demonstration: CodePen Link

Nachteile von JQuery

Was ist also mit diesem Code los? Oder wo können wir es verbessern?

Sie haben vielleicht einige neuere Bibliotheken wie Vue und React gehört, die behaupten, eher deklarativ als imperativ zu sein. Wenn Sie sich diesen jQuery -Code ansehen, ist der größte Teil des Code eine Liste von Anweisungen zum Betrieb des DOM. Der Zweck eines jeden Teils des Code - "Was" - ist oft schwer durch die Details von "Wie man es macht" zu unterscheiden. Natürlich können wir die Absicht des Codes klarstellen, indem wir ihn in gut benannte Funktionen unterteilen, aber dieser Code erfordert immer noch einige Anstrengungen, um nach einer Weile wieder zu verstehen.

Ein weiteres Problem mit dieser Art von Code ist, dass wir den Anwendungszustand in der DOM selbst speichern. Informationen zum Bestellprojekt existieren nur als Teil des HTML, der die Benutzeroberfläche ausmacht. Dies scheint kein großes Problem zu sein, wenn wir Informationen an nur einem Ort anzeigen, aber sobald wir die gleichen Daten an mehreren Stellen in der Anwendung anzeigen müssen, wird sichergestellt, dass jeder Abschnitt immer komplexer wird. Es gibt keine einzige Quelle.

Während uns nichts davon abhalten kann, den Zustand außerhalb des DOM nicht zu sparen und diese Probleme zu vermeiden, liefern Bibliotheken wie Vue die Funktionalität und Struktur, die die Erstellung einer guten Architektur erleichtert und sauberere, modularere Code schreibt.

in vue

konvertieren

Wie verwenden wir Vue, um diese Funktion zu reproduzieren?

Wie ich bereits erwähnt habe, verlangt von VUE nicht, dass wir einen Modulpacker, einen Übersetzer oder eine einzelne Dateikomponente (.vue -Datei) auswählen, um zu beginnen. Wie JQuery können wir einfach Bibliotheken von CDN einbeziehen. Beginnen wir mit dem Ersetzen von Skript -Tags:

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

Als nächstes müssen wir eine neue Vue -Instanz erstellen:

<code class="language-javascript">$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="language-html"></code>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });

Hier müssen wir nur die EL -Option bereitstellen, bei der es sich um einen Selektor handelt (genau wie wir JQuery), um zu ermitteln, welcher Teil des Dokuments, den wir verwalten sollen.

Wir können Vue auf alles kümmern, was von der gesamten Seite (z. B. für eine einzelne Seitenanwendung) oder eine einzelne

beginnt. Für unser Rechnungsbeispiel lassen wir Vue die HTML -Tabelle steuern.

Daten

Fügen wir auch die relevanten Daten aus drei Beispielzeilen zu unserer VUE -Instanz hinzu:

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00 In

Datenattribut speichern wir den Anwendungszustand. Dies schließt nicht nur Daten ein, von denen wir die Anwendung verwenden möchten, sondern auch Informationen zum UI -Status (z. B. dem derzeit aktiven Teil der TAB -Gruppe oder ob das Akkordeon erweitert oder zusammengebrochen wird).

vue ermutigt uns, den Zustand der Anwendung von seiner Darstellung (d. H. DOM) zu trennen und an einer Stelle zu konzentrieren-eine einzelne Quelle der Tatsachenquelle.

Vorlage ändern

Stellen wir nun unsere Vorlage fest, um Elemente aus unserem Datenobjekt anzuzeigen. Da wir Vue gesagt haben, dass wir die Tabelle steuern sollen, können wir seine Vorlagensyntax in HTML verwenden, um Vue zu sagen, wie sie sie rendern und manipulieren können.

Verwenden der V-für-Eigenschaft können wir ein Stück HTML für jedes Element im Element-Array rendern:

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

vue wiederholt dieses Tag für jedes Element, das wir an das von V -für konstruierte Array (oder Objekt) übergeben, sodass wir jedes Element in der Schleife verweisen können - in diesem Fall. Da VUE alle Eigenschaften des Datenobjekts beobachtet, wird das Markup dynamisch erneut weitergeleitet, wenn sich der Inhalt des Elements ändert. Wir müssen nur Elemente zum Anwendungsstatus hinzufügen oder löschen, und Vue ist für die Aktualisierung der Benutzeroberfläche verantwortlich.

Wir müssen auch ein Eingabefeld hinzufügen, damit der Benutzer die Artikelbeschreibung, den Preis und die Menge der Einheiten ausfüllen kann:

<code class="language-javascript">function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</code>

Hier verwenden wir die V-Model-Eigenschaft, um die Zwei-Wege-Bindung zwischen der Eingabe und den Eigenschaften des Projektmodells festzulegen. Dies bedeutet, dass Änderungen an der Eingabe die entsprechenden Eigenschaften des Projektmodells aktualisieren und umgekehrt.

In der letzten Zelle verwenden wir doppelte Klammern {{}}, um einen Text auszugeben. Wir können jeden gültigen JavaScript -Ausdruck in Klammern verwenden, sodass wir die beiden Projekteigenschaften multiplizieren und das Ergebnis ausgeben. Da Vue unser Datenmodell beobachtet, wird die Änderungen an beiden Eigenschaften dazu führen, dass der Ausdruck automatisch neu berechnet wird.

Ereignisse und Methoden

Jetzt haben wir die Vorlage eingerichtet, um unsere Artikelsammlung zu rendern, aber wie fügen wir neue Zeilen hinzu? Da Vue alles in Elementen rendert, um leere Zeilen zu rendern, müssen wir das Objekt nur mit jedem gewünschten Standardwert in das Element -Array drücken.

Um Funktionen zu erstellen, auf die in der Vorlage zugegriffen werden kann, müssen wir sie als Eigenschaften des Methodenobjekts an unsere VUE -Instanz weitergeben:

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

Definieren wir eine Addrow

<code class="language-javascript">$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="language-html"></code>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); }); Beachten Sie, dass jede von uns erstellte Methode automatisch an die VUE -Instanz selbst gebunden ist, sodass wir als Eigenschaften davon auf Eigenschaften und andere Methoden im Datenobjekt zugreifen können.

Also haben wir jetzt eine Methode. Wie nennen wir sie, wenn wir auf die Schaltfläche "Zeile hinzufügen" klicken? Die Syntax zum Hinzufügen von Ereignishörern zu Elementen in einer Vorlage ist v-on: Ereignisname:

<code class="language-javascript">const app = new Vue({
  el: 'table'
});</code>

vue bietet uns auch eine Verknüpfung, damit wir @ anstelle von v-on: wie ich im obigen Code getan habe. Für Handler können wir jede Methode in der VUE -Instanz angeben.

Computereigenschaften

Jetzt müssen wir nur die Gesamtsumme am unteren Rand der Rechnung anzeigen. Wir können dies wahrscheinlich in der Vorlage selbst tun: Wie ich bereits erwähnt habe, ermöglicht Vue uns, jede JavaScript -Anweisung zwischen lockigen Klammern zu platzieren. Es ist jedoch besser, etwas über die grundlegende Logik außerhalb der Vorlage hinaus zu halten.

Wir können dafür eine andere Methode verwenden, aber ich denke, die berechneten Eigenschaften sind besser angemessen. Ähnlich wie bei der Erstellungsmethode übergeben wir ein berechnetes Objekt, das Funktionen an unsere VUE -Instanz enthält, und wir möchten, dass das Ergebnis dieser Funktionen in der Vorlage verwendet wird:

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00

Jetzt können wir diese berechnete Eigenschaft in der Vorlage verweisen:

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

Wie Sie vielleicht bemerkt haben, können berechnete Eigenschaften wie Daten behandelt werden. Die Verwendung von berechneten Eigenschaften hat jedoch einen weiteren Vorteil: Vue ist intelligent genug, um den Rückgabewert zu untersuchen, und berechnen die Funktion nur dann neu, wenn eine der Dateneigenschaften von Änderungen abhängt.

Wenn wir Methoden zur Berechnung der Gesamtsumme verwenden, wird die Berechnung jedes Mal durchgeführt, wenn die Vorlage erneut gerendert wird. Da wir berechnete Eigenschaften verwenden, wird die Gesamtsumme nur dann neu berechnet, wenn sich die Menge oder das Preisfeld des Artikels ändert.

filter

Sie haben möglicherweise einen kleinen Fehler in unserer Implementierung bemerkt. Obwohl die Kosteneinheiten eine Ganzzahl sind, werden unsere Gesamt- und Subtotalen nicht angezeigt, wenn sie angezeigt werden. Was wir wirklich wollen, ist, diese Zahlen immer als zwei Dezimalstellen anzuzeigen.

, anstatt den Code zu ändern, der Subtotale berechnet und die Summen berechnet, bietet uns eine gute Möglichkeit, gemeinsame Formatierungsaufgaben wie diese zu erledigen: Filter.

Wie Sie vielleicht vermutet haben, übergeben wir einfach ein Objekt mit diesem Schlüssel an unsere VUE -Instanz:

<code class="language-javascript">function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</code>

Hier erstellen wir einen sehr einfachen Filter namens Currency, der Value.Tofixed (2) nennt und das Ergebnis zurückgibt. Wir können es auf jede Ausgabe in der Vorlage wie folgt anwenden:

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

Folgendes ist die vollständige VUE -Demo: Codepen Link

Zusammenfassung

Vergleichen Sie die beiden Versionen des Codes nebeneinander, und mehrere Aspekte der VUE -Anwendung sind herausragend:

• Löschen Sie die Trennung zwischen UI und den Logik/Daten, die sie antreiben: Der Code ist einfacher zu verstehen und zu testen.
• ui ist deklarativ: Sie müssen sich nur um das kümmern, was Sie sehen möchten, ohne darauf zu achten, wie das DOM betrieben werden soll, um es umzusetzen.

Die Größen (in KB) der beiden Bibliotheken sind fast gleich. Natürlich können Sie JQuery mit einem benutzerdefinierten Build optimieren, aber selbst für relativ einfache Projekte wie unser Rechnungsprozess rechtfertigt ich die einfache Entwicklung und die Lesbarkeit des Codes für diesen Unterschied.

vue kann viele Dinge tun, die wir hier nicht vorgestellt haben. Der Vorteil ist, dass Sie modulare, wiederverwendbare UI -Komponenten erstellen können, die zu komplexen Frontend -Anwendungen kombiniert werden können. Wenn Sie Vue ausführlich kennenlernen möchten, schlage ich vor, dass Sie mit dem Framework Vue.js 2.0 auf dem Laufenden bleiben.

FAQs über das Ersetzen von JQuery durch VUE

Was ist der Hauptunterschied zwischen JQuery und Vue.js?

jQuery ist eine schnelle, kompakte und featurereiche JavaScript-Bibliothek. Es erleichtert das HTML-Dokument durchquert und Manipulation, Ereignisverarbeitung und Animationen, und die benutzerfreundliche API kann in einer Vielzahl von Browsern ausgeführt werden. Vue.js hingegen ist ein progressives JavaScript -Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Gesamtrahmen hat das Design von Vue von Anfang an eine inkrementelle Adoptierbarkeit. Die Kernbibliothek konzentriert sich nur auf Sichtschichten, ist einfach zu starten und integriert sich in andere Bibliotheken oder vorhandene Projekte.

Warum sollte ich in Betracht ziehen, JQuery durch Vue.js zu ersetzen?

Während JQuery seit vielen Jahren ein zuverlässiges Tool ist, bietet Vue.js eine modernere und umfassendere Möglichkeit, Webanwendungen zu erstellen. Vue.js basiert auf Komponenten, was die Wiederverwendbarkeit und Wartbarkeit fördert. Es hat auch ein stärkeres Ökosystem mit Tools wie Staatsmanagement, Routing usw. Darüber hinaus verfügt Vue.js über ein virtuelles DOM, das in einigen Fällen die Leistung verbessern kann.

Wie kann ich JQuery Code in vue.js konvertieren?

Konvertieren von JQuery -Code in vue.js erfordert das Verständnis der äquivalenten VUE.JS -Methoden und Eigenschaften von JQuery -Funktionen. Beispielsweise verwenden Sie Vue's Mounted () Lifecycle Hook anstelle von JQuery's $ (Dokument) .Ready (). In ähnlicher Weise verwenden Sie Vue's Axios oder Fetch anstelle von Jquerys $ .ajax () für HTTP -Anfragen.

Kann ich JQuery und Vue.js in einem Projekt verwenden?

Während technisch sowohl jQuery als auch vue.js verwendet werden, wird dies normalerweise nicht empfohlen. Das Mischen der beiden kann zu Code -Verwirrung und potenziellen Konflikten führen, da beide Bibliotheken versuchen, das DOM zu ihren eigenen Bedingungen zu verwalten. Es ist am besten, einen von ihnen vollständig zu verwenden.

Wie kann man mit Ereignissen in Vue.js umgehen, verglichen mit JQuery?

In jQuery fügen Sie normalerweise einen Ereignishörer an einem Element mit Methoden wie .click (), .on () oder .bind () hinzu. In Vue.js verwenden Sie die V-On-Anweisung (oder ihre Abkürzung @), um auf DOM-Ereignisse zu hören und beim Auslöser ein JavaScript auszuführen.

Wie funktioniert die Datenbindung in Vue.js im Vergleich zu JQuery?

jQuery hat keine integrierte Datenbindung. Sie wählen manuell ein Element aus und aktualisieren seinen Inhalt. Im Gegenteil, Vue.js hat ein leistungsstarkes Datenbindungssystem. Sie können die V-Model-Direktive verwenden, um Zwei-Wege-Datenbindungen für Formulationseingabe, TextArea und Elemente auszuwählen.

Wie können Elemente in Vue.js im Vergleich zu JQuery animieren?

jQuery verfügt über integrierte Animationsmethoden wie .fadein (), .Slideup () usw. Vue.js hingegen bietet Conversion -Komponenten an, die eine größere Flexibilität ermöglichen, wenn Elemente in und aus dem DOM animiert werden.

Wie kann ich HTTP -Anfragen in Vue.js im Vergleich zu JQuery stellen?

In jQuery verwenden Sie normalerweise die Methode $ .ajax (), um HTTP -Anforderungen zu erstellen. Vue.js verfügt nicht über diese Methode, aber Sie können Bibliotheken wie moderne APIs (wie Fetch) oder Axios verwenden, um HTTP -Anforderungen zu erstellen.

Wie geht Vue.js im Vergleich zu JQuery mit der Reaktivität um?

jQuery verfügt über kein integriertes reaktives System. Wenn sich Ihre Daten ändert, aktualisieren Sie das DOM manuell. Vue.js hingegen hat ein reaktives Datensystem. Die Ansicht wird automatisch aktualisiert, wenn Sie die Daten ändern.

Wie ersetzt ich JQuery -Plugin durch Vue.js -Komponente?

Viele JQuery -Plugins können durch Vue.js -Komponenten ersetzt werden. Vue.js verfügt über ein reichhaltiges Ökosystem, das Tausende von Open -Source -Komponenten zur Verfügung stellt. Sie können auch Ihre eigenen benutzerdefinierten Komponenten erstellen. Dies verbessert die Wiederverwendbarkeit und Wartbarkeit des Codes.

Bitte beachten Sie, dass ich die Ausgabe gemäß Ihren Anforderungen umgeschrieben und das ursprüngliche Format und die Lage aller Bilder beibehalten habe. Da ich keinen Zugriff auf CodePen habe, kann ich den tatsächlichen CodePen -Link nicht angeben.

Das obige ist der detaillierte Inhalt vonSo ersetzen Sie JQuery durch Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!