Vue 'Standard exportieren' vs 'neuer Vue'

136

Ich habe gerade Vue installiert und einige Tutorials befolgt, um ein Projekt mit der vue-cli-Webpack-Vorlage zu erstellen. Wenn es die Komponente erstellt, stelle ich fest, dass es unsere Daten innerhalb der folgenden Bereiche bindet:

export default {
    name: 'app',
    data: []
}

Während ich in anderen Tutorials sehe, dass Daten gebunden sind von:

new Vue({
    el: '#app',
    data: []
)}

Was ist der Unterschied und warum scheint die Syntax zwischen den beiden unterschiedlich zu sein? Ich habe Probleme, den 'neuen Vue'-Code innerhalb des von mir verwendeten Tags aus der von der vue-cli generierten App.vue zum Laufen zu bringen.

vue.js vue-component vue-cli rockzombie2
quelle
Gott sei Dank für vscode!
Petey

Antworten:

160

Wenn Sie erklären:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

Dies ist normalerweise Ihre Root-Vue-Instanz, von der der Rest der Anwendung abstammt. Dies hängt von dem in einem HTML-Dokument deklarierten Stammelement ab, zum Beispiel:

<html>
  ...
  <body>
    <div id="app"></div>
  </body>
</html>

Die andere Syntax deklariert eine Komponente, die registriert und später wiederverwendet werden kann. Wenn Sie beispielsweise eine einzelne Dateikomponente erstellen, wie z.

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

Sie können dies später importieren und wie folgt verwenden:

// another-component.js
<template>
  <my-component></my-component>
</template>
<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {}
    }
    ...
  }
</script>

Stellen Sie außerdem sicher, dass Sie Ihre dataEigenschaften als Funktionen deklarieren , da sie sonst nicht reaktiv sind.


quelle
4
Okay, wenn Sie in einer "MyApp.vue" -Komponentendatei arbeiten, verwenden Sie die Syntax "export default {}". Andernfalls verwenden Sie Vue nur in einer einfachen HTML-Datei Verwenden Sie "new Vue ({})", richtig?
Rockzombie2
4
Generell ja. Ob Sie die Stamminstanz im HTML-Dokument selbst oder in einer externen Datei erstellen - dh main.js- spielt keine Rolle. Sie müssen lediglich wissen, dass dies der Ausgangspunkt der Anwendung ist, ähnlich wie int main()in C. Component.vueDateien verwenden immer die export default { ... }Syntax. Die Dokumente machen einen guten Job und erklären die Unterschiede zwischen Komponenten, globalen , lokalen und einzelnen Dateien
Ich folge dem ersten neuen Vue ({el: '#app', data () {return {msg: 'A'}})} Wenn ich dann versuche, {{msg}} zu verwenden, ist die Eigenschaft oder Methode "msg" nicht auf der Instanz definiert, aber referenziert Warum? @ user320487
user123456
5

Der erste Fall ( export default {...}) ist die ES2015-Syntax, um eine Objektdefinition zur Verwendung verfügbar zu machen.

Der zweite case ( new Vue (...)) ist die Standardsyntax zum Instanziieren eines definierten Objekts.

Die erste wird in JS zum Booten von Vue verwendet, während beide zum Erstellen von Komponenten und Vorlagen verwendet werden können.

Weitere Informationen finden Sie unter https://vuejs.org/v2/guide/components-registration.html .

Shellum
quelle
3

Wann immer Sie verwenden

export someobject

und ein Objekt ist

{
 "prop1":"Property1",
 "prop2":"Property2",
}

Die oben genannten können Sie überall mit importoder importieren module.jsund dort können Sie ein Objekt verwenden. Dies ist keine Einschränkung, dass ein Objekt ein Objekt ist, sondern nur eine Funktion, eine Klasse oder ein Objekt.

Wenn du sagst 

new Object()

wie du gesagt hast 

new Vue({
  el: '#app',
  data: []
)}

Hier initiieren Sie ein Objekt der Klasse Vue.

Ich hoffe, meine Antwort erklärt Ihre Anfrage allgemein und expliziter.

DHRUV GUPTA
quelle
-7 
<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>
A. Batgem
quelle
20
Willkommen bei Stack Overflow! Ihre Antwort könnte für andere Benutzer möglicherweise viel hilfreicher sein, wenn Sie dem Code eine kleine Erklärung hinzufügen könnten.
Anothernode