问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

而在其他教程中，我看到数据来自：

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

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

原文由 rockzombie2 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译vue.jsvue-componentvue-cli
阅读 387
2 个回答
得票最新
社区维基
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 属性声明为函数，否则它们不会是反应性的。

原文由 user320487 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1
撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题