Vue.js ist eine Bibliothek zum Erstellen von datengesteuerten Webschnittstellen. Das Ziel von VUE.JS ist es, reaktionsschnelle Datenbindung und kombinierte Ansichtskomponenten durch die einfachste API zu implementieren. (Dies ist eine offizielle Erklärung!)
Der Editor hat AngularJs nie verwendet und reagiert auch nicht. Ich kann die Unterschiede in den drei im Detail nicht erklären. Wenn Sie wissen möchten, gibt es eine offizielle Analyse. Bitte klicken Sie hier, um es anzuzeigen.
Der Herausgeber ist seit mehr als einem Jahr in Front-End-Entwicklung tätig. Zu Beginn gab es in der Front-End-Entwicklung zu viele Technologien. Der Herausgeber war machtlos und konnte nicht berücksichtigen. Nach dem Verständnis entschied er sich dafür, den Lernweg des Lernens von einheimischen JS -Basis -Fusionen und JQuery zu lernen. Der Editor verwendet Vue.js wegen Geschäftsbedürfnissen. Warum wählen Sie nicht AngularJs? Tatsächlich können Sie JQuery nicht gleichzeitig verlassen. Vue.js und JQuery können perfekt kompatibel sein. Aufgrund dieses Projekts arbeitet der Herausgeber lange Zeit über die Zeit und studiert ständig, um die Zunahme der Projektentwicklungszeit zu vermeiden. Lassen Sie uns ohne weiteres einige der Vue -Lernzusammenfassungen des Herausgebers beginnen. Wenn Sie nicht gut schreiben, sind Sie nicht daran gewöhnt. Artikel zu schreiben war schon immer meine Schwäche. . . .
Hier ist das Beispiel von Vue als Elternkette
Die untergeordnete Komponente kann über die übergeordnete Komponente übergeben werden. Auf die Root -Instanz kann mit dieser Wurzel zugegriffen werden. Der Elternteil hat ein Array This.Cildren und alle seine Elemente; Natürlich können unsere Komponenten im Projekt nicht nur ein oder zwei haben. Wenn es zu viele Komponenten gibt, ist es für uns schwierig, sich an den Ort der Komponente bei Kindern zu erinnern. Wir können die V-Ref-Direktive verwenden, um einen Haken für unsere Komponente zu erstellen. Dieser Haken ist der Index, wenn unsere anderen Komponenten auf die Komponente zugreifen.
// Dies ist eine meiner Komponenten <msg v-ref: msgs> </msg> // zu diesem Zeitpunkt haben wir einen Index von msgs für diese MSG-Komponente erstellt // Wir können auf die Komponente var vm = new VUE ({}) zugreifen; var children = vm. $ refs.msgs // Zugriff auf unsere untergeordneten Komponenten auf diese Weise // V-Ref ist ein Array oder Objekt, das eine Sammlung von Komponenten ist, die wir alle Ref-Hooks erstellen.Hier zeige ich Ihnen ein Bild und schaue mir den Inhalt mit Eltern, Kindern und $ refs an (es scheint, dass das Bild ein bisschen verschwommen ist und es kein vollständiges dynamisches Bild ist. Es ist peinlich und kann nicht klar sehen. Sie können eine Demo erstellen und sie ausdrucken!)
Obwohl wir auf diese Weise direkt auf die Komponenten zugreifen können, wird dies nicht empfohlen, da es für Kinder sehr schlecht ist, den Zustand der übergeordneten Komponente direkt zu ändern, wodurch die übergeordneten und untergeordneten Komponenten fest gekoppelt werden. Idealerweise kann jede Komponente nur ihren eigenen Zustand ändern, da der Umfang jeder Komponente unabhängig ist.
In diesem Fall bringt Vue uns auch ihre benutzerdefinierten Ereignisse
Verwenden Sie $ Dispatch (), um Ereignisse zu entsenden, und die Ereignisse sprudeln entlang der übergeordneten Kette.
Verwenden Sie $ Broadcast (), um Ereignisse zu übertragen, und Ereignisse werden an alle Nachkommen übertragen.
Es sieht ein bisschen abstrakt aus, es ist einfacher zu verstehen mit einem Beispiel
// $ issatch () Bubble Case <!-Beispiel-> <div id = "app"> <!-Komponentenkommunikation 1-> <abschnitt> <div> <Label für = ""> MSG-Daten: </label> {{msg}} </div> <!-subcomponent-msg> </msg> </div> </divPon> </divponer id v-model = "msg"> <a href = "JavaScript:;" @klick = "add_data"> add </a> </div> </template> <skript> vue.comPonent ('msg', {// Der Syntaxzucker wird verwendet, um die Komponente direkt zu registrieren, und die einfache und kurzkürzige Template: '#msg', Daten: Funktion () {{MSG: 'ABC'}}, Methoden: {/}}}, methodien: {/wob Ereignis, die $ isspatch () wird ausgelöst. Dies. $ parent.add (par_msg); Das hört auf die entsprechende Antwort von 'add_msg': Funktion (msg) {// add_msg ist eine Methode, um die Subcomponent zu hören.Nachdem ich diesen Code gelesen habe, weiß ich, dass jeder die Verwendung von $ isspatch () kennt. Tatsächlich gibt es zwei Parameter. Der erste Parameter ist, dass die übergeordnete Komponente im Ereignisobjekt der untergeordneten Komponente auf einen Methodamen hört. Die beiden müssen konsistent sein; Der zweite Parameter sind die von der untergeordneten Komponente aktualisierten Daten, die auch an die Daten übergeben werden, die synchron an die übergeordnete Komponente aktualisiert werden sollen. Anschließend verwendet die übergeordnete Komponente diesen Parameter, um entsprechende Operationen auszuführen.
// Die Verwendung der $ Broadcast () -Methode ist die gleiche wie die von $ isspatch (). Der Unterschied besteht darin, dass das Ereignisobjekt in der untergeordneten Komponente erstellt wird und die in der übergeordnete Komponente ausgelöste Funktion im Gegenteil ist. Wir möchten hier sagen, dass, wenn die Daten der untergeordneten Komponente vollständig von den Daten der übergeordneten Komponente abhängt, die allgemeine Ereignisdeliefermethode nicht verwenden muss. Sie müssen nur die Daten der übergeordneten Komponente durch Props erhalten und an die untergeordnete Komponente binden.
<!-Komponentenkommunikation 2 $ Broadcast () Methode-> <abschnitt> <h3> Datenquelle hinzugefügt von der übergeordneten Komponente: </h3> <div> <label für = ""> id: </label> <div> <input type = "text" v-model = "id"> </div> </div> <div> <div> <label für = "> name: </label> </label> </</</</</</</</</</</</</</</</</<Plip> </</</</</</</</</</</</</</</</</</</</</</</</</</<Pl." v-model = "name"> </div> </div> <div> <Label für = ""> Host: </label> <div> <Eingabe type = "text" v-model = "Inst"> </div> </div> <div> <label für = "" for = ""> </label> <div> <a href = "javaScript:;" @click="add_table">Add</a></div></div><h3>The following table is the child component information:</h3><!-- Bind the parent component's table_data data to the child component--><broadcase :data="table_data"></broadcase></section><template id="broadcase"><div><table><thead><tr><th>id</th><th>Name</th><th>Hobbies</th></tr></tbody><tr v-for="list in data"><td>{{ list.id }}</td><td>{{ list.name }}</td><td>{{ list.inst}} </td> </tr> </tbody> </table> </div> </template> <script> vue.comPonent ('Broadcase', {// Dies ist der Syntaxzucker, der zur Registrierung der Komponenten verwendet wird, und die einfachen und die Verknüpfung der Parameter. Daten. '#app', data: {table_data: [{id: 1, name: 'gjei', inst: 'gjweir'}, {id: 2, name: 'jiuyer', inst: 'oiuyt'}]}, methods: {add_table: function () {var set = {id: this. th: this. th: this. th: this. th: this. th: this. th: this. id: this. th: this. id: this. id: this. th: this. id: this. th: this. id: this. th: this. id: this. th: this. th: this. id: this. id: this. th: this. id: this. th: this. this.inst}; this.table_data.push (set); // this. $ Broadcast ('Test', set);Sie können hier klicken, um die beiden oben genannten Beispiele zu testen. Die Datei wurde auf die Kommunikationskomponenten-Demo der persönlichen Space Vue-Eltern-Kind-Komponente hochgeladen
Als ich damit fertig war, schaute ich zurück und sah, dass der Inhalt, den ich schrieb, ein bisschen chaotisch zu sein schienen, was wirklich schämte! Ich habe vor langer Zeit darüber nachgedacht, einen Blog zu schreiben und meine eigene Notizenbibliothek zu erstellen, aber als ich es zuvor versuchte, es zu schreiben, konnte ich es wirklich nicht tun. Vor kurzem habe ich mich entschlossen, auf dem Schreiben zu bestehen, egal wie ich es schreibe. Was ist, wenn mein Schreibstil eines Tages plötzlich besser wird!
In der Tat ist die Anwendung nicht sehr schwierig. Es bietet tatsächlich eine entsprechende API -Schnittstellenüberwachung. Wie man arbeitet und ändert Die tatsächliche Projektanwendung muss noch von uns selbst geschrieben werden. Der Schlüssel ist, unser JS -Level zu verbessern. Schließlich gibt es immer komplexere Webanwendungen! Ich hoffe, dass Schüler, die Front-End mögen, sich gegenseitig auf dem Weg zu JS ermutigen können.