Vue.js-Anleitung

Vuejs ist ein sehr einfach zu verwendendes Javascript-Framework, leider gibt es  keine  echte vue.js-Anleitung

 

Mit dem heutigen Artikel werden wir versuchen, diese Lücke gemeinsam zu füllen.

Der Leitfaden wird aus Platzgründen gut gegliedert sein, jedoch können wir einige Konzepte nicht vollständig vertiefen. Stellen Sie jedoch sicher, dass Sie die gesuchten Antworten finden und eine solide Grundlage haben.

Inhaltsverzeichnis

  • Was ist Vue.js
  • Warum Vue.js verwenden?
  • Erste Vue.js-App
    • Interpolation
    • Modell v
    • v-if vs v-show
    • Die for v-for Schleife
    • v-bind
    • Modelle und Komponenten
  • Schlussfolgerungen

Was ist Vue.js

Vue.js ist ein von Evan You entwickeltes Javascript-Framework    . Es ist ein  definitiv progressives Framework  und hat meiner Meinung nach viele weitere Vorteile gegenüber dem berühmten   Angular   und   React  , um nur einige zu nennen.

Obwohl es tatsächlich nicht erlaubt, die unzähligen Operationen durchzuführen, die mit einem monolithischen Framework wie Angular durchgeführt werden können, enthält Vue.js in sich ein ganzes Ökosystem, das sich perfekt an jede Art von Frontend-Anwendung anpassen kann.

Es gibt mehrere Stärken, darunter zweifellos Vielseitigkeit, Benutzerfreundlichkeit und vor allem Installation. Darüber hinaus ist Vue.js ein minimal-invasives Framework, das sowohl alleine als auch mit weit verbreiteten Anwendungen wie jQuery   und   Laravel sehr gut funktioniert    .

Vue.js erfreut sich heute bei Frontend-Entwicklern großer Beliebtheit, auch dank einer lebendigen Support-Community, die von Ihnen geleitet wird. Wie bereits erwähnt, ist Vue.js tatsächlich Teil eines echten Ökosystems, das sich um den Kern des Frameworks dreht.

Tatsächlich können Sie mit Vue auch nützliche Komponenten wie die CLI-Installation und den Komponententest erhalten. Es handelt sich um Vue.js-Addons, die von derselben Community wie das Framework entwickelt wurden und daher als sehr zuverlässig gelten.

Warum Vue.js verwenden?

Der Wechsel zu einem   Javascript-Framework   ist ein Muss, wenn wir mit dem Programmieren auf professionellem Niveau beginnen. Wenn es unser Ziel ist, Frontend-Entwickler zu werden, dürfen wir mindestens ein JS-Framework nicht verpassen: sei es Vue, React oder Angular.

Frameworks ermöglichen es uns, eine gut organisierte Arbeitsumgebung zu haben, die Vorteile des MVVM (Model View View-Model) zu nutzen, das DOM zu manipulieren und während des Lebenszyklus einer Anwendung „on the fly“-Operationen an veränderlichen Objekten durchzuführen .

Tatsächlich hat die reaktive Programmierung das Konzept des Frontends komplett verändert. Was bisher nur über AJAX möglich war, ist dank ähnlicher Strukturen plötzlich viel einfacher zu handhaben.

Es gibt mehrere   Stärken von Vue  . Erstens gibt es eine sehr kurze und steile Lernkurve. Wenn Sie über gute HTML-, CSS- und Javascript-Kenntnisse verfügen, wird es nicht schwierig sein, Vue zu beherrschen.

Ein weiterer sehr interessanter Aspekt von Vue.js ist die   Benutzerfreundlichkeit  . Obwohl wir es tatsächlich über den Node Package Manager installieren können    , ist es möglich, Vue einfach durch Aufrufen aus dem CDN in unserer HTML-Seite zu verwenden. Eine viel einfachere Methode für Anfänger

Um es zu verwenden, fügen Sie daher einfach dieses Skript auf der Seite ein

<script src = „https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js“> </script>

Einfach, oder? Zum jetzigen Zeitpunkt ist die neueste Version 2.6.10. Wenn neue Versionen veröffentlicht werden, müssen Sie Vue nur manuell aktualisieren, indem Sie die Versionsnummer im Skript ändern.

Nach diesen wenigen einfachen Schritten können wir unsere erste Vue.js-App erstellen.

