Ich bin ein Full-Stack-Entwickler bei Syncrasy Tech (IT-Lösungsunternehmen) . Ich liebe es, React-Codes zu schreiben. Aber warum erzähle ich Ihnen das, wenn wir hier sind, um die Best Practices von Vue.j für die Webentwicklung zu diskutieren. Ich erzähle Ihnen dies, damit Sie meinen Hintergrund verstehen können und warum ich hier die Vue.js diskutiere.
Ich liebe es, an React-Codes zu arbeiten, aber ich hasse es, sie zu lesen. Dies ist der Grund, warum ich nicht codieren kann. Selbst mit den besten Methoden zur Codeüberprüfung kann ich die Verschachtelung von React-Komponenten nicht herausfinden, die einfach dazu beitragen, komplexere UI-Strukturen in Web-Apps zu erstellen.
Die Lösung für dieses Problem ist Vue, das im Block der Web-App-Entwicklung nicht mehr so neu ist. Ich habe viel über asynchrone Vue-Komponenten, serverseitiges Rendering, Tools und Bibliotheken gehört. Vielleicht finden Sie diese Vielzahl von Begriffen verwirrend. Glauben Sie mir, Sie sind damit nicht allein. Viele Entwickler aller Ebenen sehen das genauso, wenn sie die Best Practices von Vue nicht kennen.
Ein paar Tage später beschloss ich schließlich, meine Codes darin zu speichern. Was ich hier teile, sind die zahlreichen Best Practices, die ich durch meine Erfahrung mit Vue gelernt habe. Ich bin bereit zu teilen, was ich finden würde.
Fangen wir an
Der Versuch, auf Vue alles auf einmal zu lernen, kann überwältigend sein. Beginnen wir mit den Zahlen. Heute hat Vue 147.000 Github-Sterne, die JS-Giganten wie Angular (50,6.000 Sterne) und React (135.000 Sterne) zurücklassen.
Ich habe die Best Practices von Vue in vier Kategorien unterteilt:
Vue-Funktionen
Die Funktionen von Vue haben unter der Haube automatisch viel zu besprechen. Vue.js ist eine einfache ansichtsorientierte Plattform, die ihren ersten Hauptvorteil darstellt. Alle Informationen in der Codierung sind nur gültig, wenn sie korrekt mit den benannten und verschachtelten benannten Ansichten interagieren.
Das Erstellen einer einzelnen Ansicht ist in Vue ziemlich einfach. Sie müssen nur die Benutzeroberfläche laden und JavaScript hinzufügen, um die Entwicklung Ihrer Web-App zu starten.
let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } })
Dann ein bisschen Markup, um die endgültige Ansicht zu erhalten:
<div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div>
Was verrät der obige Code?
Das obige Codierungsbeispiel zeigt, wie Vue Elemente automatisch ohne Verwendung von Codes rendert. Die einfache Syntax wird verwendet, um die Daten zur direkten Ansicht zu senden. Das Hinzufügen von Instanzeigenschaften kann zum Rendern von Vue-Elementen verwendet werden.
Vue-Systeme wie JQuery speichern die Informationen im DOM und für alle zusätzlichen Änderungen müssen Entwickler das Rendern und Ändern der zugehörigen Teile durchführen. Kommen wir zu den anderen Teilen der Vue-Funktionen.
Komponenten
Für Web-Apps können Vue-Entwickler mithilfe von Vue.compoment Komponenten wie andere Bibliotheken verwenden. Eine Komponente kann einen Namen, eine Konfiguration oder eine Kennung enthalten.
Vue.component('component-name', { /* options */ })
Die Single-File-Komponenten eignen sich sehr gut für kleine bis mittlere Webentwicklungsprojekte. Aufgrund der Vorteile der JavaScript-Logik, des CSS-Stils und der HTML-Codevorlage ist es ziemlich einfach, Vue-Komponenten in einer einzigen Datei zu verwenden. Siehe auch ein Beispiel:
<template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style>
Vue-Einzeldateikomponenten verwenden WebPack, um die Möglichkeit zu bieten, moderne Webfunktionen zu verwenden und auf Ihre Web-App anzuwenden. Codierer können eine Vorlage angeben, die mit Pug mithilfe von Präprozessoren erstellt wurde:
TypeScript
SCSS
Sass
Weniger
Postcss
Mops
Mit der Vue- v-bind Funktion können Komponenten Daten von den übergeordneten Komponenten (Requisiten) akzeptieren, die im Array von Zeichenfolgen angezeigt werden:
props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
Dies dokumentiert nicht nur Ihre Komponenten, sondern warnt Sie auch, wenn Sie einen falschen Codetyp in der JavaScript-Konsole des Browsers übergeben.
Kurz gesagt, Vue bietet Web-App-Entwicklern große Flexibilität, die für unterschiedliche Entwicklungsstrategien geeignet ist, und erleichtert auch die Interaktion mit verschiedenen Vue-Bibliotheken.
Ereignisse und Handler zur Behandlung von Fehlern in Vue
Vue JS ist ein progressives JS-Framework, das sich auf die Ansichtsebene und ein System zur Unterstützung von Bibliotheken konzentriert. Für alle Phasen der Web-App-Entwicklung, in denen Vue verwendet wird, werden Ereignisse in den Anweisungen v-on und Doppelpunkten erstellt, mit denen der Ereignistyp identifiziert wird, z. B. v-on click.
Ein einfaches Beispiel für v-on kann sein:
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
Einige Beispiele für HTML-DOM-Ereignisse in Vue:
bei Veränderung
auf Klick
auf schweben
unter Last
beim Mouse-Out
beim Mouse-Over
unter Last
Ereignishandler in Vue JS
Handler werden zugewiesen, um die in den Ereignissen auftretenden Fehler zu behandeln. Es ermöglicht einem Entwickler, den Code zu schreiben, wenn ein bestimmtes Ereignis ausgelöst wird.
Bedingtes Rendern und Loops in Vue
Bedingtes Rendern in Vue bedeutet, einige Elemente aus dem DOM zu entfernen oder hinzuzufügen, wenn ein angegebener Wert wahr ist. Dies ist der beste Weg für die bedingte Datenbindung, mit der Entwickler Informationen verbinden können, wenn eine bestimmte Bedingung erfüllt ist. Sie können die v-if Direktive für das bedingte Rendern verwenden.
Siehe ein Beispiel:
<template> <div> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script>
Sie können v-else verwenden, um die v-if-Direktive zu erweitern:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Sie können es weiter erweitern, indem Sie den Block v-else-if verwenden:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Wenn der Wert, den ein Programmierer auswerten möchte, wahr ist, führen Sie die v-if Vorlage aus. Für weitere Erweiterungen wird die Direktive v-else oder v-if-else ausgelöst.
Vue JS enthält ein einfaches API-Protokoll, mit dem Platz für die v-for-Direktive geschaffen werden kann, die eine Liste von Elementen in das DOM rendert.
Beispiel:
<template> <ul> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script>
Bei der obigen Codierung durchläuft eine Schleife den Code in Form des Arrays unter Verwendung v-for Anweisung v-for . Das Array bezieht sich auf Objekte, mit denen Benutzer die im Array vorhandenen Eigenschaften anzeigen können.
Ausgabe:
samuel queen rinha
Zweiwege-Datenbindung zur Beschleunigung des Entwicklungsprozesses
Eines der Hauptmerkmale von Vue ist die reaktive bidirektionale Bindung, mit der Ihre Daten, Arrays und Variablen mit DOM synchronisiert werden, ohne dass Sie etwas anderes tun müssen. Vue verwendet die v-model Direktive für die bidirektionale Bindung. Die v-model Direktive bindet das Eingabeelement mithilfe von v-model Direktiven, die das Eingabefeld und auch das damit verknüpfte name-Eigenschaftsfeld aktualisieren, an die name-Eigenschaft.
Wie funktioniert es
<template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script>
Die v-model Direktive enthält die Option des Modifikators .lazy , der die Dateneigenschaft nach dem Auftreten eines .lazy aktualisiert.
Sie können auch die .trim Funktion verwenden, um den Leerraum aus Ihrem Code zu entfernen.
Die Option des Modifikators .number ist .number wenn Sie Zahlen in das Eingabefeld akzeptieren möchten.
Schließlich sind dies die Hauptstärken von Vue.js, mit denen Sie Ihre Webanwendungen korrekt codieren können. Wenn Sie also ein neues Webentwicklungsprojekt starten, ist Vue.js Ihre Wahl. Es führt das Spiel mit seinen eleganten Funktionen, Stilrichtlinien, einfachen Codierung und spart auch Ihre Bemühungen.