laravel-5 - vue app 对象不是对象类型

Question

我已经开始使用单文件组件使用 Laravel 构建 vue.js 应用程序。问题出在我的应用程序对象上:它是一个 DOM，而不是 Vue 对象，应用程序将无法正常工作。

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

但是当我打字时

console.log(app)

在 Chrome 控制台中我看到一个 DOM 对象:

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

此外，当我尝试仅通过键入来更改标题属性(并且希望在屏幕上看到更改后的 hello 组件)时

app.title = "awesomness"

在控制台中，我的组件不会改变，但只有我的 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 索引/索引 View 的一部分:

<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”的元素。

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

window.app = new Vue()

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

window.myApp = new Vue()

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