Wo die Hauptvariable einer neuen Vue-Instanz verwendet wird

Question

Ich vermisse den Punkt hier offensichtlich, aber wo benutzt man die Hauptvariable einer neuen Vue-Instanz?

Ich bin neu bei vue.js (offensichtlich) und beim Lesen verschiedener Dokumentation kann ich nicht helfen zu bemerken, dass jede neue Vue-Instanz mit etwas wie var app = new Vue({ beginnt, aber dann in den Beispielen habe ich diese app Variable gelesen. t wieder in der js oder html referenziert werden. Der Code funktioniert einwandfrei, ohne ihn irgendwo zu referenzieren.

Könnte jemand bitte bitte beraten, wo oder warum ich die app Variable verwenden würde?

Vielen Dank

Answer 1

Es ist völlig nicht erforderlich, um das Ergebnis der new Vue() zu erfassen, wenn Sie brauchen oder wollen nicht.

Der Grund, warum es getan wird, ist in erster Linie zum Testen (ala von der Konsole) oder für die Interaktion mit externen Bibliotheken. Da alle Methoden und Daten des Vue für die Variable verfügbar sind, ist es möglich, diese Methoden aufzurufen und diese Daten außerhalb von Vue zu verwenden.

Zum Beispiel, ich habe etwas Logik auf meiner Seite vollständig außerhalb von Vue, die einige Daten hat, die ich in meinem Vue verwenden möchte.

const externalData = {message:"I'm some interesting data."} 

const myVueApp = new Vue({ 
    el: "#app", 
    data:{ 
     message: null 
    } 
}) 

myVueApp.message = externalData.message 

Hier wird der Code die Nachrichteneigenschaft von Vue von außerhalb Vue Einstellung.

Dies ist in erster Linie nützlich, wenn Sie über vorhandenen Code verfügen und Vue in diese vorhandene Umgebung integrieren.

Ein anderes Szenario ist nur einfach zu testen. Öffnen Sie Ihre Konsole und führen Sie das folgende Snippet aus. Ändern Sie den Kontext an die JavaScript-Schnipsel ist:

und geben Sie dann

app.message = "Hey, this is nifty!" 

Und die neue Nachricht wird im Vue widerspiegeln.

console.clear() 
 

 
const app = new Vue({ 
 
    el: "#testing", 
 
    data:{ 
 
    message: "Change me from the console!" 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 

 
<div id="testing"> 
 
    {{message}} 
 
</div>