【Vue】new Vue() 和 export default 差别

new Vue():建立Vue实例

export default:输出模块

先前建立组件时输入和输出组件都是使用 import/export default,从最小元件的一张图片 export 给 Home.vue,组完 Home 的画面再 export 给 APP.vue,过程中并未使用new Vue()语法建立实例,导致后续console.log(this) //undefined,无法将资料传回 data 里。

结构如下:
Stickers.vue 一张图片
Home.vue v-for 形成四张图片+api资料
APP.vue 加上 header/footer 形成最终画面

Home.Vue *

  export default {  name: 'Home',  data() {    return {      hotSpots: [      ],    }  },  mounted() {    axios.get('url')    .then(function (response){      this.hotSpots = response.data);      console.log(this); //undefined    })  }

慢慢理解到new Vue()是建立一个 Vue实例,用来与 Html 的 DOM 物件作为挂钩,内容会包含
el:绑定 DOM 元素
data:绑定的资料
methods...等方法

export 用来输出模块,Vue 的单文件组件通常需要输出一个对象,这个对象是 Vue 实例选择的对象,以便于在其它地方可以使用 import 引入。

参考来源:
https://juejin.cn/post/7005832390102745119
https://medium.com/pierceshih/vue-js-学习笔记-day13-vue实例-72eb192b647c


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章