Vue“导出默认值"与“新 Vue" [英] Vue 'export default' vs 'new Vue'
问题描述
我刚刚安装了 Vue，并且一直在按照一些教程使用 vue-cli webpack 模板创建一个项目.当它创建组件时，我注意到它在以下内容中绑定了我们的数据:
I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following:
export default {
name: 'app',
data: []
}
而在其他教程中，我看到数据来自:
Whereas in other tutorials I see data being bound from:
new Vue({
el: '#app',
data: []
)}
有什么区别，为什么两者之间的语法似乎不同?我无法从标签内部获取新 Vue"代码使用来自 vue-cli 生成的 App.vue.
What is the difference, and why does it seem like the syntax between the two is different? I'm having trouble getting the 'new Vue' code to work from inside the tag I'm using from the App.vue generated by the vue-cli.
推荐答案
当你声明时:
new Vue({
el: '#app',
data () {
return {}
}
)}
这通常是应用程序其余部分所继承的根 Vue 实例.这挂在 html 文档中声明的根元素上，例如:
That is typically your root Vue instance that the rest of the application descends from. This hangs off the root element declared in an html document, for example:
<html>
...
<body>
<div id="app"></div>
</body>
</html>
另一种语法是声明一个可以在以后注册和重用的组件.例如，如果您创建一个单一的文件组件，如:
The other syntax is declaring a component which can be registered and reused later. For example, if you create a single file component like:
// my-component.js
export default {
name: 'my-component',
data () {
return {}
}
}
您可以稍后导入它并像这样使用它:
You can later import this and use it like:
// another-component.js
<template>
<my-component></my-component>
</template>
<script>
import myComponent from 'my-component'
export default {
components: {
myComponent
}
data () {
return {}
}
...
}
</script>
此外，请务必将您的 data 属性声明为函数，否则它们将不会响应.
Also, be sure to declare your data properties as functions, otherwise they are not going to be reactive.
这篇关于Vue“导出默认值"与“新 Vue"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
