Als jemand, der jQuery seit *vielen* Jahren verwendet hat und kürzlich zu Vue konvertiert ist, dachte ich, es wäre ein interessantes Thema, den Migrationsprozess von der Arbeit mit dem einen zum anderen zu diskutieren.
Bevor ich beginne, möchte ich eines ganz klarstellen: Ich sage niemandem, er solle aufhören, jQuery zu verwenden. Das ist in letzter Zeit ziemlich angesagt, und ehrlich gesagt, habe ich vor ein paar Jahren selbst etwas Ähnliches geschrieben („Wie ich jQuery (nicht) benutze“). Wenn Sie mit jQuery Dinge erledigen und Ihre Endbenutzer Ihre Website erfolgreich nutzen, dann umso besser für Sie. Verwenden Sie weiter, was für Sie funktioniert.
Diese Anleitung richtet sich eher an Leute, die jahrelange Erfahrung mit jQuery haben und sehen möchten, wie Dinge mit Vue erledigt werden können. In diesem Sinne werde ich mich auf das konzentrieren, was ich als „Kernanwendungsfälle“ von jQuery betrachte. Ich werde nicht jede einzelne mögliche Funktion abdecken, sondern stattdessen einen Ansatz verfolgen: „Ich habe [X] oft mit jQuery gemacht“, der für Leute, die erwägen, Vue zu lernen, nachvollziehbarer sein könnte. (Nebenbei bemerkt: Wie ich meine Beispiele schreibe, ist nur *eine* Methode, eine Aufgabe auszuführen. Sowohl jQuery als auch Vue bieten mehrere Möglichkeiten, dasselbe Ziel zu erreichen, und das ist großartig!)
In diesem Sinne betrachten wir einige übergeordnete Dinge, zu denen wir uns möglicherweise an jQuery wenden würden
- Etwas im DOM finden (mit der Idee, später etwas damit zu tun)
- Etwas im DOM ändern (z. B. den Text eines Absatzes oder die Klasse eines Buttons)
- Formularwerte lesen und setzen
- Formularvalidierung (was im Grunde eine Kombination der obigen Punkte ist)
- Ajax-Aufrufe und Verarbeitung der Ergebnisse
- Ereignisbehandlung (z. B. bei Button-Klick etwas tun)
- Stile eines Elements messen oder ändern
jQuery kann natürlich noch mehr, aber diese Anwendungen decken (zumindest meiner Meinung nach) die häufigsten Anwendungsfälle ab. Beachten Sie auch, dass es in der obigen Liste viele Überschneidungen gibt. Sollen wir also mit einem einfachen Eins-zu-eins-Vergleich beginnen? Nein, nicht so schnell. Beginnen wir mit den Hauptunterschieden in Vue-Anwendungen.
Definieren, wo Vue „funktioniert“
Wenn wir jQuery auf eine Seite einbinden, fügen wir im Grunde ein Schweizer Taschenmesser zu unserem JavaScript-Code hinzu, um gängige Webentwicklungsaufgaben zu bewältigen. Wir können jede der Anwendungsfälle, die wir behandeln werden, in jeder Reihenfolge ausführen, wie wir es für richtig halten. Zum Beispiel kann ein Kunde heute eine Formularvalidierung verlangen und in einem Monat eine Ajax-basierte Suchformular im Header der Website.
Vue hat in dieser Hinsicht einen signifikanten Unterschied. Wenn wir mit einem Vue-Projekt beginnen, definieren wir zunächst einen „Bereich“ im DOM, auf den es sich konzentrieren soll. Betrachten wir also eine einfache Prototyp-Webseite
<body>
<header>
Fancy header stuff here
</header>
<div id="sidebar">
Some sidebar doohicky here
</div>
<main>
<p>
Main site content here, super important stuff...
</p>
<div id="loginForm">
A login form of course
</div>
</main>
</body>In einer typischen jQuery-Anwendung schreiben wir vielleicht Code, der mit dem Header, der Seitenleiste und dem Anmeldeformular oder Ähnlichem arbeitet. Kein großer Aufwand
$(document).ready(function() {
$('header') // something...
$('#sidebar') // something...
$('#loginForm') // something...
});In einer Vue-Anwendung geben wir zuerst an, mit welchem Bereich wir arbeiten. Stellen Sie sich vor, der Kunde hätte zuerst verlangt, dem loginForm-Element eine Validierung hinzuzufügen. Unser Vue-Code würde dies angeben
new Vue({
el: '#loginForm',
// Code here...
});Das bedeutet, dass wir typischerweise eine *zweite* Vue-Anwendung hinzufügen würden, wenn der Kunde später entscheidet, etwas zur Seitenleiste hinzuzufügen
new Vue({
el:'#loginForm',
// Code here...
});
new Vue({
el:'#sideBar',
// Code here...
});Ist das schlimm? Überhaupt nicht. Sofort erhalten wir den Vorteil der Kapselung. Wenn wir versehentlich eine Variable mit einem generischen Namen verwenden (das haben wir alle schon getan), müssen wir uns keine Sorgen über Konflikte mit anderen Teilen Ihres Codes machen. Später, wenn der Kunde eine weitere Anfrage hinzufügt, gibt uns die Trennung unserer eindeutigen, logischen Vue-Code-Sätze ein gutes Gefühl, dass sich die Dinge nicht gegenseitig behindern werden.
Also ja, eine gute Sache. Aber es hat mich absolut innehalten lassen, als ich Vue zum ersten Mal benutzte. Nun zu unseren Anwendungsfällen.
Dinge im DOM finden
Ein weiterer Aspekt, den Sie interessant oder beängstigend finden werden, ist, wie man „Dinge im DOM findet“. Das ist etwas vage, aber betrachten wir ein konkretes Beispiel. Wir haben einen Button, und wenn er geklickt wird, tun wir etwas. Hier ist ein verkürztes Beispiel, wie das aussehen könnte
<button id="myButton">Click Me!</button>
<!-- More stuff... -->
<script>
$(document).ready(function() {
$('#myButton').click(function() {
alert(1);
});
});
</script>Vergleichen wir das nun damit, wie es mit Vue gemacht werden kann
<div id="app">
<button v-on:click="doSomething">Click Me!</button>
</div>
<script>
const app = new Vue({
el:'#app',
methods: {
doSomething: function() {
alert(1);
}
}
});
</script>Die Vue-Anwendung ist etwas ausführlicher, aber beachten Sie, wie die Markup einen direkten Zusammenhang zwischen der Aktion („click“) und der Funktion, die aufgerufen wird, hat. Der Vue-Code hat keine Bindung zurück zum DOM (außer dem el-Teil, wo wir definieren, wo er funktionieren soll). Dies war leicht eines der Dinge, die mich am meisten von Vue überzeugt haben – **es fühlt sich einfacher an zu verstehen, was passiert.** Außerdem musste ich mich nicht so sehr um die ID-Werte und Selektoren kümmern. Wenn ich die Klasse oder ID des Buttons ändere, muss ich nicht zurück in meinen Code gehen und mich darum kümmern, Selektoren zu aktualisieren.
Betrachten wir ein weiteres Beispiel: Text im DOM finden und ändern. Stellen Sie sich vor, der Button ändert nach dem Klicken den Text eines anderen Teils des DOM.
<button id="myButton">Click Me!</button>
<span id="result"></span>
<!-- More stuff... -->
<script>
$(document).ready(function() {
$('#myButton').click(function() {
$('#result').text('You clicked me, thanks!');
});
});
</script>Ich habe einen neuen Span hinzugefügt und jetzt verwenden wir beim Klicken auf den Button einen weiteren Selektor, um ihn zu finden, und eine jQuery-Hilfsmethode, um den Text darin zu ändern. Betrachten wir nun die Vue-Version
<div id="app">
<button v-on:click="doSomething">Click Me!</button>
<!-- On click, change text in this span -->
<span>{{resultText}}</span>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
resultText: ''
},
methods: {
doSomething: function() {
this.resultText = 'You clicked me, thanks!';
}
}
});
</script>In diesem Beispiel verwenden wir die Vorlagensprache von Vue (die hervorgehobene Zeile), um anzugeben, dass wir eine Variable innerhalb des Spans rendern möchten, in diesem Fall resultText. Wenn nun der Button geklickt wird, ändern wir diesen Wert, und der innere Text des Spans wird automatisch geändert.
Nebenbei bemerkt: Vue unterstützt eine Kurzform für das Attribut v-on, sodass der Button im Beispiel auch mit @click="doSomething" geschrieben werden könnte.
Formularvariablen lesen und schreiben
Die Arbeit mit Formularen ist wahrscheinlich eines der häufigsten – und nützlichsten – Dinge, die wir mit JavaScript tun können. Schon vor JavaScript war der Großteil meiner frühen „Webentwicklung“ das Schreiben von Perl-Skripten zur Verarbeitung von Formularübermittlungen. Als primärer Weg zur Annahme von Benutzereingaben waren Formulare schon immer entscheidend für das Web, und das wird wahrscheinlich noch eine Weile so bleiben. Betrachten wir ein einfaches jQuery-Beispiel zum Lesen einiger Formularfelder und zum Setzen eines anderen
<form>
<input type="number" id="first"> +
<input type="number" id="second"> =
<input type="number" id="sum">
<button id="sumButton">Sum</button>
</form>
<script>
$(document).ready(function() {
let $first = $('#first');
let $second = $('#second');
let $sum = $('#sum');
let $button = $('#sumButton');
$button.on('click', function(e) {
e.preventDefault();
let total = parseInt($first.val(),10) + parseInt($second.val(),10);
$sum.val(total);
});
});
</script>Dieser Code demonstriert, wie jQuery sowohl lesen als auch schreiben kann, über die val()-Methode. Wir holen uns vier Elemente aus dem DOM (alle drei Formularfelder und den Button) und verwenden einfache Mathematik, um ein Ergebnis zu generieren. Betrachten wir nun die Vue-Version
<form id="myForm">
<input type="number" v-model.number="first"> +
<input type="number" v-model.number="second"> =
<input type="number" v-model="sum">
<button @click.prevent="doSum">Sum</button>
</form>
<script>
new Vue({
el: '#myForm',
data: {
first: 0,
second: 0,
sum: 0
},
methods: {
doSum: function() {
this.sum = this.first + this.second;
}
}
})
</script>Dies führt einige interessante Vue-Abkürzungen ein. Erstens ist v-model die Art und Weise, wie Vue eine bidirektionale Datenbindung zwischen Werten im DOM und in JavaScript erstellt. Die Variablen im data-Block werden automatisch mit den Formularfeldern synchronisiert. Ändern Sie die Daten, und das Formular aktualisiert sich. Ändern Sie das Formular, und die Daten aktualisieren sich. .number ist ein Flag für Vue, um die standardmäßigen Zeichenfolgenwerte von Formularfeldern als Zahlen zu behandeln. Wenn wir dies weglassen und Additionen wie hier durchführen, sehen wir Zeichenfolgenadditionen und keine Arithmetik. Ich arbeite seit fast einem Jahrhundert mit JavaScript und mache das immer noch falsch.
Ein weiterer netter „Trick“ ist @click.prevent. Zuerst definiert @click einen Click-Handler für den Button, dann verhindert der Teil .prevent das Standardverhalten des Browsers beim Absenden des Formulars (entspricht event.preventDefault()).
Der letzte Teil ist die Hinzufügung der Methode doSum, die an diesen Button gebunden ist. Beachten Sie, dass sie einfach mit den Datenvariablen arbeitet (die Vue im this-Scope verfügbar macht).
Auch wenn dies größtenteils mein persönliches Gefühl ist, liebe ich die fehlenden Query-Selektoren im Skript, wenn ich in Vue schreibe, und wie der HTML viel klarer darüber ist, was er tut.
Schließlich könnten wir den Button sogar ganz weglassen
<form id="myForm">
<input type="number" v-model.number="first"> +
<input type="number" v-model.number="second"> =
<input type="number" v-model="sum">
</form>
<script>
new Vue({
el: '#myForm',
data: {
first: 0,
second: 0
},
computed: {
sum: function() {
return this.first + this.second;
}
}
})
</script>Eine der cooleren Funktionen von Vue sind berechnete Eigenschaften (computed properties). Das sind virtuelle Werte, die erkennen, wenn ihre abgeleiteten Werte aktualisiert werden. Im obigen Code wird die Summe aktualisiert, sobald sich eines der beiden Formularfelder ändert. Dies funktioniert auch außerhalb von Formularfeldern. Wir könnten die Summe wie folgt rendern
The total is {{sum}}.Arbeiten mit Ajax
Es ist lobenswert, wie einfach jQuery die Verwendung von Ajax gemacht hat. Tatsächlich kann ich sagen, dass ich Ajax „auf die reine“ Art wahrscheinlich nur ein einziges Mal gemacht habe. (Wenn Sie neugierig sind, können Sie sich die Spezifikation für XMLHttpRequest ansehen und wahrscheinlich froh sein, dass Sie es vermieden haben.) jQuerys einfache $.get(...)-Methode funktionierte in einer großen Anzahl von Fällen, und wenn etwas Komplexeres benötigt wurde, machte $.ajax() es ebenfalls einfach. Eine weitere Sache, die jQuery gut konnte, war die Art und Weise, wie es JSONP-Anfragen verarbeitet. Obwohl heute meist unnötig mit CORS, war JSONP ein Weg, Anfragen an APIs auf verschiedenen Domains zu stellen.
Was macht Vue also, um Ajax einfacher zu machen? Nichts!
Okay, das klingt beängstigend, ist es aber eigentlich nicht. Es gibt viele Optionen für die Arbeit mit HTTP-Anfragen, und Vue.js hat einen agnostischeren Weg gewählt, indem es uns Entwicklern überlässt, wie wir damit umgehen wollen. Ja, das bedeutet etwas mehr Arbeit, aber wir haben einige großartige Optionen.
Die erste, die man in Betracht ziehen sollte, ist Axios. Dies ist eine Promise-basierte Bibliothek, die in der Vue-Community sehr beliebt ist. Hier ist ein einfaches Beispiel in Aktion (aus ihrer README-Datei entnommen)
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});Axios unterstützt natürlich POST-Anfragen und ermöglicht uns die Angabe von Headern unter vielen anderen Optionen.
Obwohl Axios bei Vue-Entwicklern sehr beliebt ist, hat es mich nicht wirklich angesprochen. (Zumindest noch nicht.) Stattdessen war ich viel mehr ein Fan von Fetch. Fetch ist *keine* externe Bibliothek, sondern eine standardmäßige Web-Methode zur Durchführung von HTTP-Anfragen. Fetch hat eine sehr gute Unterstützung in etwa 90% der Browser, was jedoch bedeutet, dass es nicht *vollständig* sicher zu verwenden ist, aber wir können bei Bedarf immer ein Polyfill verwenden.
Obwohl dies vollständig außerhalb des Rahmens dessen liegt, was wir hier besprechen, hat Kingsley Silas einen ausgezeichneten Leitfaden zur Verwendung von Axios und Fetch mit React geschrieben.
Wie Axios ist Fetch Promise-basiert und hat eine benutzerfreundliche API
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});Sowohl Axios als auch Fetch decken alle Arten von HTTP-Anfragen ab, sodass beide für eine beliebige Anzahl von Anforderungen geeignet sind. Betrachten wir einen einfachen Vergleich. Hier ist eine einfache jQuery-Demo, die die Star Wars API verwendet.
<h1>Star Wars Films</h1>
<ul id="films">
</ul>
<script>
$(document).ready(function() {
$.get('https://swapi.com/api/films', function(res) {
let list = '';
res.results.forEach(function(r) {
list += `<li>${r.title}</li>`;
});
$('#films').html(list);
});
});
</script>Im obigen Beispiel verwende ich $.get, um die API abzurufen und eine Liste von Filmen zurückzugeben. Dann generiere ich eine Liste von Titeln als li-Tag-Elemente mit diesen Daten und füge alles in einen ul-Block ein.
Betrachten wir nun ein Beispiel dafür mit Vue
<div id="app">
<h1>Star Wars Films</h1>
<ul>
<li v-for="film in films">{{film.title}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
films: []
},
created() {
fetch('https://swapi.com/api/films')
.then(res => res.json())
.then(res => {
this.films = res.results;
});
}
})
</script>Wahrscheinlich ist der beste Teil davon die Verwendung der v-for-Vorlage. Beachten Sie, wie Vue sich nicht um das Layout kümmert (naja, zumindest das JavaScript). Die Daten werden von der API abgerufen. Sie werden einer Variablen zugewiesen. Das Layout kümmert sich um die Anzeige. Ich habe es immer gehasst, HTML in meinem JavaScript zu haben, und obwohl es dafür Lösungen mit jQuery gibt, macht es die in Vue integrierte Natur zu einer natürlichen Passform.
Ein vollständiges (wenn auch etwas triviales) Beispiel
Um es auf den Punkt zu bringen, betrachten wir ein praxisnäheres Beispiel. Unser Kunde hat uns gebeten, eine ausgefallene Ajax-fähige Frontend-Suchoberfläche für eine Produkt-API zu erstellen. Die Feature-Liste umfasst
- Unterstützung der Filterung nach Name und Produktkategorie
- Formularvalidierung, so dass wir einen Suchbegriff oder eine Kategorie angeben müssen
- Während die API abgefragt wird, zeigen Sie dem Benutzer eine Meldung an und deaktivieren Sie den Submit-Button
- Behandeln Sie nach Abschluss die Meldung, dass keine Produkte angezeigt wurden, oder listen Sie die Treffer auf
Beginnen wir mit der jQuery-Version. Zuerst das HTML
<form>
<p>
<label for="search">Search</label>
<input type="search" id="search">
</p>
<p>
<label for="category">Category</label>
<select id="category">
<option></option>
<option>Food</option>
<option>Games</option>
</select>
</p>
<button id="searchBtn">Search</button>
</form>
<div id="status"></div>
<div id="results"></div>Es gibt ein Formular mit unseren beiden Filtern und zwei Divs. Einer dient als temporärer Status beim Suchen oder Melden von Fehlern, und einer dient zum Rendern von Ergebnissen. Nun schauen wir uns den Code an.
const productAPI = 'https://wt-c2bde7d7dfc8623f121b0eb5a7102930-0.sandbox.auth0-extend.com/productSearch';
$(document).ready(() => {
let $search = $('#search');
let $category = $('#category');
let $searchBtn = $('#searchBtn');
let $status = $('#status');
let $results = $('#results');
$searchBtn.on('click', e => {
e.preventDefault();
// First clear previous stuff
$status.html('');
$results.html('');
// OK, now validate form
let term = $search.val();
let category = $category.val();
if(term === '' && category === '') {
$status.html('You must enter a term or select a category.');
return false;
}
$searchBtn.attr('disabled','disabled');
$status.html('Searching - please stand by...');
$.post(productAPI, { name:term, category:category }, body => {
$searchBtn.removeAttr('disabled');
$status.html('');
if(body.results.length === 0) {
$results.html('<p>Sorry, no results!</p>');
return;
}
let result = '<ul>';
body.results.forEach(r => {
result += `<li>${r.name}</li>`
});
result += '</ul>';
$results.html(result);
});
});
});Der Code beginnt mit der Erstellung einer Reihe von Variablen für jedes der DOM-Elemente, mit denen wir arbeiten möchten – die Formularfelder, den Button und die Divs. Der Kern der Logik liegt im Klick-Handler für den Button. Wir führen die Validierung durch und, wenn alles in Ordnung ist, eine POST-Anfrage an die API. Wenn diese zurückkehrt, rendern wir entweder die Ergebnisse oder zeigen eine Meldung an, wenn nichts übereinstimmt.
Sie können eine vollständige Version dieser Demo über das untenstehende CodePen verwenden.
Siehe den Pen
jQuery Full von Raymond Camden (@cfjedimaster)
auf CodePen.
Betrachten wir nun die Vue-Version. Beginnen wir wieder mit dem Layout
<div id="app">
<form>
<p>
<label for="search">Search</label>
<input type="search" v-model="search">
</p>
<p>
<label for="category">Category</label>
<select v-model="category">
<option></option>
<option>Food</option>
<option>Games</option>
</select>
</p>
<button @click.prevent="searchProducts" :disabled="searchBtnDisabled">Search</button>
</form>
<div v-html="status"></div>
<ul v-if="results">
<li v-for="result in results">{{result.name}}</li>
</ul>
</div>Von oben sind die Änderungen:
- Umschließen des Layouts in einem Div, das verwendet werden kann, damit Vue weiß, wo es arbeiten soll.
- Verwendung von
v-modelfür die Formularfelder, um die Arbeit mit den Daten zu erleichtern. - Verwendung von
@click.preventzur Handhabung der Hauptsuchoperation. - Verwendung von
:disabled, um zu binden, ob der Button deaktiviert ist oder nicht, an einen Wert in der Vue-Anwendung (das sehen wir gleich in Aktion). - Der Statuswert ist etwas anders als in früheren Beispielen. Während jQuery eine spezielle Methode zum Setzen von Text in einem DOM-Element und eine weitere für HTML hat, erfordert Vue die Verwendung von
v-html, wenn HTML einem Wert zugewiesen wird, der gerendert werden soll. Wenn wir versuchen würden,{{status}}mit HTML zu verwenden, würden die Tags maskiert werden. - Schließlich die Verwendung von
v-ifzum bedingten Rendern einer Ergebnisliste zusammen mitv-forzur Handhabung der Iteration.
Schauen wir uns nun den Code an.
const productAPI = 'https://wt-c2bde7d7dfc8623f121b0eb5a7102930-0.sandbox.auth0-extend.com/productSearch';
const app = new Vue({
el: '#app',
data: {
search: '',
category: '',
status: '',
results: null,
searchBtnDisabled: false
},
methods: {
searchProducts:function() {
this.results = null;
this.status = '';
if(this.search === '' && this.category === '') {
this.status = 'You must enter a term or select a category.';
return;
}
this.searchBtnDisabled = true;
this.status = 'Searching - please stand by...';
fetch(productAPI, {
method: 'POST',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify({name:this.search,category:this.category})
}).then(res => res.json())
.then(res => {
this.status = '';
this.searchBtnDisabled = false;
this.results = res.results;
if(this.results.length === 0) this.status = '<p>Sorry, no results!</p>';
});
}
}
});Der erste Block, der hervorzuheben ist, ist die Menge der data-Felder. Einige entsprechen Formularfeldern, andere Ergebnissen, Statusmeldungen und Ähnlichem. Die Methode searchProducts erledigt vieles, was auch die jQuery-Version macht, aber im Allgemeinen gibt es viel weniger Code, der direkt an das DOM gebunden ist. Zum Beispiel macht sich der Code keine Gedanken über das Layout, obwohl wir wissen, dass die Ergebnisse in einer ungeordneten Liste aufgeführt sind. Er weist einfach den Wert zu und das Markup kümmert sich um das Rendern. Insgesamt ist der JavaScript-Code stärker auf die Logik ausgerichtet, im Vergleich zum jQuery-Code, der sich nach einer viel schöneren Trennung der Belange anfühlt.
Wie zuvor habe ich ein CodePen für Sie, um dies selbst auszuprobieren
Siehe den Pen
Vue Full von Raymond Camden (@cfjedimaster)
auf CodePen.
Tod für jQuery! Lang lebe Vue!
Okay, das ist ein bisschen übertrieben. Wie ich anfangs sagte, bin ich absolut der Meinung, dass Sie nichts ändern sollten, wenn Sie gerne mit jQuery arbeiten und es für Sie funktioniert.
Ich kann jedoch sagen, dass sich Vue wie ein großartiger „nächster Schritt“ für Leute anfühlt, die an die Arbeit mit jQuery gewöhnt sind. Vue unterstützt komplexe Anwendungen und verfügt über ein großartiges Kommandozeilentool zum Erstellen und Bauen von Projekten. Aber für einfachere Aufgaben funktioniert Vue als großartiger „moderner jQuery“-Ersatz, der zu meinem Werkzeug der Wahl für die Entwicklung geworden ist!
Für eine andere Perspektive zur Verwendung von Vue anstelle von jQuery, lesen Sie Sarah Drasners „jQuery mit Vue.js ersetzen: Kein Build-Schritt notwendig“, da sie eine Reihe weiterer äußerst hilfreicher Beispiele enthält.
Zweiter Artikel, den ich heute von Ihnen lese, Raymond, genau auf den Punkt wie immer. Ich habe den Wechsel Anfang letzten Jahres vollzogen und werde nie zurückblicken!
Hallo,
Wie werden dynamisch hinzugefügte Elemente im DOM in Vue behandelt? Sagen wir zum Beispiel in jQuery,
$(‘button’,{‘onclick’:’callfunction()’}). append.()
Können Sie bitte erklären und erläutern, wie es in Szenarien nützlich sein kann, in denen wir keine Kontrolle über das HTML-Template haben? In der jQuery-Welt können wir das gerenderte DOM parsen und damit arbeiten. Bietet Vue eine solche Funktion?
Hallo Raymond,
Was für ein großartiger Artikel, der zeigt, wie Vue besser als jQuery ist. Ich habe genau so etwas gesucht. Jetzt werde ich Vue.js auf jeden Fall ausprobieren.
Danke, Mann.
Der direkte Vergleich von Vue mit jQuery ist wie der Vergleich von Äpfeln mit Orangen. Und das ergibt keinen Sinn.
Zwei verschiedene Dinge sollten nicht direkt miteinander verglichen werden. Wenn Sie wirklich vergleichen möchten, geben Sie zumindest an, in welcher Hinsicht Sie vergleichen. So etwa:
Wenn es um DOM-Traversal und -Manipulation geht, ist jQuery besser als Vue.
Wenn es darum geht, Apps zu erstellen, ist Vue besser als jQuery.
Toller Artikel..!!
Ich habe seit 2-3 Monaten über einen Wechsel nachgedacht und dieser Artikel.
Endlich beschlossen zu wechseln :-)
Toller Artikel und wirklich nützliche Vergleiche hier, werde ich definitiv ausprobieren!
Danke!
Der deklarative Ansatz von Vue macht ihn definitiv zukunftssicher. Vielen Dank für einen ausgezeichneten Übergangsartikel, den ich jemandem mit jQuery-Kenntnissen empfehlen würde!
Im Abschnitt „Formularvariablen lesen und schreiben“, warum sieht Ihr HTML mit einem Pluszeichen (+) und einem Gleichheitszeichen (=) nach den Eingabeelementen seltsam aus? Da ich nichts über Vue weiß, dachte ich, das sei Vue-Syntax. Aber danke für einen großartigen Artikel, meine erste Einführung in Vue (ich kenne React gut genug).
Das ist nicht Vue, es stellt nur die Addition im HTML dar. Stellen Sie sich vor, wie es auf der Seite gerendert würde: „Eingabe (erste) plus Eingabe (zweite) gleich Eingabe (Summe)“.
Phonegap verwendet dies bereits in vielen Projektvorlagen… Also können wir es jetzt in allen Web- und App-Projekten verwenden. Tolle Zukunft in Code, weniger Frameworks und produktiverer Code
Die Aussage „In einer typischen jQuery-Anwendung…“ ist meiner Meinung nach seltsam, da jQuery nicht zur Erstellung von Anwendungen entwickelt wurde.
Wie Sie erwähnten, ist jQuery ein Schweizer Taschenmesser für JavaScript-Code. Es vereinfacht, wie wir JavaScript-Code schreiben. Das ist alles.
Am Ende des Tages ist jQuery eine Bibliothek zur Vereinfachung von JavaScript und Vue ist eine Bibliothek zur Erstellung von Apps. Das Argument, welches besser ist, ist nicht sehr aussagekräftig, da es sich um zwei verschiedene Dinge handelt und jedes seine Vorteile und Verwendungszwecke hat.
Es wäre wahrscheinlich besser gewesen zu sagen „hier ist, wie Vue bedeutet, dass Sie jQuery nicht verwenden müssen“.
jQuery hat seine Zeit für neuere Projekte hinter sich, da dedizierte Bibliotheken oder native APIs es ersetzen.
Vue ist besser?! Oh mein Gott!
In all den hier präsentierten Beispielen mit jQuery benötigen wir weniger Code, um dies zu erreichen, der Code ist einfacher und sauberer mit geringeren Fehlerwahrscheinlichkeiten bei fehlenden Klammern.
Die Probleme mit Variablen existieren nicht, wenn Sie sie im Geltungsbereich definieren, in dem Sie arbeiten.
Dies ist vollständig ein Artikel vom Typ „Es funktioniert besser für mich“, wie ich hoffe, dass ich es klar gemacht habe. LOC ist meiner Meinung nach nicht immer ein Maß dafür, wie einfach etwas ist. Außerdem habe ich das Gefühl, dass {{foo}} in meinem HTML besser ist, als HTML in JavaScript zu schreiben und jQuery .html()-ähnliche Dinge zu verwenden.
Schulterzucken – verwenden Sie, was für Sie am besten funktioniert! :)
Hallo! Ich verstehe nicht, was Sie mit
„Dies war leicht eines der Dinge, die mich am meisten von Vue überzeugt haben – es fühlt sich einfacher an zu verstehen, was passiert. […] Wenn ich die Klasse oder ID des Buttons ändere, muss ich nicht zurück in meinen Code gehen und mich darum kümmern, Selektoren zu aktualisieren“
Wenn ich den ID-Wert ändere (in Ihrem Beispiel „app“), muss ich ihn dann nicht auch im Vue-Code ändern, wo steht
el: ‘#app’
?
Ja, aber Sie haben diese ID-Korrelation nur einmal pro Vue-Instanz, nicht mehrmals, wie Sie es mit der „jQuery-Methode“ tun würden
@SB bitte erklären Sie, was die jQuery-Methode ist? Wenn ich #app mehrmals benötige, deklariere ich var myApp = $(„#app“); und verwende die Variable – die im Falle einer Aktualisierung nur an einer Stelle geändert werden muss.
Sie müssen also zum HTML hinzufügen, damit Dinge funktionieren? Das wird eine ziemliche Plackerei, um es in Ihrem durchschnittlichen CMS zu implementieren. Dann bevorzuge ich jQuery. Viel sauberer.
Der Artikel ist gut, aber die Prämisse, dass jQuery im Vergleich zu Vue irgendwie schlecht ist, ist völlig lächerlich. Ich nehme an, Sie brauchen Kontroverse für Klick-Conversions, aber wirklich, das gehört nicht in die Programmierwelt. Insgesamt scheitert dieser Artikel in dieser Hinsicht. Bitte spülen Sie die Toilette dieser Bibliothek im Vergleich zu jener Bibliothek!
Nicht weit über den Titel hinausgekommen, oder?
Hallo,
Ich bin ein Anfänger, der eine Quiz-Website für meine Schulklassen entwickelt. Ich benutze Symfony und habe derzeit eine Navbar, die Bootstrap verwendet (mit jQuery – es ist das Einzige auf der ganzen Website, das es verwendet). Ich bin bestrebt, neue Ideen anzunehmen, und ich fragte mich, ob es sinnvoll ist, eine Vue-Navbar mit (bootstrapvue) zu entwickeln? Ich möchte nicht zu einer vollständigen SPA wechseln, da ich die Einfachheit des Routings von Symfony mag. Ich hoffe, meine Frage ergibt Sinn, ich suche nur nach Meinungen.
Vue.js wird als progressives Framework beschrieben, was bedeutet, dass es in Teile einer bestehenden Anwendung integriert werden kann. Es kann ein Werkzeug für komplette SPAs sein, muss es aber nicht.
data sollte eine Funktion sein, die ein Objekt zurückgibt, anstatt ein Objekt.
data *kann* eine Funktion sein. Ich habe versucht, es einfach zu halten. :)
Tremendöser Artikel und ausgezeichnete Beispiele. Danke!
Wie wäre es mit einem Artikel für jQuery zu React?
Ja Ian, der Vergleich eines Frontend-Frameworks mit einer Frontend-Bibliothek ist wie der Vergleich von Äpfeln mit Birnen und macht keinen Sinn.
Schöner und klarer Artikel. Interessant wäre auch ein Vergleich mit einem dritten Akteur: reinem JavaScript.
Mein Zweifel ist oft nicht, ob dieses oder jenes Framework besser ist, sondern ob ich es wirklich brauche.
Das Hinzufügen eines Frameworks ist immer eine Überlastung und eine Verlangsamung der Website, und in vielen Fällen habe ich das Gefühl, dass ich mit Kanonen auf Spatzen schieße.
Das ist ein sehr valider Punkt, und viele meiner Beispiele sind *wirklich* klein, aber ich habe versucht, die Dinge für den Artikel kurz zu halten. Ich denke jedoch, dass die Annahme „man braucht immer ein Framework“ falsch ist. In den meisten Projekten, an denen ich gearbeitet habe, wuchs die Komplexität mit der Zeit und schrumpfte selten. Die minimierte Version von Vue ist außerdem wirklich klein. :)
Toller Artikel!
Es ist höchste Zeit, von jQuery zu Vue.js zu wechseln! :)
Ich habe gerade eine massive Umschreibung vorgenommen. Über ein Jahr hatte ich kleine Teile verschoben. Nach der Umschreibung habe ich über 36.000 Zeilen migriert. Es ist so viel schöner, Node-Module mit einem Build-System zu verwenden und nicht die Seite bei jedem Seitenwechsel neu laden zu müssen. Es ist ein viel schönerer Workflow und eine viel schönere Benutzererfahrung.
jQuery 4 kommt bald und wird die Sizzle-Engine deprecaten und unter anderem QuerySelectorAll unterstützen. Jquery ist nicht auf dem Weg.
Vue sieht großartig aus, und ich mag, wie dieser Artikel präsentiert wird. Ich habe ihn als Lesezeichen gespeichert und werde Vue vielleicht eines Tages ausprobieren.
Für meine aktuellen Bedürfnisse, als mittelstufiger Frontend-Profi, der funktionale, reaktionsfähige Websites mit schöner Präsentation und Schnittstellenfunktionen erstellt, ist Jquery immer noch meine bevorzugte Bibliothek.
Jquery ist zuverlässig. Es beschwert sich nicht, es bricht nicht leicht, es funktioniert einfach.
Ich bin natürlich von Jquery-Animationen abgewichen und umfasse vollständig CSS-Animationen. Aber für DOM-Manipulationen, einschließlich der Verkettung von Ajax-Ereignissen mit Schnittstellenereignissen, ist Jquery immer noch eine fantastische Bibliothek.