Question

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

auto v = vector<Type>(new Reserver(reserve_count));

在其他教程中，我看到数据受到约束：

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

有什么区别，为什么两者之间的语法看起来不一样？我无法在标签内部使用“新Vue”代码使用vue-cli生成的App.vue。

Answer 1

宣布：

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属性声明为函数，否则它们不会被动反应。

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

每当您使用

export someobject

某物是

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

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

你说

new Object()

就像你说的

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

这里您正在初始化Vue类的对象。

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

Answer 5

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

Vue'导出默认'与'新Vue'

5 个答案: