Front-End-Frameworks wie AngularJs können es uns sehr bequem machen, leistungsstarke einseitige Anwendungen zu entwickeln. Manchmal sind jedoch große Rahmenbedingungen wie Angular für unsere Projekte zu groß und viele Funktionen werden möglicherweise nicht verwendet. Zu diesem Zeitpunkt müssen wir die Notwendigkeit bewerten, es zu verwenden. Wenn wir nur ein paar Funktionen zu einer einfachen Webseite hinzufügen müssen, ist die Verwendung von Angular zu problematisch, und die erforderliche Installation, Konfiguration, das Schreiben von Routing, das Entwerfen von Controllern usw. scheint zu umständlich zu sein.
Zu diesem Zeitpunkt brauchen wir eine leichtere Lösung. Vue.js ist eine gute Wahl. Vue.js ist ein Framework, das sich auf Sichtmodelle (ViewModal) konzentriert. Das Ansichtsmodell ist eine Brücke für die Datenkommunikation zwischen der Benutzeroberfläche und dem Datenmodell, die die Zwei-Wege-Datenbindung zwischen der Benutzeroberfläche und dem Datenmodell realisiert. Es ist kein "vollständiger Rahmen", sondern ein einfaches und flexibles Framework, das sich auf Sichtschichten konzentriert.
Als nächstes werden wir eine einfache Memo -Anwendung verwenden, um die Grundlagen von Vue.js. Um Vue.js selbst mehr Aufmerksamkeit zu schenken, haben wir eine Kundenanwendung basierend auf lokalen Daten entwickelt. Am Ende dieses Artikels werden wir die Interaktion zwischen Vue.js und dem Backend erwähnen.
Vorbereitung
Lassen Sie uns zuerst Vue.js und Bootstrap durch NPM erhalten (nicht notwendig, hier ist, um seine Stilbibliothek anzuwenden) und in der Befehlszeile Folgendes eingeben:
NPM Vue Bootstrap installieren
Erstellen Sie dann zwei Dateien:
Touch Index.html App.js
Fügen Sie auch den folgenden Inhalt zu index.html hinzu
<!-- index.html --><!doctype html><html><head> <meta charset="utf-8"> <title>Vue</title> <!-- CSS --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></head><body> <!-- Navigation bar--> <nav> <div> <a><i></i> Vue Memo</a> </div> </nav> <!-- Main parts of the application--> <div id="events"> <!--Add a form--> <div> <div> <h3>Add an Event</h3> </div> <div> </div> </div> </div> <!―Displaying the content of the memo--> <div> <div> </div> </div> </div> <!-js-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </script> </body> </html>
Das <Div> -Tag mit ID "Ereignissen" ist der zentrale Teil dieser Anwendung. Danach werden wir für diesen Kernteil eine VUE -Instanz erstellen.
Erstellen Sie eine Vue -Instanz
Erstellen wir zunächst eine VUE -Instanz und setzen Sie das "El" -Matchribut dieser Instanz auf "#events". Auf diese Weise wird die Instanz mit den ID -Ereignissen an einen Container gebunden.
// app.jsnew vue ({// und Containerbindung EL mit ID "Ereignissen": '#events'});Zu diesem Zeitpunkt wird die Funktion von VUE in Div# -Ereignissen wirksam. Fügen wir vor dem Hinzufügen anderer Inhalte der erstellten VUE -Instanz einige erforderliche Eigenschaften hinzu:
// app.js neuer VUE ({// Die Containerbindung EL mit der ID von "Ereignissen": '#events', // Im Datenattribut definieren wir die Daten, die mit den Webseitendaten interagieren: {{}, // Wenn die Anwendung geladen wird, wird die Funktion in der Ready Attribut ausgeführt. {}});Das Datenattribut ist ein Objekt, das alle Daten im Ansichtsmodell unserer Anwendung deklariert.
Das Ready Attribut ist eine Funktion, die beim Laden der Anwendung ausgeführt wird. Normalerweise werden hier andere Methoden aufgerufen, um die von der Anwendung erforderlichen Daten zu initialisieren.
Die Methodenmethode definiert die Methoden, die in dieser Anwendung verwendet werden müssen
Fügen Sie Inhalte hinzu, um sie zu formen
Wir müssen die Details des Memos in der Form eingeben. Wir haben die native Zeitauswahl von HTML5 verwendet, um die Zeit des Memo -Inhalts festzulegen. (Beachten Sie, dass diese Funktion im Firefox -Browser nicht anwendbar ist. Es wird empfohlen, Chrome oder Safari zu verwenden.)
<div> <input placeholder="Event Name" v-model="event.name"> </div> <div> <textarea placeholder="Event Description" v-model="event.description"></textarea> </div> <div> <input type="date" placeholder="Date" v-model="event.date"> </div> <button @klick = "addEvent"> enden </button> </div>
Wir haben dem Eingabetag und TextArea-Tag eine "V-Model" -Richtlinie hinzugefügt. Ähnlich wie "NG-Model" von Angular gibt der Wert dieses V-Models die an diesem Tag gebundenen Daten im Ansichtsmodell an. Diese Daten sind hier nicht nur verfügbar, sondern auch anderswo im Container.
Wir haben der Schaltfläche "Senden" eine "@click" -Staste hinzugefügt. Diese Anweisung wird abgekürzt und der vollständige Name sollte "V-on: Click" sein. Seine Funktion besteht darin, einen Listener für Klickereignisse mit dieser Schaltfläche zu binden. Wenn das Klickereignis ausgelöst wird, wird die Listener -Funktion in der @Click -Anweisung ausgeführt. In diesem Beispiel binden wir die AddEvent -Funktion an die Schaltfläche Senden. Wir können auch andere Ereignisse binden, und die Schreibregel lautet @Event name = "Hörfunktion". Wenn wir eine Hörerfunktion F an das Keydown-Ereignis binden möchten, können wir Folgendes schreiben: @keydown = "f" oder v-on: keydown = "f"
Wenn Sie zu diesem Zeitpunkt die Webseite vorschau haben, sehen Sie den folgenden Inhalt:
Daten hinzufügen
Wir haben die AddEvent -Methode bereits erwähnt, mit der neue Memo -Daten hinzugefügt werden.
Jetzt werden wir diese Methode definieren und einige erforderliche Daten hinzufügen
// App.js ... Daten: {Ereignis: {Name: '', Beschreibung: '', Datum: ''}, Ereignisse: []}, // Die Funktion im Ready -Attribut wird ausgeführt, wenn die Anwendung geladen ist. define a method to obtain data fetchEvents: function() { var events = [{ id: 1, name: 'Have a meeting', description: '9 am in the 21st floor conference room', date: '2015-09-10' }, { id: 2, name: 'Shopping', description: 'Buy a power bank', date: '2015-10-02' }, { id: 3, name: 'Learn', description: 'Learn tutorials Am Vue ', Datum:' 2016-03-11 '}]; // $ set ist eine Methode, die Vue zur Einführung von Daten in ein Array bereitstellt. Die Ansicht wird aktualisiert, wenn dies ausgeführt wird. $ Set ('Ereignisse', Ereignisse); }, // Daten in ein Array von Ereignissen einfügen AddEvent: function () {if (this.event.name) {this.events.push (this.event); this.event = {name: '', Beschreibung: '', Datum: ''}; }}}In der Dateneigenschaft definieren wir ein Ereignisobjekt und ein Ereignisarray, das die Ereignisse bzw. das Ereignisarray darstellt. Diese Daten werden geladen, wenn die Anwendung geladen wird. Wenn wir keine vordefinierten Ereignisobjekte haben, obwohl nachfolgende Funktionen implementiert werden können, meldet der Browser diesen Fehler:
Sie bedeuten, dass die Leistung der Anwendung betroffen ist, wenn die Daten, die Sie in Ihrer Anwendung verwenden, nicht im Datenattribut deklariert werden. Daher werden die Daten, die wir in unserer Anwendung verwenden, am besten im Datenattribut deklariert.
In der Ready -Eigenschaft definieren wir die FetchEvent -Methode, um Daten zu erhalten. In dieser Methode fügen wir der Ansicht über die VM. $ -Set -Methode Daten hinzu. Seine Funktion ähnelt der Push -Methode eines Arrays und aktualisiert auch die Ansicht. Der Parameter dieser Methode muss eine String -Tastatur sein, die die eingehenden Daten darstellt. Für eine bestimmte Verwendung finden Sie hier hier.
Schließlich definieren wir in der Methode -Eigenschaft die AddEvent -Methode, um zu überprüfen, ob der Wert des Ereignisses vorhanden ist. Danach werden die Daten im Ereignisobjekt gelöscht und das Formular ebenfalls gelöscht.
Fügen Sie eine Liste von Elementen hinzu
Wir verwenden eine Liste von Dingen, um alle Dinge aufzulisten:
<div> <a href = "#" v-für = "Ereignis in Ereignissen"> <h4> <i> </i> {{{Ereignis.Name}} </h4> <h5> <i v-if = "event.date"> </i> {{{{Event.des} </h5> <p v-if = "{{{/h5> <p v-if =" {{{{{} </h5> <p v-if = "{{{{} </h5> <p v-if =" {{{{{} </h5> <p v-if = "{{{{{} </h5> <p-if =" <button @klick = "DeleteEvent ($ index)"> löte </button> </a> </div>Wir verwenden die V-for-Anweisung, um Elemente mit derselben DOM-Struktur und unterschiedlichen Anzeigeinhalten zu rendern. In diesem Beispiel fügen wir einem Tag eine V-für-Richtlinie hinzu, die die Daten im Ereignisarray durchquert und jede Durchlaufdaten mit dem Ereignis darstellen. Elemente mit der hinzugefügten V-für-Richtlinie wenden die Ergebnisse jedes Durchlaufens in untergeordneten Elementen an und zeigen sie wiederholt an. Freunde, die die Template Engine, React oder Angular verwendet haben, können mit ähnlicher Verwendung besser vertraut sein. In unserem Beispiel wird der Inhalt von H4-, H5-, P- und Tasten -Tags wiederholt angezeigt, und die Anzahl der Schleifen ist die Länge des Ereignisarrays. Kinder mit V-for-Richtlinienelementen werden als Vorlagen bezeichnet, und die Daten in der Vorlage sind in doppelte Klammern eingewickelt. In diesem Beispiel sind die Daten die verschiedenen Eigenschaften des Ereignisobjekts (Name, Datum und Beschreibung).
Sie werden feststellen, dass einige der Elemente der Vorlage V-IF-Anweisungen hinzugefügt haben. Diese Anweisung fungiert als bedingtes Rendering. Der Wert von V-IF ist eine Urteilsbedingung. Wenn das Ergebnis wahr ist, wird das Element gerendert, sonst wird es nicht gerendert. Zusätzlich haben wir dem Schaltflächenelement eine Klickanweisung hinzugefügt und die Methode DeleteEvent zum Löschen der Angelegenheit aufgerufen (die spezifische Definition wird unten angegeben). Der Parameter $ $ Index repräsentiert die Anzahl des aktuell durchquerten Elements im Array.
Aktualisieren Sie die Seite und wir werden feststellen, dass alle Elemente auf der rechten Seite der Seite aufgeführt sind. Nach dem Eingeben des Inhalts im Formular links und auf die Schaltfläche "Senden" werden neue Elemente automatisch zur Liste rechts hinzugefügt.
Definieren wir die DeleteEvent -Methode
DeleteEvent: function (index) {if (bestätigen ("Bestätigen (" Sind Sie sicher, dass Sie dieses Ereignis löschen möchten? ")) {// $ REMED IS eine VUE -Convenience -Methode ähnlich wie Splice This.events. }}In dieser Methode fragen wir den Benutzer zunächst, ob er das Element sicher löschen wird. Wenn Sie auf "OK" klicken, wird das Element über die vordefinierte VUE -Methode aus dem DOM gelöscht.
Interaktion mit dem Backend
Wie Angular sind Vue's Front-End und Back-End getrennt, und die Wechselwirkung mit dem Back-End wird durch HTTP-Anfragen abgeschlossen. Es gibt viele interaktive Tools, Sie können das bekannte $ .ajax, das native XMLHTTPREquest-Objekt oder andere Bibliotheken von Drittanbietern oder Vue-Ressource verwenden.
Hier ist eine kurze Einführung in Vue-Ressource. VUE-RESOURCE ist ein Plug-in, das speziell für VUE zum Senden von HTTP-Anforderungen entwickelt wurde. Es unterstützt Versprechen und URI -Vorlagen und bietet auch Werkzeuge wie Interceptor. Schauen wir uns unser Beispiel oben an. Wir ändern den Erwerb von Angelegenheiten, um sie vom Server zu erhalten. Zu diesem Zeitpunkt müssen wir die FetchEvent -Methode ändern: (Angenommen, das Backend bietet Dienste im Zusammenhang mit Angelegenheiten über die URL von API/Ereignissen, das gleiche unten)
fetchEvents: function () {this. $ http.get ('api/events'). Dann (Funktion (Ereignisse) {this. $ set ('Ereignisse', Ereignisse);}). Catch (Funktion (Fehler) {console.log (Fehler);});}Wenn die Akquisition erfolgreich ist, wird die Anweisung der damaligen Funktion ausgeführt, und die $ -Set -Methode wird weiterhin aufgerufen, die Eingabeparameterereignisse werden jedoch vom Server abgerufen.
Wenn wir das AddEvent ändern, müssen wir eine Postanfrage senden:
addEvent: function(){ this.$http.post('api/events', this.event) .then(function (response) { this.events.push(this.event); console.log("Event added!"); }) .catch(function (error) { console.log(error); });}In ähnlicher Weise kann die Methode zum Löschen von Angelegenheiten wie folgt geändert werden:
DeleteEvent: function (index) {this. $ http.delete ('api/Ereignisse/' + event.id) .then (Funktion (Antwort) {this.events.Hier übergeben wir die ID der Angelegenheit an den Server, um dem Server zu fordern, die ID der Angelegenheit zu löschen, um den Server zu erleichtern, um zu bestimmen, welche Angelegenheit zu löschen ist.
Abschluss
Freunde, die Angular und React verwendet haben, werden diesen Vue finden und sind alle ähnlich: Anweisungen ähnlich wie die modulare Verarbeitung ähnlich wie React. Vue unterscheidet sich jedoch offensichtlich von ihnen. Es ist leichter und einfach zu bedienen. Sie müssen weder komplizierte Konfigurationen wie Angular erstellen, noch müssen Sie neue Konzepte wie neues virtuelles DOM, JSX usw. erlernen. Wenn Ihre Bewerbung nicht sehr groß ist, können Sie auch in Betracht ziehen, VUE als Anwendungsframework zu verwenden.
Das obige ist das Quick Introduction -Tutorial für Vue.js, das Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!