Vue App-Objekt ist nicht Art von Objekt

Question

Ich habe begonnen, vue.js App mit Laravel mit Single-File-Komponenten zu bauen. Das Problem ist mit meinem App-Objekt: Es ist ein DOM, kein Vue-Objekt und App wird nicht richtig funktionieren.

Wenn ich meine App starte, werden die Komponenten richtig gerendert, vue-devtools erkennt Vue 2.2.6, alles scheint in der richtigen Weise zu funktionieren.

Aber wenn ich

console.log(app) 

in Chromkonsole Typ sehe ich ein DOM-Objekt:

<div id="app"></div> 

Was mehr ist, wenn ich versuche, Titel Eigenschaft zu ändern (und wollte hello Komponente geändert, um zu sehen auf Bildschirm) nur durch Eingabe

app.title = "awesomness" 

in der Konsole, würde meine Komponente nicht ändern, bu t nur meine div#app: (console.log(app) getippt

<div id="app" title="awesomness"></div> 

Die Frage ist: warum? Beispiele unten.

Testkomponente Hello.vue

<template> 
    <div> 
     <p>{{ greeting }} World!</p> 
    </div> 

<script> 
    module.exports = { 
     props: ['greeting'], 
     data: function() { 
      return { 
      } 
     } 
    } 
</script> 

<style scoped> 
    p { 
     color: red; 
     font-size: 20px; 
    } 
</style> 

von Laravel Teil meines Index/Index Ansicht:

<div id="app"> 
    <hello :greeting="title"></hello> 
</div> 

und schließlich meine /resources/assets/js/app.js Datei

import Vue from 'vue' 
import Hello from './components/Hello.vue' 

Vue.component('hello', Hello); 

var app = new Vue({ 
    el: '#app', 
    data: { 
     title: 'Hello Vue!', 
     todos: [ 
      { text: 'task 1' }, 
      { text: 'task 2' }, 
      { text: 'task 3' }, 
      { text: 'task 4' } 
     ], 
    } 
}) 

Answer 1

In den meisten Browsern, die id Attribut eines HTML-Elements ist exposed in the global scope als Variable. Wenn Sie also console.log(app) eingeben, wird das Element mit der ID "app" zurückgegeben.

Sie haben Ihr Vue mit dem gleichen Variablennamen app benannt. Sie haben aber auch var verwendet, wodurch es auf den enthaltenden Bereich beschränkt ist (dh keine globale Variable). Wenn Sie heutzutage eine Anwendung mit den meisten Build-Tools erstellen (z. B. webpack), ist der von Ihnen geschriebene Code in einem Wrapping-Bereich (einer Funktion) enthalten. Daher ist die Variable app, die das Ergebnis von new Vue() ist, global nicht für Sie zugänglich. Wenn Sie global darauf zugreifen möchten, würden Sie wahrscheinlich schreiben

Allerdings möchten Sie wahrscheinlich auch nur umbenennen.

window.myApp = new Vue() 

Wenn Sie die Vorlage für App die gleiche Sache aufrufen.

Answer 2

Obwohl die Antwort auf die Frage Sie Ihre app Variable mit

window.app = new Vue({...}); 

einen globalen Rahmen zu geben Haben Sie Vue DevTools Erweiterung in Ihrem Chrome-Browser? Wenn nicht, bitte installieren Sie es. Mit diesem installiert, ist es jetzt Geschichte, um meine Vue-Instanz so etwas wie window.app für das Debuggen zu nennen.Hier ist ein Link, Sie werden es wirklich nützlich finden.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en