Machen Sie den Wechsel von JQuery zu Vue

Entwickler, die JQuery schon lange einsetzen und sich kürzlich an Vue verwandelt haben, sind möglicherweise an dem Migrationsprozess beider.

Zunächst muss ich klar sein, ich empfehle nicht, dass Sie JQuery aufgeben. Obwohl diese Aussage jetzt populär ist, habe ich vor einigen Jahren selbst einen ähnlichen Artikel geschrieben („Wie kann ich JQuery nicht verwenden“). Wenn JQuery Ihre Anforderungen erfüllen und Ihre Endbenutzer Ihre Website reibungslos nutzen können, verwenden Sie sie weiter.

Dieser Leitfaden gilt hauptsächlich für Entwickler, die viele Jahre Erfahrung mit JQuery haben und lernen möchten, wie man die gleichen Aufgaben in Vue erledigt. Also werde ich mich auf das konzentrieren, was ich für den "Kern" -Anwendungsfall von JQuery denke. Ich würde nicht alle möglichen Funktionen abdecken, sondern den Ansatz "Ich mache oft [x] mit JQuery", was für diejenigen, die über das Lernen in Betracht ziehen, möglicherweise resonanter sein. (Beachten Sie übrigens auch, dass die Art und Weise, wie ich die Beispiele schreibe, nur eine Möglichkeit ist, die Aufgabe zu erfüllen. Sowohl JQuery als auch Vue bieten mehrere Möglichkeiten, um dasselbe Ziel zu erreichen, was eine gute Sache ist!)

Betrachten wir also einige fortgeschrittene Aufgaben, die wir uns an JQuery wenden könnten:

• Finden Sie Elemente im DOM (um später darauf zu arbeiten)
• Ändern Sie den Inhalt im DOM (z. B. den Text eines Absatzes oder die Klasse einer Schaltfläche)
• Lesen und Festlegen von Formularwerten
• Formüberprüfung (eigentlich nur eine Kombination aus der oben genannten)
• Ajax -Anruf- und Verarbeitungsergebnisse
• Ereignisbehandlung (zum Beispiel eine Aktion durchführen, wenn eine Schaltfläche klickt)
• Messen oder ändern Sie den Stil eines Elements

Natürlich hat JQuery viel mehr als das, aber diese Verwendungen (zumindest meiner Meinung nach) decken die häufigsten Anwendungsfälle ab. Beachten Sie auch, dass in der obigen Liste viele Kreuzkorrelationen enthalten sind. Sollten wir also zunächst jede Funktion nacheinander vergleichen? Nein, mach dir keine Sorgen. Lassen Sie uns zunächst die Hauptunterschiede von VUE -Anwendungen einführen.

Definieren Sie den "Aktionsbereich" von Vue

Wenn wir der Seite JQuery hinzufügen, fügen wir unserem JavaScript -Code tatsächlich ein Schweizer Armeemesser hinzu, um gemeinsame Webentwicklungsaufgaben zu erledigen. Wir können jeden Anwendungsfall in jeder Reihenfolge ausführen, die wir für angemessen halten. Beispielsweise benötigt ein Kunde heute eine Formularüberprüfung und fordert dann in etwa einem Monat ein AJAX-basiertes Suchformular zum Header der Website hinzu.

Vue hat in dieser Hinsicht einen signifikanten Unterschied. Bei der Start eines VUE -Projekts definieren wir zunächst die "Region", auf die wir uns im DOM konzentrieren möchten. Betrachten wir also eine einfache Prototyp -Webseite:

<header>
  Ausgefallene Headerinhalte</header>
<div id="sidebar">
  Einige Seitenleisteninhalte</div>

<main>
  <p id="main-content">
    Hauptwebsite -Inhalt, sehr wichtiger Inhalt ...
  </p>
  <div id="loginForm">
    Natürlich gibt es auch ein Anmeldeformular</div>
</main>

In einer typischen JQuery -Anwendung schreiben wir möglicherweise Code, um Header, Seitenleisten, Anmeldesformulare usw. zu verarbeiten. Keine große Sache:

 $ (Dokument) .Ready (function () {

  $ ('Header') // etwas tun ...

  $ ('#Seitenleiste') // etwas mach ...

  $ ('#loginform') // etwas tun ...

});

