상품목록 만들기

export/import 변수 외 함수 등도 가능

export

export할 데이터를 담은 파일(oneroom.js) 하단에

export default 변수명 //변수명을 뱉음 (퉤에)

export default []

let 변수명 = [];
export default 변수명

import

import할 파일(App.vue)의 script 안에

import 변수명 from 파일경로

export 변수 여러 개일 경우

export에서 {}을 사용할 경우 import도 {}을 사용해서 가져와야 함
export

export {변수1, 변수2}

import

import {변수1} form './oneroom';

import {변수1, 변수2} form './oneroom';

import 후 사용법

import해서 갖고 온 데이터를 사용할 경우 data(){}등의 보관함에서 정의 후 사용

<template>
  <!-- oneromeData를 담은 products 사용 -->
  <div v-for="(item, idx) in products" :key="idx">
    <img :src="item.image">
    <h4 v-on:click="modalOpen = true">{{ item.title }}</h4>
    <p>{{ item.content }}</p>
    <p>{{ item.price }}원</p>
    <hr>
  </div>
</template>

<script>
import oneromeData from './oneroom';

export default {
  name: 'App',
  data(){// 데이터 보관통
    return {
      price1 : 60,
      price2 : 70,
      products: oneromeData, //import한 데이터 정의
    }
  }
}
</script>