vue app对象不是对象的类型 [英] vue app object is not type of object
问题描述
我已经开始用Laravel使用单个文件组件构建vue.js应用程序。问题出在我的应用程序对象上：它是一个DOM，而不是Vue对象，应用程序无法正常工作。
当我启动我的应用程序时， ， vue-devtools 识别Vue 2.2.6，evertything似乎以正确的方式工作。
但是当我type
console.log（app）
$在Chrome控制台中b
$ b
我看到一个DOM对象：
< div id =app >< / DIV>
此外，当我尝试更改title属性（并且希望看到更改
app.title =awesomness$ b $> hello b 在控制台中，我的组件不会改变，但只有我的 div＃app < code $：$（code $ console.log（app）
< div id =apptitle =awesomness>< / div>
问题是：为什么？下面的示例。
测试组件 Hello.vue
< template>
< div>
< p> {{greeting}}世界！ < / p>
< / div>
< script>
module.exports = {
道具：['greeting']，
data：function（）{
return {
}
}
}
< / script>
< style scoped>
p {
红色;
font-size：20px;
}
< / style>
来自laravel的部分索引/索引视图：
< div id =app>
< hello：greeting =title>< / hello>
< / div>
最后我的 /resources/assets/js/app.js file
从'vue'导入Vue
从'./components/Hello'导入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'}
]，
}
}）
在大多数浏览器中，HTML元素的 id 属性为作为变量在全局范围中公开。所以，当你键入 console.log（app）时，它将返回具有id的元素。
您已使用相同的变量名称 app 命名您的Vue。但是你也使用 var ，这使得它仅限于包含范围（意思是，不是全局变量）。当你使用大多数构建工具构建应用程序（例如webpack）时，你编写的代码被包含在一个包装范围（一个函数）中。因此全局无法访问 new Vue（）结果的 app 变量。如果你想让它可以在全球范围内访问，你可能会写：
window.app = new Vue（）
但是，您可能也想重命名它。
window.myApp = new Vue（）
如果你是打算为应用程序调用相同的模板。
I've started to build vue.js app with Laravel using single-file components. The problem is with my app object: it is a DOM, not a Vue object and app won't work properly.
When I start my app, components are rendered properly, vue-devtools recognizes Vue 2.2.6, evertything seems to work in the right way.
But when I type
console.log(app)
in chrome console I see a DOM object:
<div id="app"></div>
What more, when I try to change title property (and wanted to see changed hello component on screen) just by typing
app.title = "awesomness"
in console, my component wouldn't change, but only my div#app: (typed console.log(app)
<div id="app" title="awesomness"></div>
The question is: why? Samples below.
Test component 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>
part of my index/index view from laravel:
<div id="app">
<hello :greeting="title"></hello>
</div>
and finally my /resources/assets/js/app.js file
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' }
],
}
})
In most browsers, the id attribute of an HTML element is exposed in the global scope as a variable. So, when you type console.log(app), it is returning the element that has the id, "app".
You've named your Vue with the same variable name, app. But you also used var which makes it restricted to the containing scope (meaning, not a global variable). When you build an application using most build tools these days (webpack for example), the code you write is contained in a wrapping scope (a function). So the app variable that is the result of new Vue() is not accessible to you globally. If you wanted to make it accessible globally, you would probably write
window.app = new Vue()
However, you probably want to just rename it as well.
window.myApp = new Vue()
if you are going to call the template for app the same thing.
这篇关于vue app对象不是对象的类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
