vue應用程序對象不是對象的類型

Question

我已經開始使用單文件組件構建vue.js應用程序。問題出在我的應用程序對象上：它是一個DOM，而不是一個Vue對象，應用程序無法正常工作。

當我啓動我的應用程序時，組件被正確渲染，vue-devtools識別Vue 2.2.6，evertything似乎以正確的方式工作。

但是，當我在Chrome的控制檯類型

console.log(app) 

我看到一個DOM對象：

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

更重要的是，當我嘗試改變所有權屬性（希望看到改變了hello組件屏幕）只是通過鍵入

app.title = "awesomness" 

在控制檯，我的組件不會改變，BU T單獨我div#app：（類型console.log(app)

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

的問題是：爲什麼？下面的示例。

測試組件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> 

從laravel我的索引/索引視圖的一部分：

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

最後我/resources/assets/js/app.js文件

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

在大多數瀏覽器中，id屬性的HTML元素是exposed in the global scope作爲變量。因此，當您鍵入console.log(app)時，它將返回具有id「」的元素。

你已經用相同的變量名稱app來命名你的Vue。但是你也使用了var這使得它僅限於包含範圍（意思是，不是全局變量）。當你使用大多數構建工具構建應用程序（例如webpack）時，你編寫的代碼被包含在一個包裝範圍（一個函數）中。因此new Vue()的結果app變量在全局範圍內無法訪問。如果你想讓它在全球範圍內可用，你可能會寫

window.app = new Vue() 

但是，你可能想要重命名它。

window.myApp = new Vue() 

如果您打算爲應用程序調用相同的模板。

Answer 2

雖然，回答你的問題是給你的app變量，

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

全局範圍你有VUE在Chrome瀏覽器擴展devtools？如果沒有，請安裝它。隨着安裝，它的歷史爲我的Vue實例命名爲window.app爲了調試。這裏有一個鏈接，你會發現它非常有用。

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