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:

$ (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:

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> Star Wars -Filme</h1>

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

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>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:

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!