Vue ist eine kleine und leichte JavaScript -Bibliothek. Es verfügt über eine einfache und leicht verständliche API, die Entwickler bei der Entwicklung von Webanwendungen einfacher und bequemer macht. Was Vue immer stolz gemacht hat, ist seine Bequemlichkeit, Ausführung und Flexibilität.
Der Zweck dieses Tutorials besteht darin, einige Beispiele zu verwenden, um einen Überblick über einige grundlegende Konzepte und Funktionen zu geben. In anderen Tutorials erfahren Sie mehr nützliche Funktionen von VUE, um ein skalierbares Projekt mit VUE zu erstellen.
MVVM -Datenbindung
Die Essenz von MVVM besteht darin, die Ansicht und das Modell durch Datenbindung zu verknüpfen, damit Datenänderungen automatisch auf die Anzeige von Aktualisierungen zugeordnet werden. VUE.JS Kredite Angulars Anweisungsmechanismus in der Gestaltung von Datenbindungs-API: Benutzer können Datenbindung durch HTML-Attribute mit speziellen Präfixen implementieren oder die Interpolation von Curly Brace-Template verwenden oder eine Zwei-Wege-Bindung für Formularelemente verwenden:
<!-Richtlinie-> <span v-text = "msg"> </span> <!-Interpolation-> <span> {{msg}} </span> <!-bidirektionale Bindung-> <Eingabe v-Model = "MSG">Die Interpolation ist im Wesentlichen eine Anweisung, nur um das Schreiben von Vorlagen zu erleichtern. Während der Zusammenstellung der Vorlage erstellt Vue.js ein Direktivobjekt für jeden DOM -Knoten, der dynamisches Update benötigt. Wenn sich die durch ein Befehlsobjekt beobachteten Daten ändert, führt sie entsprechende DOM -Operationen auf dem gebundenen Zielknoten durch. Die anlehende Datenbindung ermöglicht es, dass bestimmte DOM-Operationen in Anweisungsdefinitionen vernünftigerweise verkörpert werden. Die Geschäftsordnung muss nur Vorlagen und Operationen in Data State einbeziehen, was die Entwicklungseffizienz und -wartbarkeit der Anwendung erheblich verbessert.
Im Gegensatz zu Angular hat Vue.js 'API keine komplizierten Konzepte wie Modul, Controller, Umfang, Fabrik, Service usw., und alles basiert auf "ViewModel -Instanz":
<!-Vorlage-> <div id = "app"> {{msg}} </div> // Natives Objekt ist data var data = {msg: 'Hallo!'} // Erstellen Sie eine ViewModel-Instanz var vm = new VUE ({// Das Zielelement El: '#app'Rendering -Ergebnis:
<div id = "App"> Hallo! </div>
Während des Renders hat Vue.js auch die dynamische Bindung von Daten abgeschlossen: Wenn der Wert von data.msg geändert wird, wird das DOM automatisch aktualisiert. Ist es nicht sehr einfach und leicht zu verstehen? Darüber hinaus hat Vue.js die API von benutzerdefinierten Richtlinien und Filtern erheblich vereinfacht. Wenn Sie Erfahrung in der Winkelentwicklung haben, beginnen Sie sehr schnell.
Implementierung der Datenbeobachtung
Das Implementierungsprinzip der Datenbeobachtung von VUE.JS unterscheidet sich im Wesentlichen von der von Angular. Leser, die Angular wissen, wissen möglicherweise, dass Angulars Datenbeobachtungen schmutzige Überprüfungsmechanismen verwenden. Jeder Befehl verfügt über ein entsprechendes Objekt, mit dem Daten beobachtet werden, das als Beobachter bezeichnet wird. Es wird viele Beobachter in einem Bereich geben. Immer wenn die Schnittstelle aktualisiert werden muss, wird Angular alle Beobachter im aktuellen Bereich durchtragen, sie nacheinander nacheinander bewerten und dann mit den alten Werten vergleichen, die zuvor gespeichert sind. Wenn sich das Evaluierungsergebnis ändert, wird das entsprechende Update ausgelöst. Dieser Prozess wird als Digest -Zyklus bezeichnet. Es gibt zwei Probleme mit der schmutzigen Überprüfung:
Alle Datenänderungen bedeuten, dass jeder Beobachter im aktuellen Bereich neu bewertet werden muss. Wenn also die Anzahl der Beobachter enorm ist, wird die Leistung der Anwendung zwangsläufig beeinträchtigt und es ist schwierig zu optimieren.
Wenn sich die Daten ändert, kann das Rahmen das Auftreten von Änderungen nicht aktiv erkennen. Es muss den Digest -Zyklus manuell ausgelöst werden, um das entsprechende DOM -Update auszulösen. Angular vermeidet dieses Problem, indem der Digest -Zyklusteil automatisch in der DOM -Ereignishandlerfunktion ausgelöst wird. Es gibt jedoch noch viele Situationen, in denen der Benutzer manuell ausgelöst werden muss.
Vue.js verwendet einen Beobachtungsmechanismus, der auf der Abhängigkeitserfassung basiert. Grundsätzlich ist es das gleiche wie das alte MVVM -Framework -Knockout. Die Grundprinzipien der Abhängigkeitserfassung sind:
Verwandeln Sie native Daten in "beobachtbare Objekte". Ein beobachtbares Objekt kann bewertet oder zugeordnet werden.
Während des Bewertungsprozesses des Beobachters registriert jedes beobachtbare Objekt, das aufgenommen wird, den aktuellen Beobachter als Abonnent und wird zu einer Abhängigkeit des aktuellen Beobachters.
Wenn ein abhängiges beobachtbares Objekt zugewiesen wird, werden alle Abonnenten zur Neubewertung und Auslöser entsprechender Aktualisierungen informiert.
Der Vorteil des Aufnehmens auf die Sammlung besteht darin, dass sie Änderungen der Daten genau und proaktiv verfolgen kann, und es werden keine zwei Probleme mit schmutzigen Schecks oben erwähnt. Implementierungen für herkömmliche Abhängigkeiten, wie z. B. Knockout, erfordern jedoch normalerweise, dass native Daten einwickelt, um beobachtbare Objekte zu erstellen. Sie müssen Funktionsaufrufe verwenden, wenn sie Werte aufnehmen und Werte zuweisen. Die Schreibmethode ist umständlich und bei der Durchführung von Datenoperationen nicht intuitiv genug. Gleichzeitig ist die Unterstützung für Objekte mit komplexen verschachtelten Strukturen nicht ideal.
VUE.JS verwendet das Objekt von ES5. DefineProperty -Methode, um die Eigenschaften des nativen Datenobjekts in Getters und Setzer direkt umzuwandeln, die Abhängigkeitserfassung und die Auslösen innerhalb dieser beiden Funktionen zu implementieren und verschachtelte Objektstrukturen perfekt zu unterstützen. Für Arrays werden die Array -Änderungen durch veränderliche Methoden, die das Array einwickeln, wie z. B. Push, angehört. Dies macht es fast unmöglich, die Daten von VUE.JS zu bedienen und native Objekte zu bedienen [Hinweis: Wenn Sie Attribute hinzufügen/löschen oder bestimmte Elemente in einem Array ändern, muss eine bestimmte Funktion aufgerufen werden, wie z. B. OBJ. $ Add (Schlüssel, Wert), um ein Update auszulösen. Dies ist durch die Sprachmerkmale von ES5 begrenzt. ] Die Logik der Datenoperation ist klarer und glatter, und die Integration mit Datensynchronisationslösungen von Drittanbietern ist ebenfalls bequemer.
Komponentensystem
In groß angelegten Anwendungen müssen wir die Anwendung unweigerlich in mehrere relativ unabhängige Module zusammenfassen. In einem traditionelleren Entwicklungsmodell werden wir nur einen Teil der Komponente machen, wenn wir Multiplexing in Betracht ziehen. Tatsächlich kann die anwendungsähnliche Benutzeroberfläche jedoch als vollständig aus Komponentenbäumen zusammengestellt werden:
Daher werden Komponenten als Kernkonzept für die Gestaltung von Vue.js. verwendet. Es kann gesagt werden, dass jede Anwendung von Vue.js um Komponenten entwickelt wird.
Die Registrierung einer Vue.js -Komponente ist sehr einfach:
Vue.comPonent ('my-component', {// Vorlagenvorlage: '<div> {{msg}} {{privatemsg}} </div>', // Parameter akzeptieren. }}})Nach der Registrierung können Sie eine untergeordnete Komponente in der übergeordneten Komponentenvorlage als benutzerdefiniertes Element anrufen:
<my-component msg = "hello"> </my-component>
Rendering -Ergebnis:
<Div> Hallo Komponente! </div>
Die Vue.js -Komponente kann als ViewModel -Klasse mit vordefiniertem Verhalten verstanden werden. Eine Komponente kann viele Optionen vordefiniert, aber die wichtigsten sind die folgenden:
Ein-Datei-Komponentenformat basierend auf Build-Tools
Die Kernbibliothek von Vue.js bietet nur grundlegende APIs und hat nicht zu viele Einschränkungen, wie die Dateistruktur der Anwendung organisiert wird. Beim Erstellen großer Anwendungen wird jedoch empfohlen, die Kombination aus Webpack + Vue-Loader zu verwenden, um die Komponentenentwicklung effizienter zu gestalten.
Webpack ist ein Open-Source-Tool für Front-End-Modul-Tool, das von Tobias Koppers entwickelt wurde. Seine grundlegende Funktion besteht darin, mehrere JavaScript -Dateien in Modulformat in eine Datei zu verpacken und sowohl CommonJS- als auch AMD -Formate zu unterstützen. Was es jedoch einzigartig macht, ist, dass es eine leistungsstarke Loader -API zur Definition der Vorverarbeitungslogik für verschiedene Dateiformate bietet und es uns ermöglicht, CSS, Vorlagen und sogar benutzerdefinierte Dateiformate als JavaScript -Module zu verwenden. WebPack kann auch eine große Anzahl erweiterter Funktionen basierend auf Loader implementieren, z. B. automatische Chunking-Verpackungen und Ladeanforderungen, automatische Positionierung von Bildressourcenreferenzen, Entscheidung auf der Basis64-Inline basierend auf Bildgröße, heißer Ersatz von Modulen der Module usw. Es kann zu einer der am stärksten wettbewerbsfähigen Lösungen auf dem Gebiet der Konstruktion der Frontanlage stehen.
Ich habe das Vue-Loader-Plugin basierend auf der WebPack Loader-API entwickelt, damit wir Vue-Komponenten in einem solchen einzigen Dateiformat (*.vue) schreiben können:
<Styles> .MY-Komponent H2 {Farbe: rot;} </style> <semplate> <div> <h2> Hallo aus {{msg}} </h2> <Andere-Komponenten> </other-component> </div> </template> <script> // Folgen Sie dem CommonJS-Modulenmodulenmodulenmodul-Format-Format VARCOMPONENT = ANTERSETZT (usw.). module.exports = {data: function () {return {msg: 'vue-loader'}}, Komponenten: {'other component': othercomponent}} </script>Gleichzeitig können Sie auch andere Präprozessoren in der Datei *.vue verwenden. Installieren Sie einfach den entsprechenden WebPack Loader:
<style lang="stylus">.my-component h2 color red</style><template lang="jade">div.my-component h2 Hello from {{msg}}</template><script lang="babel">// Use Babel to compile ES2015export default { data () { return { msg: 'Hello from Babel!' }}} </script>Ein solches Komponentenformat integriert die drei Elemente der Vorlage, des Stils und der Logik einer Komponente in dieselbe Datei, was für Entwicklung, Wiederverwendung und Wartung geeignet ist. Darüber hinaus unterstützt Vue.js selbst eine asynchrone Belastung von Komponenten und kann in Kombination mit der Chunking -Verpackungsfunktion von WebPack problemlos die asynchrone Belastung von Komponenten auf Bedarf implementieren.
Andere Funktionen
Vue.js hat mehrere andere erwähnte Funktionen:
Erstellen Sie eine VUE -Instanz mit New VUE ()
Wir können zuerst eine HTML -Seite initialisieren und dann müssen wir die JS -Datei von Vues vorstellen. Es gibt viele Möglichkeiten, es vorzustellen. Wir können Vue's CDN in Skript einführen oder Vue min.js auf der offiziellen Website herunterladen oder eine Vue -Abhängigkeit mit NPM installieren. Für den Einfachheit halber wird dieser Artikel mit CDN eingeführt.
<! DocType html> <html> <kopf> <titels> Lernen Sie von Kratzer?
Stellen Sie bei der Entwicklung sicher, dass Sie unkomprimierte Versionen verwenden, da unkomprimierte Versionen nützliche detaillierte Warnungen liefern und Ihnen viel Zeit für Ihr Code schreiben.
Wir schreiben zuerst eine DIV in den Körper, erstellen eine Vue -Instanz und binden dann die Instanz und die Div.
Wenn Sie eine neue VUE -Instanz erstellen, verwenden Sie den Vue () -Konstruktor und weisen Sie Ihren Mountspunkt in Ihrer Instanz auf. Dieser Mountspunkt ist die Grenze der Vue -Instanz, die Sie teilen möchten. Der Mountspunkt und die Instanzgrenze entsprechen eins durch eins. Sie können nur Transaktionen innerhalb der Instanzgrenze am Mountspunkt verarbeiten, jedoch nicht Transaktionen außerhalb der Instanzgrenze an Ihrem Mountspunkt.
Der Parameter zum Einstellen des Mountspunkts in der VUE -Instanz lautet "EL", und der Wert von EL kann durch das DOM -Element definiert werden.
<! DocType html> <html> <Head> <titels> Lernen Sie von Grund auf. // Erstellen Sie eine neue Vue -Instanz und setzen Sie den Mountspunkt var v = neuer VUE ({el: '#vueinstance'}); </script> </body> </html>Wie Sie oben sehen können, erstellt New Vue () eine neue Instanz und gibt dann ein DOM -Element als Mountspunkt der Instanz an. Bei der Definition des Mountspunkts verwenden wir die ID des CSS -Selektors, um ihn zu definieren. Der sofortige Name kann auch für spätere Anrufe selbst definiert werden.
Verwenden von V-Model zur bidirektionalen Datenbindung
Wir können V-Model verwenden, um das Eingangs-Eingangsfeld zu binden, damit wir dynamisch den Wert des Datenobjekts erhalten. Sie können sich V-Model als eine bestimmte Eigenschaft vorstellen, genau wie das Attribut eines HTML-Elements. Die Bindung von Zwei-Wege-Daten hier kann für viele Formelemente wie Eingabe, TextArea und Auswahl verwendet werden.
Vue verwendet den Befehl v-model, um Daten zu binden, und diese Daten sind die Daten, die wir über Benutzereingabeberationen aktualisiert werden sollen.
In unserem folgenden Beispiel möchten wir beispielsweise den Datennamen am Eingabe -Tag binden und die Deklaration im Datenobjekt in der VUE -Instanz implementieren.
<div id = "vueinstance"> Geben Sie Ihren Namen ein: <Eingabe type = "text" v-model = "name"> </div>
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> // Nach dieser Zeile wird <Script> var v = new VUE ({El: '#vueinstance', Data: {name: '_appian'}}}}}}}}}}}}}} {/script 'weggelassen: {name:' _appian '}}); </script';Unabhängig davon, wie oft der Benutzer eintritt, wird dieser Name automatisch aktualisiert. Wenn der Wert des Namens geändert wird, werden die Werte an anderen Stellen, an denen der Name zugeordnet wird, ebenfalls geändert.
Der Grund für die synchrone Modifikation dieses Eingabefelds und die Zuordnung besteht darin, den V-Model-Befehl zu verwenden, damit die Daten über den zugrunde liegenden Datenstrom gebunden und dann direkt geändert werden können. Dies ist das Konzept der Zwei-Wege-Bindung von Daten.
Um dieses Konzept zu beweisen, können wir $ Data verwenden, um die Zuordnung der zu sehenen Daten auszudrucken.
<div id = "vueinstance"> Geben Sie Ihren Namen ein: <Eingabe type = "text" v-model = "name"> <p> {{$ data | JSON}} </p> //#1 <p> {{name}} </p> //#2 </div> <Script> var v = new vue ({el: '#vueinstance', data: {name: '_appian'}}); </script>Es ist 1:
$ data ist das von der VUE -Instanz beobachtete Datenobjekt. Der wesentliche Typ ist ein Objekt, daher kann es in JSON konvertiert werden. Kann durch ein neues Objekt ersetzt werden. Die Instanz stellt die Eigenschaften seines Datenobjekts vor.
{{}}, interpolieren Sie mit zwei lockigen Klammern. Der hier eingefügte Wert ist der Wert, der sich in Echtzeit durch $ Data ändert.
| JSON, nur eine intuitivere Möglichkeit, Daten anzuzeigen. Es kann auch als Filter angesehen werden, genau wie die Wirkung von JSON.Stringify ().
Punkt 2:
{{name}} bedeutet, Datenvariablen direkt in den Interpolationsausdruck und zwei lockige Klammern einzufügen, um den Wert des Namens direkt zuzuordnen.
VUE ist so einfach, die bidirektionale Bindung von Daten durchzuführen. Es erfordert nur einen V-Model-Befehl, ohne JS oder JQ zu verwenden, um Daten zu steuern. Ich glaube, Sie können die Logik aus den obigen Beispielen klären.
Verwenden Sie V-on für die Ereignisbindung
VUE verwendet V-On-Anweisungen für das Hören und Ereignisverteilung. Sie können eine Methode erstellen, um das Hörereignis in der VUE -Instanz zu binden, und eine Methode zum Versenden eines Klickereignisses erstellen.
Im folgenden Beispiel erstellen wir eine Methode mit Say, die an eine Taste gebunden ist. Der Effekt des Klickens besteht darin, ein Begrüßungsfeld mit dem Benutzernamen aufzuteilen. Um diese Methode der Schaltfläche zuzuweisen, müssen wir V-on verwenden: Klicken Sie hier, um das Ereignis zu binden.
<div id = "vueinstance"> Geben Sie Ihren Namen ein: <Eingabe type = "text" v-model = "name"> <button v-on: click = "say"> Willkommen zu klicken Sie auf </button> //#1 <button @klick = "Say"> Willkommen zu klicken Sie auf </butth> //#2 </div>
<Script> var v = new vue ({el: '#vueinstance', data: {name: '_appian'}, methods: {say: function () {alert ('willkommen' + this.name);}}); </script>Natürlich können Sie nicht nur Klick -Click -Ereignisse binden, sondern auch andere Mausereignisse, Tastatureingangsereignisse und andere JS -Ereignisentypen binden. Zum Beispiel V-on: Mausover, V-on: Keydown, V-on: Senden, V-on: Keypress, V-On: KeyUp.13 usw. oder einige andere benutzerdefinierte Ereignisse.
Während des Entwicklungsprozesses können Sie häufig die Ereignisbindung verwenden. Es ist ein bisschen problematisch, V-on zu schreiben. Im obigen Beispiel gibt es zwei Möglichkeiten zum Schreiben, #2 ist die Abkürzung von #1. Wenn ich @ anstelle von V-On verwende, werde ich hier nicht viel sagen.
Verwenden Sie V-IF oder V-Show, um bedingte Urteile zu fällen
Wenn wir möchten, dass der Benutzer das Begrüßungspop-up-Fenster nach dem Anmelden sieht, und wenn wir nicht angemeldet sind, geben wir ihm eine Anmeldeschnittstelle. Vue wird uns V-IF- und V-Show-Anweisungen zur Steuerung des Anzeigeinhalts unter verschiedenen Anmeldeszuständen geben.
Mit dem vorherigen Beispiel können wir den Wert von LoginStatus verwenden, um zu steuern, ob sich ein Anmeldung angemeldet hat. Wenn es wahr ist, wird das Eingabefeld und die Schaltfläche für die Eingabe und die Schaltfläche angezeigt, damit das Begrüßungs-Popup-Fenster angezeigt wird. Wenn es jedoch falsch ist (das heißt, es ist nicht angemeldet), können Sie nur das Eingabefeld und die Einreichungsschaltfläche für die Eingabe der Kontonummer und des Kennworts sehen (es gibt keine Authentifizierung, nur der Anmeldestatus wird geändert).
<div id = "vueinstance"> // Abschnitt angezeigt, wenn loginstatus wahr ist loginStatus ist falsch <Abschnitt v-if = "! LoginStatus"> LoginPerson: <Eingabe type = "text"> loginpassword: <Eingabe type = "password"> <schalttaste @klick = "salblogInstatus"> Login </button> </abschnitt> </div>
<Script> var v = new vue ({el: '#vueinstance', data: {name: '_appian', loginstatus: false}, methods: {say: function () {alert ('willkommen' + this.name);}, switchloginStatus: function () {this.loginStatus =! Dies.LoginStatus =!Die Ausführung davon ist ein Beispiel V. Diese Zeigeung ist eine Frage, die von sich selbst verstanden werden muss, also werde ich hier nicht darüber sprechen.
Im obigen Beispiel kann der gleiche Effekt erhalten werden, solange V-IF durch V-Show ersetzt wird. Sowohl V-IF als auch V-Show unterstützen V-ELSE, aber das vorherige Geschwisterelement des Tags, das den Befehl V-ELSE bindet, muss V-IF oder V-Show haben.
Wenn Sie im obigen Beispiel nur auf die Schaltfläche "Anmeldung" oder "Anmeldung ausführen" klicken, wird die SignalloginStatus -Methode ausgelöst. Solange diese Methode ausgelöst wird, ändert sich der Status von LoginStatus (Wechsel in True und False), wodurch die Änderung des Urteilsbedingungsergebnisses von V-IF in HTML geändert wird. Basierend auf dem aktuellen Booleschen Status von Loginstatus ist der angezeigte Abschnitt ein Abschnitt in verschiedenen Zuständen.
Was ist der Unterschied zwischen V-Show und V-wenn?
Beim Umschalten von V-IF-Blöcken verfügt VUE über einen lokalen Kompilierungs-/Deinstallationsprozess, da Vorlagen in V-IF auch Datenbindung oder Unterkomponenten enthalten können. V-IF ist ein echtes bedingtes Rendering, da die Bedingungsblöcke Ereignishörer und Unterkomponenten im sanften Block während des Schalters richtig zerstören und wieder aufbauen.
V -IF ist auch faul: Wenn die Bedingung während des ersten Renderings falsch ist, wird nichts getan - die lokale Zusammenstellung beginnt, wenn die Bedingung zum ersten Mal wahr wird (die Zusammenstellung wird zwischengespeichert).
Im Gegensatz dazu ist die V -Show viel einfacher - Elemente werden immer zusammengestellt und erhalten, einfach auf der Grundlage von CSS umgeschaltet.
Im Allgemeinen weist V-IF einen höheren Schaltverbrauch und die V-Show mit einem höheren anfänglichen Renderverbrauch auf. Daher ist es besser, die V-Show häufig zu wechseln, und es ist besser, V-wenn zu ändern, wenn die Bedingungen zur Laufzeit nicht sehr hoch sind.
Dieser Unterschied ist für Ihre aktuelle Entwicklung möglicherweise nicht wichtig, aber Sie müssen weiterhin Aufmerksamkeit schenken und aufpassen, denn wenn Ihre Projektentwicklung größer wird, wird dies wichtig.
Verwenden Sie V-für die Ausgabeliste
Wenn Sie ein Geschäftsmann sind, der eine E-Commerce-Plattform betreibt, müssen Sie über viele Seiten verfügen, die die Produktion der Produktliste ausführen müssen. Die V-für-Richtlinie ermöglicht das Schleifen unseres Array-Objekts, das als "jedes Element in ArrayObj" ausgesprochen wird.
Im folgenden Beispiel werden wir die V-für-Anweisung verwenden, um eine Produktliste aufzurufen. Jedes Produkt befindet sich in einem Li, wobei der Name, der Preis und der Produkttyp des Produkts ausgegeben werden.
<div id = "vueinstance"> <ul> <li v -for = "el in products"> {{el.name}} - ￥ {{el. Preis}} - {{el. Kategorie}} </li> </ul> </div> <Script> var v = new Vue ({el: '#vueinstance', Daten: {Produkte: [{Name: 'Mikrophon', Preis: 25, Kategorie: 'Elektronik'}, {Name 'Laptop Case', Preis: 15, Kategorie: 'Accessories'}, {Name: 'Screener, Price: 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, category: category: category:' category: 'category:' access 70, Kategorie: 'Electronics'}, {Name: 'Maus', Preis: 40, Kategorie: 'Elektronik'}, {Name: 'Ohrhörer', Preis: 20, Kategorie: 'Electronics'}, {Name: 'Monitor', Preis: 120, Kategorie: 'Electronics'}]}}});Natürlich kann das Array -Objekt in Daten ohne die obige Definition definiert werden. Wir können sie aus der Datenbank importieren oder die AJAX -Anforderung verwenden, um sie zu erhalten. Dies dient nur zur Demonstration von V-für.
Manchmal müssen wir möglicherweise das entsprechende Index des Produkts in das Array -Objekt erhalten. Wir können es mit $ index bekommen.
//#1 <li v -for = "el in produkten"> {{$ index}} - {{{el.name}} - ￥ {{el. Preis}} - {{el. Kategorie}} </li> //#2 <li v -for = "(INDEX, EL) In Produkten"> {{index}} - {{{El.Name}} - ￥ {{{El. Preis}} - {{el. Kategorie}} </li>Berechnete Eigenschaften
Im Anwendungsszenario der Berechnung von Attributen wird es verwendet, wenn ein variabler Wert vorhanden ist, der von anderen Variablen berechnet werden muss.
Wenn der Benutzer beispielsweise eine Nummer X in das Eingabefeld eingibt, kehrt er automatisch zum Benutzer des Quadrats X² der Nummer zurück. Sie müssen die Eingabefelddaten binden, und wenn die Daten geändert werden, berechnet sie sofort das Quadrat.
<div id = "vueinstance"> Geben Sie eine Zahl ein: <Eingabe type = "text" v-model = "value"> <p> Berechnungsergebnis: {{Square}} </p> </div> <Script> var v = new vue ({el: '#vueinstance', Daten: {value: 1}, berechnet: {square: function () {return this.Value * this.Value;}}}); </script>Berechnen Sie Attributdefinitionswerte, indem Sie eine Reihe von Funktionen definieren, genau wie wenn wir zuvor Methodenobjekte definiert haben. Beispielsweise wird die Quadratmethode verwendet, um die Variable "Quadrat" zu berechnen, und der Rückgabewert seiner Methode ist das Produkt von zwei diese.
Als nächstes können wir berechnet werden, um ein komplizierteres Beispiel zu erstellen. Das System nimmt zufällig eine Zahl innerhalb von 1 ~ 10. Der Benutzer kann im Eingangsfeld zufällig eine Zahl innerhalb von 1 ~ 10 eingeben. Wenn die Eingabe des Benutzers mit der Zufallszahl des Systems übereinstimmt, ist das Spiel erfolgreich, da es ansonsten fehlschlägt.
<div id = "vueinstance"> Geben Sie die Zahl innerhalb von 1 ~ 10: <Eingabe type = "text" v-model = "value"> <p> Berechnungsergebnis: {{resultmsg}} </p> </div> ein <script> var V = new Vue({ el : '#vueInstance', data : { value : null, randNum : 5//The first random number is 5 }, methods : { getRandNum: function(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; } }, computed : { resultMsg : function(){ if (this.value == this.randnum) {this.randnum = this.getrandnum (1, 10);PostScript
Bisher konnten Sie die grundlegende Verwendung von VUE, einem der einfachsten und schönsten Frameworks der Welt, beherrschen. Seine Konstruktion hat seine eigenen kompletten Designideen und wird immer beliebter. Dieses Framework ist klein und leicht genug, um Ihnen eine glattere Benutzererfahrung in Ihrer Entwicklung zu bieten und die Entwicklungseffizienz effektiv zu verbessern. Ich habe oben eine Reihe von Beispielen gegeben, haben Sie sie alle gemeistert?