Erste Vue.js-App

Da wir nun ein allgemeines Verständnis der Welt von Vue haben, können wir mit der Entwicklung unserer ersten App beginnen. Zuerst erstellen wir in HTML ein div mit einer bestimmten ID. Dies wird der Container für unsere App sein.

<div id = „app“> </div>

Lassen wir dieses Div vorerst leer und kümmern uns um den Javascript-Teil. Um Vue zu starten, müssen wir   eine Instanz erstellen  . Diese Instanz von Vue, die wir in eine Variable namens   vm aufnehmen   , enthält ein Element, das die App-ID unseres div ist, und ein Objekt namens data, das die Aufgabe hat, die Daten genau zu enthalten.

var  vm =    neue  Vue ({

von: ‘#app’,

Datum: {

foo: ‘bar’

}

})

Interpolation in Vue.js

Das Interpolationskonzept ist eines der wichtigsten in Javascript-Frameworks. Eine andere ist die Möglichkeit, eine Verbindung zwischen einer JS-Variablen und dem herzustellen, was später im HTML angezeigt wird.

In unserem ersten Beispiel erstellen wir eine Variable innerhalb des Datenobjekts, das wir foo nennen. Die Variable foo wird jedoch derzeit nicht im DOM gedruckt.

Ändern wir also den Code, um dies zu ermöglichen.

<div id = „app“> {{foo}} </div>

Wenn alles gut geht, finden Sie die Wortleiste in der div mit ID-App.
Finden Sie dieses erste vollständige Beispiel in Codepen:   Vue.js-Interpolationsbeispiel

Wenn Sie bereits Erfahrung mit Angular haben, werden Sie feststellen, dass die Syntax sehr ähnlich ist. Sogar das Google-Framework verwaltet tatsächlich die Variablen innerhalb der Interpolation, indem es sie zwischen zwei geschweiften Klammern einschließt.

Es gibt jedoch viele Unterschiede zwischen Vue und den bekanntesten Javascript-Frameworks auf dem Markt. Wenn Sie sie im Detail kennenlernen möchten, empfehle ich   den entsprechenden Abschnitt   im offiziellen Leitfaden in englischer Sprache.

Das Modell v

Da wir nun das Konzept der Interpolation kennen, können wir uns etwas viel Praktischerem zuwenden, nämlich dem v-Modell. Modell v erzeugt im Gegensatz zur Interpolation eine untrennbare Verbindung zwischen der Variablen und ihrem ursprünglichen Modell.

Trotzdem weiß ich, dass die Definition ein wenig verschwommen erscheinen mag, aber ich bin überzeugt, dass ein praktisches Beispiel Ihnen helfen wird, Ihren Kopf frei zu bekommen.

Lassen Sie uns eine einfache Texteingabe erstellen, in die wir Text einfügen. Lassen Sie uns schließlich ein fett gedrucktes Element erstellen, das den in die Eingabe eingegebenen Text enthält. Hier ist unser anfängliches HTML

<div id = „app“> <eingabetyp = „text“ v-model = „wert“ />

 

Der eingegebene Wert ist <b> reste {value}} {}} </div>

Der JS-Code, der alles regelt, ist jedoch wie folgt

var  vm =    neue  Vue ({

von: ‘#app’,

Würfel : {

Wert : “

}

})

Versuchen Sie nun, etwas Text in Ihren Eintrag einzufügen. Was geschieht? die v-Vorlage kann die Variable an den aktuellen Wert der Texteingabe binden.

Auf diese Weise können Sie Ihren Text sofort in Fettdruck sehen. Dieses kleine Beispiel ist in Codepen verfügbar (   Beispiel v-model Vue.JS   ).

Stellen Sie sich vor, Sie müssten dasselbe mit jQuery oder einfachem Javascript machen. Wie viele Codezeilen hätten Sie verwenden sollen? Dies ist hier einer der Gründe für die Wahl einer Struktur wie Vue.

v-wenn vs. v-show

Nach der Interpolation und dem Modell stoßen wir auf ein weiteres Thema, das der Entwickler sehr gut kennt: Ich spreche von   bedingten Konstrukten.

