Vue“导出默认”与“新Vue”

136

我刚刚安装了Vue，并一直按照以下教程使用vue-cli Webpack模板创建项目。创建组件时，我注意到它在以下内容中绑定了我们的数据：

export default {
    name: 'app',
    data: []
}

而在其他教程中，我看到数据绑定于：

new Vue({
    el: '#app',
    data: []
)}

有什么区别，为什么两者之间的语法似乎不同？我在从vue-cli生成的App.vue中使用的标签内部使“新Vue”代码无法正常工作。

vue.js vue-component vue-cli

— 僵尸2
source

感谢天哪对vscode！

— 佩蒂

160

当您声明：

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>

另外，请确保将data属性声明为函数，否则它们将不会起作用。

4

好的，因此，无论何时使用“ MyApp.vue”组件文件，都将使用“ export default {}”语法，否则，如果仅在纯HTML文件中使用Vue，则将使用使用“新Vue（{}）”，对吗？

— rockzombie2 '18

4

一般来说，是的。无论您是在HTML文档本身中创建根实例，还是在外部文件中创建根实例（即main.js，实际上都没有关系），只需知道它是应用程序的起点即可，就像int main()在C语言中一样。Component.vue文件将始终使用该export default { ... }语法。该文档很好地解释了组件，全局文件，本地文件

我正在关注第一个新的Vue（{el：'#app'，data（）{return {msg：'A'}}）}}然后，当我尝试使用{{msg}}属性或方法“ msg”不是在实例上定义但引用了为什么？@ user320487

— user123456 '19

8

export default 用于为Vue组件创建本地注册。

这是一篇很棒的文章，解释了有关组件的更多信息 https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— 阿特里奇科夫
source

5

第一种情况（export default {...}）是ES2015语法，用于使某些对象定义可用。

第二种情况（new Vue (...)）是用于实例化已定义对象的标准语法。

第一个将在JS中用于引导Vue，而两个都可用于构建组件和模板。

有关更多详细信息，请参见https://vuejs.org/v2/guide/components-registration.html。

— Shellum
source

3

每当你使用

export someobject

而某个对象是

{
 "prop1":"Property1",
 "prop2":"Property2",
}

以上可以使用import或在任何地方导入，module.js并且可以在其中使用someobject。这并不是某个对象只能是一个对象，也可以是一个函数，一个类或一个对象的限制。

当你说

new Object()

就像你所说

new Vue({
  el: '#app',
  data: []
)}

在这里，您将启动类Vue的对象。

希望我的回答能更全面地解释您的查询。

— DHRUV GUPTA
source

-7

<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>

— 巴杰姆
source

20

欢迎使用Stack Overflow！如果您可以在代码中添加一些解释，您的答案可能会对其他用户有更大的帮助。

— anothernode '18