vue 应用 object 不是 object 的类型

Question

我已经开始使用 single-file 组件构建 vue.js 应用 Laravel。问题出在我的应用程序 object 上：它是 DOM，而不是 Vue object，应用程序无法正常工作。

当我启动我的应用程序时，组件正确呈现，vue-devtools 识别 Vue 2.2.6，一切似乎都以正确的方式工作。

但是当我输入时

console.log(app)

在 chrome 控制台中我看到 DOM object:

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

此外，当我尝试更改标题属性（并希望在屏幕上看到更改后的 hello 组件）时，只需键入

app.title = "awesomness"

在控制台中，我的组件不会改变，但只有我的 div#app: (typed 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>

我的部分 index/index 来自 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

在大多数浏览器中，HTML 元素的 id 属性是 exposed in the global scope 作为变量。因此，当您键入 console.log(app) 时，它会返回具有 ID "app" 的元素。

您已使用相同的变量名称为您的 Vue 命名，app。但是您还使用了 var ，这使得它仅限于包含范围（意思是，不是全局变量）。现在，当您使用大多数构建工具（例如 webpack）构建应用程序时，您编写的代码包含在一个包装范围（一个函数）中。因此，您无法全局访问作为 new Vue() 结果的 app 变量。如果你想让它在全球范围内可访问，你可能会写

window.app = new Vue()

但是，您可能也想重命名它。

window.myApp = new Vue()

如果您要为应用程序调用相同的模板。

Answer 2

虽然，你问题的答案是给你的 app 变量一个全局范围

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

您的 Chrome 浏览器中有 Vue devtools 扩展吗？如果没有，请安装它。安装后，为了调试，现在可以将我的 Vue 实例命名为 window.app。这里有一个link，你会发现它真的很有用。

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

vue 应用 object 不是 object 的类型

vue app object is not type of object

gulp

laravel-5

vue-component

vuejs2