Tatsächlich können Sie mit Vue auch logische Operationen durchführen und Variablen vergleichen. Nehmen wir also ein praktisches Beispiel. Lassen Sie uns eine einfache App erstellen, die uns nach dem Erfassen der genauen Uhrzeit eine andere Begrüßung gibt, je nachdem, zu welcher Tageszeit wir uns befinden.

Hier ist unser HTML-Teil

<div id = „app“>

<p v-if = „time <12 && time> 5“> Guten Morgen! </p>

<p v-else-if = „time> = 12 && time <= 18“> Guten Tag! </p>

<p v-else> Gute Nacht! </p>

</div>

Der JS-Teil hingegen sieht wie folgt aus.

var  vm =    neue  Vue ({

von: ‘#app’,

Datum: {

Uhrzeit:    neues   Datum. getHours();

}

})

Wie Sie sehen, habe ich die logischen Operationen direkt an die Ansicht delegiert, da es sich um triviale Berechnungen handelt. Alternativ hätte ich den logischen Teil innerhalb des JS verschieben können und die Variable bereits mit dem richtigen Wert zurückgeben.

Dieses Beispiel ist auch in Codepen verfügbar:   Beispiel v-if Vue.js

Eng verwandt mit v-if finden wir v-show. Der Hauptunterschied zwischen v-if und v-show was ist das und wann verwendet man das eine oder andere?

v-show macht nichts anderes, als das Element auszublenden, während mit v-if das Element, das im Vergleich nicht der Wahrheit entspricht, nicht im HTML ausgegeben wird.

Auf der Performance-Ebene wirkt sich v-if mehr aus, aber in vielen Fällen ist es immer noch vorzuziehen, da v-show wie erwähnt nichts anderes tut, als das Element im DOM auszublenden. Hier ist ein praktisches Beispiel. Der HTML-Teil ist wie folgt

<div id = „app“>

<p v-show = „check“> V-Show </p>

</div>

während JS das ist

var  vm =    neue  Vue ({

von: ‘#app’,

Würfel : {

check:    falsch

}

})

Ich lade Sie ein, die Überprüfungsvariable von false auf true zu ändern und zu sehen, was passiert. Konzentrieren Sie sich nicht nur auf die Grafik, sondern prüfen Sie das Element auch mit Firefox oder Google Chrome.

Das vollständige Codepen-Beispiel finden Sie hier ->   v-show Vue.js-Beispiel

Die for:v-for-Schleife

Wie jede Programmiersprache mit Selbstachtung können Sie mit Vue.js auch ein bestimmtes Element durchlaufen, sei es ein Array oder ein Objekt. Das Durchlaufen eines Objekts ist eine großartige Möglichkeit, Informationen zu erhalten und redundante Operationen zu vermeiden. Die for-Schleife in Vue.js ist sehr einfach einzurichten. In diesem Beispiel erstellen wir ein Array in JS mit einer Reihe von Daten darin. In html werden wir dann dieses Array durchlaufen, um die Daten zu erhalten.
Hier ist der HTML-Teil.

<div id = „app“>

<ul>

<li v-for = „Hund zu Hunden“> {{dog}} </li>

</ul>

</div>

Der Javascript-Teil ist wie folgt

var  vm =    neue  Vue ({

von: ‘#app’,

Datum: {

Hunde: [‘Pudel’, ‘Volpino’, ‘Deutscher Schäferhund’]

}

})

Das Beispiel ist leicht zu verstehen. Wir erstellen einfach eine Matrix mit Hunderassen und untersuchen sie dann, indem wir durch die Matrix gehen. Das vollständige Beispiel ist auf Codepen verfügbar:   Beispiel v-for Vue.js

Offensichtlich hindert uns nichts daran, mehr gelernte Konstrukte zusammenzuführen. Wenn wir beispielsweise möchten, dass der Text fett gedruckt wird, wenn die Rasse des Hundes mit einem Pudel identisch ist, können wir unseren HTML-Code auf diese Weise ändern

<div id = „app“>

<ul>

<li v-for = „Hund zu Hunden“>

<b v-if = “Hund == ‘Pudel’”> <span> {{Hund}} </span> </b>

<span v-else> {{dog}} </span>

</li>

</ul>

</div>

Binden eines Elements: das v-bind

Sie haben wahrscheinlich schon von dem Konzept der Bindung gehört. Die v-bind-Direktive wird verwendet, um einen Wert an ein HTML-Attribut zu binden. Es gibt zwei Syntaxen für die V-Bindung.

