vue app对象不是对象的类型

Question

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

当我启动我的应用程序时,组件正确呈现,vue-devtools识别Vue 2.2.6,evertything似乎以正确的方式工作.

但是当我打字的时候

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的索引/索引视图的一部分:

<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

在大多数浏览器中,idHTML元素的属性在全局范围中作为变量公开.因此,当您键入时console.log(app),它将返回具有id"app"的元素.

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

window.app = new Vue()

但是,您可能只想重命名它.

window.myApp = new Vue()

如果你打算为app调用模板同样的事情.