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

2022-01-25 00:00:00 vue.js vue-component vue-cli

我刚刚安装了 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.

相关文章