In der VUE -Anwendung geben wir zunächst an, was zu verarbeiten ist. Nehmen wir an, unser Client bittet zunächst, das Anmeldelement Validierung hinzuzufügen. Unser Vue -Code gibt dies an:

 neuer Vue ({{
  EL: '#loginform',
  // Der Code ist hier ...
});

Dies bedeutet, dass wir normalerweise eine zweite Vue -Anwendung hinzufügen, wenn der Kunde sich später entscheidet, der Seitenleiste etwas hinzuzufügen:

 neuer Vue ({{
  EL: '#loginform',
  // Der Code ist hier ...
});

neuer Vue ({{
  EL: '#SideBar',
  // Der Code ist hier ...
});

Ist das eine schlechte Sache? Absolut nicht. Wir haben sofort die Vorteile der Verpackung erzielt. Wenn wir versehentlich Variablen mit gebräuchlichen Namen verwenden (wir alle haben es getan), müssen wir uns nicht um widersprüchlich mit anderen Teilen des Codes kümmern. Wenn ein Kunde später eine weitere Anfrage hinzufügt, trennen Sie unseren eindeutigen, logischen Satz von Vue -Codes wie diesen, damit wir sicher sein können, dass er sich gegenseitig beeinträchtigt.

Das ist also eine gute Sache. Aber als ich anfing, Vue zu verwenden, gab es mir eine Pause. Schauen wir uns nun unsere Anwendungsfälle an.

Finden Sie Elemente in Dom

Ein weiterer interessanter oder beängstigender Aspekt, den Sie finden, ist, wie Sie "Elemente im Dom finden". Dies ist ein bisschen vage, aber betrachten wir ein bestimmtes Beispiel. Wir haben eine Schaltfläche und wenn wir klicken, lassen wir etwas geschehen. Hier ist ein vereinfachtes Beispiel:

 <button id="myButton">Klicken Sie auf mich!</button>

 $ (Dokument) .Ready (function () {

  $ ('#mybutton'). click (function () {
    Alarm (1);
  });

});

Vergleichen wir es nun mit, wie Vue impliziert:

<div id="app">
  <button>Klicken Sie auf mich!</button>
</div>

const app = new Vue ({{{
  EL: '#App',
  Methoden: {
    Dosen etwas: function () {
      Alarm (1);
    }
  }
});

VUE -Anwendungen sind ausführlich, sind sich jedoch bewusst, wie die Operationen ("Click") zwischen den Tags und den zu aufgerufenen Funktionen direkt verbinden. Der Code von Vue hat keine Verbindung mit dem DOM (mit Ausnahme des EL -Teils, in dem wir definieren, wo er funktionieren muss). Es ist leicht eines der Dinge, die mich am meisten über Vue überzeugt haben - es ist einfacher zu verstehen, was los ist. Außerdem muss ich mich nicht zu sehr Sorgen um den ID -Wert und den Auswahlschalter machen. Wenn ich die Klasse oder ID der Taste ändere, muss ich nicht zurück zu meinem Code zurückkehren und mir Sorgen um die Aktualisierung des Selektors machen.

Betrachten wir ein anderes Beispiel: das Finden und Ändern von Text im DOM. Stellen Sie sich vor, der Text eines anderen Teils des DOM wird nach dem Klicken auf die Schaltfläche jetzt geändert.

 <button id="myButton">Klicken Sie auf mich!</button>

$ (Dokument) .Ready (function () {

  $ ('#mybutton'). click (function () {
    $ ('#result'). Text ('Sie haben auf mich geklickt, danke!');
  });

});

Ich habe eine neue Zeitspanne hinzugefügt, und wenn die Schaltfläche angeklickt wird, verwenden wir einen anderen Selektor, um sie zu finden und die Jquery -Dienstprogrammmethode zu verwenden, um den Text darin zu ändern. Betrachten Sie nun die Vue -Version:

<div id="app">
  <button>Klicken Sie auf mich!</button>
  <span>{{resultText}}</span>
</div>

const app = new Vue ({{{
  EL: '#App',
  Daten: {
    ErgebnisText: ''
  },
  Methoden: {
    Dosen etwas: function () {
      this.ResultText = 'Sie haben auf mich geklickt, danke! ';
    }
  }
});

In diesem Beispiel verwenden wir die Vorlagensprache von Vues (hervorgehobene Zeilen), um festzustellen, dass wir in diesem Fall eine Variable in diesem Fall resultText rendern möchten. Wenn nun die Schaltfläche klickt, ändern wir den Wert und der interne Text der Spannweite ändert sich automatisch.

Übrigens unterstützt VUE die Abkürzung des V-On-Attributs, sodass die Schaltflächen im Beispiel durch @click = "Dosen etwas" ersetzt werden können.

Lesen und Schreiben Sie Formularvariablen

Verarbeitungsformulare sind wahrscheinlich eines der häufigsten und nützlichsten Dinge, die wir mit JavaScript machen können. Noch vor JavaScript war der größte Teil meiner frühen "Webentwicklung" Perl -Skripte, um Formulareinreichungen zu verarbeiten. Als primäre Möglichkeit, Benutzereingaben zu akzeptieren, waren Formulare für das Web von entscheidender Bedeutung und sind möglicherweise noch einige Zeit der Fall. Betrachten wir ein einfaches JQuery -Beispiel, das einige Formulare liest und ein anderes Feld festlegt:

= Bitten Sie nach Summe

$ (Dokument) .Ready (function () {
  sei $ first = $ ('#First');
  sei $ second = $ ('#Second');
  sei $ sum = $ ('#sum');
  sei $ button = $ ('#sumbutton');

  $ button.on ('klick', function (e) {
    E.PreventDefault ();
    Sei Total = ParseInt ($ first.val (), 10) ParseInt ($ zweit.val (), 10);
    $ sum.val (insgesamt);
  });
});

Dieser Code zeigt, wie JQuery die Val () -Methode liest und schreibt. Am Ende nehmen wir vier Elemente (alle drei Formularfelder und Schaltflächen) aus dem DOM und verwenden einfache mathematische Operationen, um die Ergebnisse zu generieren. Betrachten Sie nun die Vue -Version:

= Bitten Sie nach Summe

neuer Vue ({{
  EL: '#myform',
  Daten: {
    Erstens: 0,
    Zweite: 0,
    Summe: 0
  },
  Methoden: {
    Dosum: function () {
      this.sum = this.First this.second;
    }
  }
})

Dies führt einige interessante VUE -Verknüpfungen ein. Erstens ist V-Model, wie VUE die bidirektionale Datenbindung zwischen Werten in DOM und JavaScript erstellt. Datenblockvariablen werden automatisch mit dem Formularfeld synchronisiert. Ändern Sie die Daten und das Formular wird aktualisiert. Ändern Sie das Formular und die Daten werden aktualisiert. Number ist ein Flag, das Vue anweist, ererbte Zeichenfolgewerte eines Formfelds als Zahlen zu behandeln. Wenn wir es weglassen und den Additionsvorgang durchführen, sehen wir eine String -Addition anstelle des arithmetischen Betriebs. Ich benutze JavaScript seit fast einem Jahrhundert und habe dies immer noch durcheinander gebracht.

Eine weitere kluge "Fähigkeit" ist @click.prevent. Zuerst definiert @Click den Klick -Handler der Schaltfläche, und dann verhindert das .Prevent teilweise daran, das Standardverhalten des Formulars zu senden (gleichwertig wie Ereignis.PreventDefault ()).

Der letzte Punkt ist die Zugabe der an die Taste gebundenen Dosum -Methode. Beachten Sie, dass nur Datenvariablen verwendet werden (Vue wird in diesem Bereich bereitgestellt).

Während dies größtenteils mein persönliches Gefühl ist, mag ich den Mangel an Abfragelektoren in Skripten, wenn sie in Vue geschrieben wurden und wie HTML es klarer machen kann, was es tut.

Schließlich können wir den Knopf sogar vollständig loswerden:

=

neuer Vue ({{
  EL: '#myform',
  Daten: {
    Erstens: 0,
    Zweitens: 0
  },
  berechnet: {
    sum: function () {
      zurück diese. Erstmals.
    }
  }
})

Eine kühlere Merkmale von VUE sind die berechneten Eigenschaften. Sie sind Dummies, die feststellen, wann ihre abgeleiteten Werte aktualisiert werden. Im obigen Code wird die Summe aktualisiert, sobald sich eine der beiden Formularfelder ändert. Dies funktioniert außerhalb von Formfeldern. Wir können die Summe so machen:

 Die Gesamtsumme ist {{sum}}.

Verwenden von AJAX

Wie einfach es ist, AJAX zu verwenden, was lobenswert ist. Tatsächlich kann ich sagen, dass ich Ajax auf "einheimische" Weise wahrscheinlich nur einmal insgesamt verwendet habe. (Wenn Sie neugierig sind, können Sie sich die Spezifikation von XMLHTTPrequest ansehen und sein jedoch froh sein, dass Sie sie selbst vermieden haben.) Jquerys einfache $ .get (...) -Methode funktioniert in vielen Fällen und $ .ajax () macht es auch einfach, wenn etwas Komplexer benötigt wird. Eine andere Sache, die Jquery gut macht, ist die Art und Weise, wie es JSONP -Anfragen umgeht. Obwohl die meisten JSONP jetzt nicht mit CORS benötigt werden, ist JSONP eine Möglichkeit, Anforderungen an APIs auf verschiedenen Domänen zu bearbeiten.

Was hat Vue also getan, um Ajax zu erleichtern? Nichts!

Ok, das klingt schrecklich, aber es ist nicht. Es stehen viele Optionen zur Verfügung, um HTTP -Anfragen zu bearbeiten, und Vue.js verfolgt einen agnostischeren Ansatz, mit dem wir Entwickler selbst entscheiden können, wie sie damit umgehen. Ja, das bedeutet mehr Arbeit, aber wir haben einige großartige Optionen.

Das erste, was zu berücksichtigen ist, ist Axios, eine vielversprechende Bibliothek, die in der Vue-Community sehr beliebt ist. Hier ist ein einfaches Beispiel dafür in Aktion (aus seiner Readme):

 axios.get ('/user? id = 12345')
  .then (Funktion (Antwort) {
    // console.log (Antwort);
  })
  .Catch (Funktion (Fehler) {
    // Fehlerkonsole.log (Fehler);
  })
  .then (function () {
    // immer ausführen});

Axios unterstützt sicherlich Postanfragen und wir können Header sowie viele andere Optionen angeben.

Axios ist zwar bei VUE -Entwicklern sehr beliebt, aber ich mag es nicht wirklich. (Zumindest noch nicht.) Stattdessen bevorzuge ich ab. Fetch ist keine externe Bibliothek, sondern eine Standard -Web -Methode zur Ausführung von HTTP -Anfragen. Fetch ist in etwa 90% der Browser gut unterstützt, aber das bedeutet, dass es nicht ganz sicher ist , aber wir können bei Bedarf Polyfill immer verwenden.

Während dies völlig über den Umfang dessen, was wir hier diskutieren, vollständig übertroffen hat, hat Kingsley Silas eine hervorragende Anleitung zur Verwendung von Axios und Abrufen mit React geschrieben.

Wie Axios basiert auch Fetch auf Versprechen und hat eine freundliche API:

 Fetch ('http://example.com/movies.json')
  .then (Funktion (Antwort) {
    return response.json ();
  })
  .then (Funktion (myjson) {
    console.log (json.stringify (myjson));
  });

Sowohl Axios als auch abrufen, decken alle Arten von HTTP -Anforderungen ab, sodass eines für eine beliebige Anzahl von Anforderungen geeignet ist. Schauen wir uns einen einfachen Vergleich an. Dies ist eine einfache JQuery -Demonstration mit der Star Wars -API.

<h1 id="Star-Wars-Filme"> Star Wars -Filme</h1>

$ (Dokument) .Ready (function () {
  $ .get ('https://swapi.com/api/films', Funktion (res) {
    list list = '';
    result.results.foreach (Funktion (r) {
      list = `

$ {r.title}

`; }); $ ('#films'). html (Liste); }); });

Im obigen Beispiel verwende ich $ .get, um auf die API zuzugreifen und zur Filmliste zurückzukehren. Ich verwende diese Daten dann, um eine Liste von Titeln als Li -Tag -Elemente zu generieren und sie alle in den UL -Block einzufügen.

Betrachten wir nun ein Beispiel mit Vue:

<div id="app">
  <h1 id="Star-Wars-Filme">Star Wars -Filme</h1>
  <ul><li v-for="film in films">{{film.title}}</li></ul>
</div>

const app = new Vue ({{{
  EL: '#App',
  Daten: {
    Filme: []
  },
  erstellt () {
    Fetch ('https://swapi.com/api/films')
      .then (res => res.json ())
      .then (res => {
        this.Films = result.Results;
      });
  }
})

Dieser beste Teil ist wahrscheinlich die Verwendung von V-für-Vorlagen. Beachten Sie, dass Vue das Layout nicht interessiert (zumindest JavaScript). Die Daten stammen aus der API. Es wird eine Variable zugewiesen. Das Layout ist dafür verantwortlich, es anzuzeigen. Ich habe es immer gehasst, HTML in meinem JavaScript zu verwenden, und während JQuery Lösungen für dieses Problem hat, macht es es zu einer natürlichen Wahl, es in Vue zu backen.

Ein vollständiges (wenn auch etwas triviales) Beispiel

Betrachten wir für ein tieferes Verständnis ein realistischeres Beispiel. Unsere Kunden haben uns gebeten, eine hochrangige AJAX-fähige Front-End-Suchschnittstelle für die Produkt-API zu erstellen. Die Funktionsliste enthält:

• Unterstützt die Filterung nach Namen und Produktkategorie
• Formularüberprüfung und verlangen, dass wir Suchbegriffe oder Kategorien bereitstellen
• Zeigen Sie beim Zugriff auf die API eine Nachricht an den Benutzer an und deaktivieren Sie die Schaltfläche Senden
• Nach Abschluss des Verarbeitungsberichts werden keine Produkte oder Übereinstimmungen angezeigt, die aufgeführt sind

Beginnen wir mit der Jquery -Version. Erstens ist HTML:

suchen Kategorie alle Essen Spiel suchen

Es gibt ein Formular mit unseren beiden Filtern und zwei Divs. Einer wird als temporärer Zustand bei der Suche oder Meldung eines Fehlers verwendet, und der andere wird verwendet, um das Ergebnis zu erzielen. Überprüfen Sie nun den Code.

 // ... (der Code ist zu lang, hier weggelassen) ...

Der Code erstellt zuerst eine Reihe von Variablen für jedes DOM -Projekt, das wir verwenden möchten - Formulare, Schaltflächen und Divs. Der Kern der Logik befindet sich im Klick -Handler der Schaltfläche. Wir überprüfen und wenn alles funktioniert, stellen Sie Anfragen an die API. Wenn es zurückgibt, machen wir das Ergebnis entweder das Ergebnis oder zeigen die Nachricht an.

Betrachten wir nun die Vue -Version. Beginnen wir wieder mit dem Layout:

<div id="app">
  <form>
    <p>
      <label for="search">suchen</label>
      <input type="text" v-model="search" id="search">
    </p>
    <p>
      <label for="category">Kategorie</label>
      <select v-model="category" id="category">
        <option value="">alle</option>
        <option value="Food">Essen</option>
        <option value="Games">Spiel</option>
      </select>
    </p>
    <button :disabled="searchBtnDisabled">suchen</button>
  </form>

  <div v-html="status"></div>
  <ul v-if="results"><li v-for="result in results">{{result.name}}</li></ul>
</div>

Ab oben gehören die Änderungen an:

• Wickeln Sie das Layout in eine DIV ein, damit Vue weiß, wo er arbeiten soll.
• Verwenden Sie V-Model für Formularfelder, um Daten einfach zu verarbeiten.
• Verwenden Sie @click.Prevent, um die Hauptsuchvorgänge zu verarbeiten.
• Verwendung: Deaktiviert, um den deaktivierten Status der Schaltfläche in die VUE -Anwendung an einen Wert zu binden (wir werden sehen, was es später tut).
• Der Statuswert unterscheidet sich geringfügig vom vorherigen Beispiel. Während JQuery über eine spezielle Methode verfügt, um Text in ein DOM-Projekt und eine andere Methode für HTML festzulegen, muss VUE VUE VUE verwenden, wenn HTML dem zu rendernden Wert zugewiesen wird. Wenn wir versuchen, {{Status}} mit HTML zu verwenden, wird das Tag entkommen.
• Schließlich wird die Iteration unter Verwendung von V-wenn mit V-für konditionell verarbeitet.

Schauen wir uns nun den Code an.

 // ... (der Code ist zu lang, hier weggelassen) ...

Der erste erwähnte Codeblock ist eine Reihe von Datenfeldern. Einige Karten zu Formfeldern, während andere Ergebnisse, Statusnachrichten usw. zuordnen. Die Methode für die SearchProducts verarbeitet die meisten der gleichen Dinge wie in der Jquery -Version, aber im Allgemeinen gibt es viel weniger Code, das direkt an die DOM gebunden ist. Selbst wenn wir wissen, dass die Ergebnisse in einer ungeordneten Liste aufgeführt sind, kümmert sich der Code selbst nicht darum. Es weist einfach den Wert zu, und das Tag ist dafür verantwortlich, ihn zu rendern. Insgesamt konzentriert sich JavaScript Code mehr auf Logik als auf JQuery Code, der eine bessere Trennung von Bedenken "fühlt".

JQuery ist weg, Vue dauert für immer!

Ok, das ist ein bisschen übertrieben. Wie ich am Anfang sagte, wenn Sie JQuery verwenden möchten und es für Sie funktioniert, denke ich absolut nicht, dass Sie etwas ändern sollten.

Ich kann jedoch sagen, dass Vue für Leute, die es gewohnt sind, JQuery zu verwenden, ein guter "nächster Schritt" anfühlt. Vue unterstützt komplexe Anwendungen und verfügt über leistungsstarke Befehlszeilen-Tools für Gerüst- und Bauprojekte. Aber für einfachere Aufgaben ist Vue zu meinem Tool als gute "moderne jQuery" -Analternative geworden!

Das obige ist der detaillierte Inhalt vonMachen Sie den Wechsel von JQuery zu Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!