Als treuer Benutzer von Vue.js denke ich, dass es notwendig ist, einige Artikel zu schreiben, um diese schöne Sprache zu loben. Meine allgemeine Bewertung davon ist "einfach, aber elegant, klein, aber nicht an talentierten Menschen". Im Folgenden wird Ihnen Vue.js in diesem Satz vorgestellt, in der Hoffnung, Ihr Interesse an Vue.js.
Einführung in Vue.js
Der Autor von Vue.js ist Evan Sie (Sie Yuxi), der bei Google Creative Lab arbeitet. Obwohl Vue ein persönliches Projekt ist, bin ich persönlich der Meinung, dass es den AngularJs von Google in Bezug auf Entwicklungsaussichten nicht unterlegen ist. Ich werde einige einfache Vergleiche mit Vue (Angular 1.0+ Version) machen.
Die Hauptmerkmale von VUE sind auf seiner offiziellen Website (http://cn.vuejs.org/) wie vorgestellt:
(1) präzise (2) Leicht (3) Schneller (4) Datenfahrer (5) Modulfreundlich (6) Komponentierisierung
Einfach
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> <input 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.
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) Bequeme Modifikatoren
<!-Klicken Sie auf Ereignisse aus Blasen->->
<a @click.stop = "dosomething"> </a>
<!-Ereignisse werden nur ausgelöst, wenn die Eingabetaste gedrückt wird->
<input @keyUp.enter = "subieren">
(4) Praktische Parametereigenschaften
<!-Downounce legt eine Mindestverzögerung fest->
<input v-model = "note" debounce = "500">
<!-Daten in "Änderung" anstelle des "Eingabe" -Events aktualisieren->
<input v-model = "msg" Lazy>
Wie wäre es damit, fühlt es sich so elegant an?
Klein
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?
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
In zukünftigen Artikeln werde ich es auch vorstellen, einschließlich der Konfiguration von WebPack.
(2) Komponentisierung
Die Komponentierungsfunktion von Vue ist ein Highlight davon. Durch Einfügen der HTML-, CSS- und JS -Code einer Komponente in die Seite in eine .vue -Datei für die Verwaltung kann die Wartung des Codes erheblich verbessert werden.
Zum Beispiel:
// app.vue<Semplate> <div v-text = "note"> </div> </template> <skript> Standard-Standard-Standard {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 die On-Demand-Belastung jeder Komponente realisieren 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)}}})}Um die spezifische Routing-Konfiguration und -nutzung anzuzeigen
Zusammenfassen
Ich persönlich glaube, dass einige Front-End-Technologien integriert sind. Das Erlernen einer Sprache oder eines Frameworks selbst besteht nicht darin, ihre Technologie zu lernen. Das Wichtigste ist, sein Denken zu lernen. Nur das Denkstufe wird erweitert, und Sie werden es leicht finden, andere Technologien zu lernen. Was Vue uns bringt, ist ein neues Denken am Frontend, um Probleme zu lösen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.