Was ist der Unterschied zwischen vuejs2 und 1?
Unterschiede: 1. Wenn Sie die v-for-Anweisung in vue2 verwenden, können Sie wiederholte Inhalte hinzufügen, vue1 jedoch nicht; 3. Die Kommunikationsmethoden zwischen Komponenten sind unterschiedlich; Lebenszyklus ist anders usw.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Unterschied 1:
Bei Verwendung der V-for-Anweisung in vue2 können wiederholte Inhalte hinzugefügt werden, genau wie Sie den gleichen Nachrichteninhalt hinzufügen können
Beim Schreiben von Code , Zuerst Was importiert werden soll, ist die vue2js-Datei.
HTML-Code:
<div id="box"> <input type="button" value="添加" @click="add()"> <ul> <li v-for="item in arr">{{item}}</li> </ul> </div>
JS-Code:
window.onload=function () { new Vue({ el:"#box", data:{ arr:[1,2,3,4,5,6] }, methods: { add:function () { this.arr.unshift("1") } } }) }
Es gibt jedoch noch einen weiteren Unterschied: Es gibt keinen $index, aber wir können $index manuell hinzufügen
<div id="box"> <input type="button" value="添加" @click="add()"> <ul> <li v-for="(val,index) in arr">{{val}}------->{{index}}</li> </ul> </div>
Unterschied 2:
Ein großer Unterschied zwischen uns in vue2 und vue1 besteht darin, dass es keine Filter gibt! ! ! Wenn wir Filter verwenden, müssen wir diese selbst definieren.
Unterschied 3:
Außerdem nutzen wir die Kommunikation zwischen Komponenten anders:
HTML-Code:
<div id="div"> 我是父组件---->{{emitData.msg}}<br> <child-com :m="emitData"></child-com> </div> </body> </html> <template id="tpl"> <div> <span>我是子组件----></span> {{m.msg}}<br> <input type="button" value="change" @click="change()"/> </div> </template>
JS-Code:
window.onload = function(){ new Vue({ el:"#div", data:{ emitData:{ //写为json 原理:js中对象的引用 msg:"我是父组件数据" } }, components:{ 'child-com':{ props:['m'], template:"#tpl", methods:{ change(){ this.m.msg='变了'; } } } } }) }
Dies ist keine Methode in vue2, aber wir können diese Methode verwenden um das Problem zu lösen.
Unterschied 4:
Einer der grundlegendsten Unterschiede besteht darin, dass wir beim Definieren einer Vorlage die Vorlage in eine große Box einpacken sollten.
<template id="tpl"> <div><h3>3333333</h3><strong>strong</strong></div> </template>
Unterschied 5:
Der Lebenszyklus in vue2 ist auch so
window.onload=function () { new Vue({ el:"#box", data:{ msg:"lalalal" }, beforeCreate () { alert("实例创建之前") }, created() { alert("实例创建完成") }, beforeMount() { alert("数据编译之前") }, mounted() { alert("数据编译完成") }, beforeUpdate:function () { console.log("数据更新之前") }, updated:function () { console.log("数据解析完成") }, beforeDestroy:function () { alert("数据销毁之前") }, destroyed:function () { alert("数据销毁完成") } }) }
Schließlich werfen wir einen Blick auf die Verwaltung der Komponentenkommunikation in einem einzigen Ereignis
html:
<div id="div"> <com-a></com-a> <com-b></com-b> <com-c></com-c> </div>
js Code:
<script> window.onload = function(){ const event=new Vue; const A={ template:` <div> <span>我是A组件---------></span>{{msg1}} <input type="button" value="把a组件的数据传给c" @click="send()"> </div> `, data(){ return{ msg1:"我是A组件的数据" } }, methods:{ send(){ event.$emit("a-data",this.msg1) } } }; const B={ template:` <div> <span>我是B组件---------></span>{{msg2}} <input type="button" value="把b组件的数据传给c" @click="send()"> </div> `, data(){ return{ msg2:"我是B组件的数据" } }, methods:{ send(){ event.$emit("b-data",this.msg2) } } }; const C={ template:` <div> <h3>我是C组件</h3> <span>接收到A的数据--->{{a}}</span><br/> <span>接收到B的数据--->{{b}}</span> </div> `, data(){ return{ a:"a", b:"b" } }, mounted(){ event.$on("a-data",function (a) { this.a=a; }.bind(this)); event.$on("b-data",function (b) { this.b=b }.bind(this)) } }; new Vue({ el:"#div", data:{ msg:"我是父组件数据" }, components:{ "com-a":A, "com-b":B, "com-c":C } }) } </script>
Verwandte Empfehlungen: „vue.js Tutorial“
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen vuejs2 und 1?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Einige Tipps für die Entwicklung von Android-Anwendungen mit Vue.js und der Kotlin-Sprache. Mit der Beliebtheit mobiler Anwendungen und dem kontinuierlichen Wachstum der Benutzeranforderungen hat die Entwicklung von Android-Anwendungen bei Entwicklern immer mehr Aufmerksamkeit auf sich gezogen. Bei der Entwicklung von Android-Apps ist die Wahl des richtigen Technologie-Stacks entscheidend. In den letzten Jahren haben sich die Sprachen Vue.js und Kotlin nach und nach zu einer beliebten Wahl für die Entwicklung von Android-Anwendungen entwickelt. In diesem Artikel werden einige Techniken zum Entwickeln von Android-Anwendungen mit Vue.js und der Kotlin-Sprache vorgestellt und entsprechende Codebeispiele gegeben. 1. Richten Sie zu Beginn die Entwicklungsumgebung ein

Einige Tipps für die Entwicklung von Datenvisualisierungsanwendungen mit Vue.js und Python Einführung: Mit dem Aufkommen des Big-Data-Zeitalters ist die Datenvisualisierung zu einer wichtigen Lösung geworden. Bei der Entwicklung von Datenvisualisierungsanwendungen kann die Kombination von Vue.js und Python Flexibilität und leistungsstarke Funktionen bieten. In diesem Artikel werden einige Tipps für die Entwicklung von Datenvisualisierungsanwendungen mit Vue.js und Python gegeben und entsprechende Codebeispiele beigefügt. 1. Einführung in Vue.js Vue.js ist ein leichtes JavaScript

Integration von Vue.js und Objective-C-Sprache, Tipps und Vorschläge für die Entwicklung zuverlässiger Mac-Anwendungen. In den letzten Jahren haben Entwickler mit der Popularität von Vue.js in der Front-End-Entwicklung und der Stabilität von Objective-C in der Mac-Anwendungsentwicklung begonnen Ich versuche, beides zu kombinieren, um zuverlässigere und effizientere Mac-Anwendungen zu entwickeln. In diesem Artikel werden einige Tipps und Vorschläge vorgestellt, die Entwicklern helfen sollen, Vue.js und Objective-C korrekt zu integrieren und hochwertige Mac-Anwendungen zu entwickeln. eins

Die Integration von Vue.js und der Lua-Sprache, Best Practices und Erfahrungsaustausch zum Aufbau einer Front-End-Engine für die Spieleentwicklung. Einführung: Mit der kontinuierlichen Weiterentwicklung der Spieleentwicklung ist die Wahl der Spiele-Front-End-Engine zu einer wichtigen Entscheidung geworden. Unter diesen Optionen sind das Vue.js-Framework und die Lua-Sprache in den Fokus vieler Entwickler gerückt. Als beliebtes Front-End-Framework verfügt Vue.js über ein reichhaltiges Ökosystem und praktische Entwicklungsmethoden, während die Lua-Sprache aufgrund ihrer leichten und effizienten Leistung häufig in der Spieleentwicklung verwendet wird. In diesem Artikel erfahren Sie, wie das geht

Wie man PHP und Vue.js verwendet, um Datenfilter- und Sortierfunktionen in Diagrammen zu implementieren. In der Webentwicklung sind Diagramme eine sehr gängige Art der Datendarstellung. Datenfilter- und Sortierfunktionen in Diagrammen können einfach mit PHP und Vue.js implementiert werden, sodass Benutzer die Anzeige von Daten in Diagrammen anpassen und die Datenvisualisierung und Benutzererfahrung verbessern können. Zuerst müssen wir einen Datensatz vorbereiten, den das Diagramm verwenden soll. Angenommen, wir haben eine Datentabelle, die drei Spalten enthält: Name, Alter und Klassen. Die Daten lauten wie folgt: Name, Alter, Klasse, Zhang San, 1890 Li

Integration von Vue.js und Dart-Sprache, Übung und Entwicklungsfähigkeiten zum Erstellen cooler UI-Schnittstellen für mobile Anwendungen. Einführung: Bei der Entwicklung mobiler Anwendungen ist das Design und die Implementierung der Benutzeroberfläche (UI) ein sehr wichtiger Teil. Um eine coole Schnittstelle für mobile Anwendungen zu erreichen, können wir Vue.js in die Dart-Sprache integrieren und die leistungsstarken Datenbindungs- und Komponentenisierungsfunktionen von Vue.js sowie die umfangreiche Entwicklungsbibliothek für mobile Anwendungen der Dart-Sprache nutzen, um atemberaubende mobile Anwendungen zu erstellen UI-Schnittstelle. Dieser Artikel zeigt Ihnen, wie es geht

Verwenden Sie die Sprachen Vue.js und Perl, um effiziente Webcrawler und Daten-Scraping-Tools zu entwickeln. Mit der rasanten Entwicklung des Internets und der zunehmenden Bedeutung von Daten ist auch die Nachfrage nach Web-Crawlern und Daten-Scraping-Tools gestiegen. In diesem Zusammenhang ist es eine gute Wahl, Vue.js und die Perl-Sprache zu kombinieren, um effiziente Webcrawler und Daten-Scraping-Tools zu entwickeln. In diesem Artikel wird vorgestellt, wie man ein solches Tool mit Vue.js und der Perl-Sprache entwickelt, und es werden entsprechende Codebeispiele beigefügt. 1. Einführung in Vue.js und die Perl-Sprache

So implementieren Sie mit Vue QQ-ähnliche Chat-Blaseneffekte. Im heutigen sozialen Zeitalter ist die Chat-Funktion zu einer der Kernfunktionen mobiler Anwendungen und Webanwendungen geworden. Eines der häufigsten Elemente in der Chat-Oberfläche ist die Chat-Blase, die die Nachrichten des Absenders und des Empfängers klar unterscheiden kann und so die Lesbarkeit der Nachricht effektiv verbessert. In diesem Artikel wird erläutert, wie Sie mit Vue QQ-ähnliche Chat-Blaseneffekte implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir eine Vue-Komponente erstellen, um die Chat-Blase darzustellen. Die Komponente besteht aus zwei Hauptteilen
