Richtlinie
Obwohl es so aussieht, als ob es der Definition in Angular ähnlich ist, ist die Richtlinie eine Ausdehnung der DOM -Funktionen, aber die Richtlinie von Vue ist viel schwächer. Da die Vue -Komponente tatsächlich Operationen auf DOM enthält, ist es die meiste Zeit, wenn wir eine allgemeine Komponente schreiben, eher eine Komponente als eine Richtlinie, und in Angular schreiben wir eine allgemeine Komponente, es handelt sich normalerweise um eine Richtlinie.
Also sagte ich, dass die Richtlinie von Vues viel schwächer als eckig ist, oder es kann als viel reiner gesagt werden. Es handelt sich um eine Erweiterung der DOM -Funktionen, nicht um die Logik in Bezug auf DOM zu verkörpern. Wenn Sie interessiert sind, können Sie diese beiden UI -Bibliotheken verstehen:
• vux https://github.com/airyland/vux
• Angular Bootstrap https://github.com/angular-ui/bootstrap
Im Vergleich dazu werden wir feststellen, dass wir in VUE tatsächlich eine allgemeine Komponente (in der Tat, ob allgemein oder nicht) einkapseln, aber in Winkel eine Richtlinie, da der Controller in Winkel nur einen $ Scope -Bereich erzeugen kann. Es kann einfach in der VUE -Richtlinie = Angular Directive + Controller gedacht werden. Wie bereits erwähnt, ähneln viele VUE -Konstruktionen wie Angular2. Die Richtlinie in VUE kann im Grunde genommen der Richtlinie in Angular2 gleich sein, werden aber nicht mit der Richtlinie in Angular verwechselt.
Um irreführende zu vermeiden, wird die Winkelrichtlinie später nicht mehr verglichen.
Lebenszyklus
Der Lebenszyklus ist in drei Schritte unterteilt:
• Binden Sie Trigger, wenn sie zum ersten Mal an das DOM -Element gebunden ist
• Das Update Bind wird sofort nach Abschluss ausgelöst und wird ausgelöst, wenn die Parameter in Zukunft aktualisiert werden.
• Unbind -Auslöser beim Entbinden und DOM -Elementen sind ungebraut
Die API ist so prägnant. . .
Unter ihnen ist das Update das Wichtigste, dh, wenn die Richtlinie eine Aktualisierung eines Wertes erhält, wird der entsprechende Code ausgeführt. Die von der Aktualisierungsfunktion empfangenen Parameter sind die Werte, die vom Benutzer über Attr.
Implementieren wir unten eine einfache Anweisung, mit der die Inhalteingabe nach TODO -Liste (Formularüberprüfung) überprüfen wird. Die Grundstruktur der Richtlinie lautet wie folgt:
Vue.directive ("minLength", {bind: function () {}, update: function (value) {}, ungebind: function () {}});Anschließend müssen wir eine Überprüfung durchführen, wenn der Benutzer eingibt. Hier implementieren wir eine einfache Überprüfung der Minenlänge. Der Code lautet wie folgt:
Vue.directive("minlength", { bind: function() { var self = this; var el = this.el; el.addEventListener("keydown", function(e) { if(e.keyCode === 13) { if(el.value.length < self.minlength) { e.preventDefault(); } } }); var submit = El.ParentNode.querySelector ("Taste, Typ = ']"); {}});Die grundlegende Logik bindet Ereignisse während der BIND -Stufe und füllt dann Urteile auf der Grundlage des während des Updates übergebenen Minlenlängenwerts.
Gegenwärtig sollte die Richtlinie darin bestehen, ähnliche Funktionen zu erzielen, und natürlich gibt es immer noch viele Details der Verwendung, sodass ich nicht auf Details eingehen werde. Die Richtlinie ist in Vue kein sehr wichtiger Teil. Personen schreiben normalerweise Komponenten beim Schreiben von Code.
Filter und Mixins sehen relativ einfach aus, überspringen Sie es.
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.