我刚刚安装了Vue，并一直遵循一些教程，使用Vue -cli webpack模板创建一个项目。当它创建组件时，我注意到它将我们的数据绑定到以下内容中:
export default {
name: 'app',
data: []
}
而在其他教程中，我看到数据被绑定到:
new Vue({
el: '#app',
data: []
)}
区别是什么，为什么两者之间的语法看起来不同?我遇到了麻烦，让“新的Vue”代码从我正在使用的Vue -cli生成的App.vue标签内工作。
当前回答
申报时:
new Vue({
el: '#app',
data () {
return {}
}
)}
这通常是应用程序的其余部分所继承的根Vue实例。它挂在html文档中声明的根元素上，例如:
<html>
...
<body>
<div id="app"></div>
</body>
</html>
另一种语法是声明一个以后可以注册和重用的组件。例如，如果你创建一个单独的文件组件，比如:
// my-component.js
export default {
name: 'my-component',
data () {
return {}
}
}
你可以稍后导入它并像这样使用它:
// another-component.js
<template>
<my-component></my-component>
</template>
<script>
import myComponent from 'my-component'
export default {
components: {
myComponent
}
data () {
return {}
}
...
}
</script>
另外，一定要将数据属性声明为函数，否则它们就不会是响应式的。
其他回答
当你使用
export someobject
someobject是
{
"prop1":"Property1",
"prop2":"Property2",
}
你可以在任何地方使用import或module.js导入上面的东西，在那里你可以使用someobject。这并不是限制someobject是一个对象，只是它可以是一个函数，一个类或一个对象。
当你说
new Object()
如你所说
new Vue({
el: '#app',
data: []
)}
这里您正在初始化一个Vue类的对象。
我希望我的回答能更明确地解释你的问题。
export default用于为Vue组件创建本地注册。
这是一篇很好的文章，解释了更多关于组件的内容 https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
申报时:
new Vue({
el: '#app',
data () {
return {}
}
)}
这通常是应用程序的其余部分所继承的根Vue实例。它挂在html文档中声明的根元素上，例如:
<html>
...
<body>
<div id="app"></div>
</body>
</html>
另一种语法是声明一个以后可以注册和重用的组件。例如，如果你创建一个单独的文件组件，比如:
// my-component.js
export default {
name: 'my-component',
data () {
return {}
}
}
你可以稍后导入它并像这样使用它:
// another-component.js
<template>
<my-component></my-component>
</template>
<script>
import myComponent from 'my-component'
export default {
components: {
myComponent
}
data () {
return {}
}
...
}
</script>
另外，一定要将数据属性声明为函数，否则它们就不会是响应式的。
第一个例子(export default{…})是ES2015语法，用于使一些对象定义可用。
第二种情况(new Vue(…))是实例化已定义对象的标准语法。
第一个将在JS中用于引导Vue，而任何一个都可以用于构建组件和模板。
详情见https://v2.vuejs.org/v2/guide/components-registration.html。
