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