Wir können die übliche lange Syntax v-bind = „value“ verwenden oder sie mit i: anstelle von v-bind kürzen. Sie haben die Wahl, ich persönlich verwende immer einen Doppelpunkt. Wichtig ist, im gesamten Code die gleiche Syntax beizubehalten.

Lassen Sie uns eine einfache Schaltfläche erstellen. Die Art der Schaltfläche wird durch einen V-Bind bestimmt.

<div id = „app“> <button: type = „buttonType“> Test-Button </button> </div>

Stattdessen ist dies JS

var  vm =    neue  Vue ({

von: ‘#app’,

Würfel : {

buttonType: ‘senden’

}

});

Der HTML-Code, der von diesem Beispiel generiert wird, lautet wie folgt

<button type = „submit“> Testbutton </button>

Das vollständige Beispiel ist auf Codepen verfügbar:   Beispiel v-bind Vue.js

Modelle und Komponenten

Ein weiterer wichtiger Aspekt von Vue sind die Modelle und Komponenten. Sie sind nichts anderes als Codestücke, die wir in unserem Layout leicht wiederverwenden können. Sehen wir uns also an, wie Sie mithilfe einer Vue-Komponente eine wiederverwendbare Vorlage erstellen, die in Code eingebettet ist. Komponenten sind ein sehr wichtiger Bestandteil, da sie es uns ermöglichen   , den Vue-Kern zu erweitern   .

Zuerst erstellen wir unsere Komponente innerhalb des HTML-Teils. Dazu müssen wir lediglich eine Art Tag erstellen.

<div id = „app“>

<erste-Komponente> </cousin-Komponente>

</div>

Der JS-Teil, der diese Komponente anpasst, ist wie folgt

var  primeComponent = {

Vorlage: ‘</code>

<div> ersteKomponente. Die Nummer: {{num}} </div>

‘,

Datum:    Funktion  () {

zurück   {

num: math. Zufällig ( )

}

},

Methoden: {

showNum:    Funktion  () {

alert („meine Nummer ist“ +    diese  . num);

}

}

}

 

vm =    neue  Vue ({

von: ‘#app’,

Würfel : {

Anzahl: 42

},

Komponenten: {

firstComponent: firstComponent

}

})

Wie Sie sehen können, habe ich die übliche Instanz von Vue erstellt. Ich habe eine Zahl in meine Daten eingefügt und ein neues Objekt namens Komponenten erstellt. Bei Komponenten habe ich nichts anderes getan, als die Syntax der Komponentendeklaration zu ändern, indem ich von der mit dem mittleren Strich zur einfachen JS-Notation und dann von der ersten Komponente zur ersten Komponente übergegangen bin.

Dann definiere ich die erste Komponentenvariable, die darin eine Vorlage enthält, dh diejenige, die tatsächlich gedruckt wird. Daten: wo wir eine einfache Javascript-Funktion haben, die eine Zufallszahl zurückgibt. Eine Methode: die eine Funktion namens showNum enthält, die nichts anderes tut, als die Warnung der zuvor berechneten Zufallszahl anzuzeigen.

Das vollständige Beispiel ist bei Codepen verfügbar: Beispiel der Vue.js-   Komponente

Schlussfolgerungen

Wenn Sie meinem italienischen Vue.js-Guide aufmerksam gefolgt sind   ,   sollten Sie die Grundlagen von Vue.js vollständig verstanden und vor allem sein großes Potenzial geschätzt haben. Mein Rat ist, meine Beispiele zu modifizieren, um sie komplexer zu machen.

Wenn Sie alle Geheimnisse von VueJS kennenlernen möchten, empfehle ich   dieses Buch, das bei Amazon erhältlich  ist. Es ist auf Englisch, aber es ermöglicht Ihnen, auch mit einigen praktischen Beispielen ins Detail zu gehen. Das Buch ist leicht verständlich und für Anfänger geeignet.

Um Vue.js zu entwickeln, müssen Sie Google Chrome verwenden und diese interessante Erweiterung für Vue.js herunterladen    .

Befolgen Sie  immer   die offizielle Vue.js-Dokumentation   und wenn Sie Fragen haben, zögern Sie bitte nicht   ,   sich  mit mir in Verbindung zu setzen.

 

Leave a Comment

Your email address will not be published.