1. Einführung in Vue.js
1. Die Hauptmerkmale von VUE: (1) prägnant (2) leicht (3) schneller (4) Datenfahrer (5) Modulfreundlich (6) Komponentierungen
(1) präzise
Hier ist ein Stück Angular-Code, um eine bidreihige Bindung zu implementieren
// html<body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-model="note"> </div></body>// jsvar myModule = angular.module('myApp', []); MyModule.Controller ('myctrl', ['$ scopp', function ($ scope) {$ scope.note = '';]);Dann schauen Sie sich den Vue -Code an:
// html <body> <div id = "app"> <p> {{note}} </p> <Eingabe type = "text" v-model = "note"> </div> </body> // jsvar vm = new Vue ({El: '#App', Daten: {Anmerkung: '}}))Im Vergleich dazu denke ich persönlich, dass Vue's Code -Schreibstil prägnanter und leicht zu verstehen ist.
(2) nicht ohne Eleganz
Obwohl Vue ein relativ leichtes Framework ist, ist es einfach und leicht und sehr benutzerfreundlich. Die API, die sie bietet, ist auch sehr leicht zu verstehen und bietet auch einige sehr praktische Anweisungen und Attribute.
Zum Beispiel:
1) Klickereignis binden
<a v-on: click = "dosomething"> </a>
Es kann abgekürzt werden als:
<a @click = "dosomething"> </a>
2) Dynamische Attribute binden
<a v-bind: href = "url"> </a>
Es kann abgekürzt werden als:
<a: href = "url"> </a>
3) Bequemer Modifikator
<!-Verhindern
4) Praktische Parametereigenschaften
<!-Dobounce Setzen Sie eine Mindestverzögerung-> <Eingabe v-Model = "Notiz" dunounce = "500"> <!-Daten in "Änderung" anstelle von "Eingabeereignissen" aktualisieren-> <Eingabe v-Model = "MSG" Lazy>
Wie wäre es damit, fühlt es sich so elegant an?
(3) Kleine Tipps
Apropos Kleinheit, wir sollten zunächst auf die Quellcodegröße von VUE achten. Der Quellcode der VUE -Produktionsversion (d. H. Min -Version) beträgt nur 72,9 KB. Die offizielle Website besagt, dass GZIP nach der Komprimierung nur 25,11 KB beträgt, was halb kleiner ist als der 144 KB von Angular.
Ein Vorteil der Kompaktheit besteht darin, dass Benutzer entsprechende Lösungen freier auswählen können und Benutzern mehr Raum für die Übereinstimmung mit anderen Bibliotheken bietet.
Zum Beispiel beinhaltet der Kern von VUE nicht standardmäßig Routing- und AJAX-Funktionen. Wenn Sie jedoch Routing und AJAX in Ihrem Projekt benötigen, können Sie die offizielle Bibliotheks-Vue-Router und Drittanbieter-Plug-In-Vue-Ressource von Vue direkt verwenden. Gleichzeitig können Sie auch andere Bibliotheken oder Plug-Ins verwenden, die Sie verwenden möchten, wie z. B. JQuery's Ajax usw.
Fühlt es sich nicht sehr flexibel an?
(4) Es gibt viele großartige Meister
Obwohl Vue klein ist, ist es "Sparrow ist klein und hat alle inneren Organe" und es ist auch einfach, groß angelegte Anwendungen zu bauen.
1) Modular
In Kombination mit einigen Modul-Gebäudewerkzeugen von Drittanbietern wie CommonJs, Anforderungen oder SeEJs kann die Codemodularität leicht erreicht werden.
Hier empfehle ich jedoch nicht die oben genannten Bauwerkzeuge. Es ist derzeit die beliebteste Lösung, um die modulare Funktion von ES6 direkt zu verwenden und sie dann entsprechend mit WebPack zu verpacken.
Wenn Sie die Funktionen des ES6 -Moduls nicht verstehen, finden Sie in der Link -Adresse für Einzelheiten:
In zukünftigen Artikeln werde ich es auch vorstellen, einschließlich der Konfiguration von WebPack.
2) Komponentierung
Die Komponentierungsfunktion von Vue ist ein Highlight davon. Durch Einfügen der HTML-, CSS- und JS -Code einer bestimmten Komponente in eine .vue -Datei für die Verwaltung kann die Wartung des Codes erheblich verbessert werden.
Zum Beispiel:
// app.vue <template> <div v-Text = "note"> </div> </template> <skript> standardmäßig exportieren {data () {return {Hinweis: 'Dies ist die HTML-Vorlage einer Komponente! '}}} </script> <style Scoped> .box {color: #000;} </style>Wir können auch einige Vorverarbeitungssprachen in die Komponente schreiben:
// app.vue <template lang = 'jade'> div (class = "box" v-text = "text") </template> <script> Standard-Standard-Standard {data () {return {Hinweis: 'Dies ist die HTML-Vorlage einer Komponente! '}}} </script> <style lang = "styles">. Boxfarbe: #000 </style>Natürlich müssen wir es über WebPack verpacken. Es wird empfohlen, WebPack + Vue-Loader zu verwenden und gleichzeitig die ES6-Syntax zu verwenden. Babel muss zur Konvertierung installiert werden. Da der Artikel eine kurze Diskussion über Vue.js ist, werde ich hier keine ausführliche Einführung geben.
3) Routing
Wie Angular hat Vue seine Routing -Funktionen. Durch die Routing-Funktion können wir das Laden der einzelnen Komponente auf dem Nachfragen erkennen und einfach eine einseitige Anwendung erstellen. Hier ist eine einfache Routing -Konfigurationsdatei:
// Router.js'use strict'export Standardfunktion (Router) {Router.map ({'/': {Komponent: Funktion (Resolve) {fordert (['./ components/foo.vue'], Resolve)}}, '/foo': {{component: function (resolve) {{{. }, '/bar': {Komponente: Funktion (Resolve) {fordert (['./ Komponenten/bar.vue'], Resolve)}}})}2. Einführung in BootPage -Komponenten
Tatsächlich ist es keine High-End-Komponente. Im Gegenteil, es ist wirklich nur eine einfache Tischpagingkomponente. Es liegt hauptsächlich daran, dass ich in meinem letzten Projekt eine Tabelle Paging -Komponente brauche. Die vue offiziellen Komponentenbibliothek -Paginationskomponenten sind zu leistungsfähig oder nicht für mich geeignet, also habe ich selbst einen geschrieben, um damit auszukommen. Vielleicht braucht jemand wie ich eine so einfache Paging -Komponente, um einfache Paging -Funktionen zu implementieren. Ich werde es hier teilen und jeder wird die Gruben ausfüllen.
Wenn Sie High-End-Komponenten benötigen, können Sie zur offiziellen Vue-Komponentenbibliothek übergehen
(1) Wie man benutzt
In der .vue -Komponentendatei schreiben wir eine solche Vorlage, dh HTML -Code:
<table> <Thead> <tr> <Th> id </th> <Th> Name </th> <Th> Inhalt </th> <Th> Bemerkung </th> </tr> </thead> <tbody> <ttr v-for = "Daten in Tablelist"> <td v-Text = "Data.num"> </td> <td> <td v-Text = "Data.Author"> </td> <td v-v-Text = "Data.Author"> </td> <td v-v-Text = "Data.Author"> </td> <td v-v-Text = "Data.Author"> </td> <td v-v-Text = "Data.Author"> </td> <td v-v-text v-text="data.contents"></td> <td v-text="data.remark"></td> </tbody> <tfoot> <tr> <td colspan="4"> <div> <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page> </div> </td> </tr> </tfoot> </table>
In der <Stief-Page> -Tag bezieht sich Async darauf, ob Daten von der Serverseite erhalten werden sollen, False ist nein. Daten sind ein statisches tabellarisches Datenarray. Objektiv ist eine Reihe von Zeilen, die pro Seite angezeigt werden. Page-len ist die Anzahl der Seiten, die angezeigt werden können.
JavaScript -Code, der statische Daten verwendet, dh der Inhalt im Skript -Tag ist wie folgt:
<Script> Startpage importieren von './Components/bootPage.vue' exportieren Standard {data () {return {lenarr: [10, 50, 100], // Anzeigelänge pro pagelen: 5, // Anzahl der Seiten, die angezeigt werden können: [{num: 1, Autor: 'luozh', contents: ', contents:', '123', ',', '123', ',', '123', ',', ',', '123', ',', ',', 1, 1, 1: {{uby ', contents:', ',' 123 ',', ',', ',', ',', ',', ',', ',', ', Bart:', 1 1, ',', ',', ',', ',', ',', ',' 123 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}, {num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}], // Tabelle Rohdaten, keine Tabellenliste bei der Verwendung von Serverdaten: [] // Verpackungsdaten, die von der Paginationskomponente zurückgegeben werden}}, Komponenten: {BootPage}, Ereignisse: {// Tabellendaten, die von der Paginationskomponente 'Daten' (Data) {this.tablelist = Data}}}}}}}}}}}}}}}}}}}}}} -Script> script> script> script> {tabablist = data}}}}}}}}}} script> script> {tabablist = scriptlist = script.Im Allgemeinen verwenden wir selten statische tabellarische Daten, und die meisten Anwendungsdaten werden von der Serverseite erhalten. Hier finden Sie eine Methode, um Server -Paginierungsdaten zu erhalten:
Die Komponente HTML, die Serverdaten verwendet, lautet wie folgt:
<Boot-Page: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
wobei URL die Anforderungsadresse des Servers ist; Param ist das Parameterobjekt, das an den Server gesendet werden muss.
Der Code, den Serverdaten JavaScript verwenden, lautet wie folgt:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per pageLen: 5, // Number of pages that can be displayed url: '/bootpage/', // Request path param: {}, // Pass parameter tableList to the server: [] // Post-paging data returned by Die Paginationskomponente}}, Methoden: {refresh () {this. $ scunning ('reprosresh') // Eine Tabelle -Aktualisierungsfunktion wird hier bereitgestellt}}, Komponenten: {BootPage}, Ereignisse: {// Die Tabellendaten, die von der Paginationskomponente zurückgegeben wurden (hier sind die Daten zurückgegeben, die durch den Server) zurückgegeben wurden.HINWEIS: Zusätzlich zum an die Komponententabelle übergebenen Array -Inhalt benötigt der Server auch einen Schlüsselnamen der Gesamtzahl der Seiten mit dem Namen Page_Num
(2) Komponentenquellcode
Für die Implementierung von Pagination wird der Quellcode hier nicht angezeigt. Ich habe den gesamten Quellcode in meinen GitHub, Adresse, hochgeladen
Lassen Sie mich Sie im Voraus erinnern: Da ich einige Stunden Zeit habe, um diese Komponente zu vertreiben, muss ich in Schreibformaten und Spezifikationen von VUE -Komponenten unzureichend gewesen sein und war nicht völlig unabhängig, also fülle ich bewusst die Grube aus. Ich werde es hier nur teilen.
Natürlich können Sie auch den Code der Komponente nach Belieben ändern, um die Verwendung Ihres Projekts zu entsprechen. Schließlich ist es ziemlich kompliziert, große und vollständige Paging -Komponenten zu implementieren.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.