• 어떤 data를 갖고 있는 .js 파일이 있다고 가정해보자.

var apple = 10;

export default apple

• export default를 사용하면 해당 변수가 export 가능해진다.

import apple from './assets/post.js;

apple...;

• 다른 .js or App.vue 파일을 보면 import 해서 사용할 수 있다.

export {apple, apple2}

• 이런 식으로 여러개 export 할 수 도 있다.

import {apple, apple2} from './assets/post.js';

apple2...;

• { }를 사용해서 import 해서 쓰면된다.

Example

<template>

  <div class="black-bg" v-if="isModalOpen == true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세 페이지 내용</p>
      <button @click="isModalOpen = false">닫기</button>
    </div>
  </div>

  <div class="menu">
    <a v-for="element in menus" :key="element">{{element}}</a>
  </div>

  <div v-for="a, in products" :key="a">
    <img @click="isModalOpen = true" alt="Vue logo" :src="a.image">
    <h4> {{ a.title }} </h4>
    <p> {{ a.price }} 원</p>
  </div>
</template>

<script>

import data from './assets/post';


export default {
  name: 'App',
  data() {
    return {
      isModalOpen: false,
      신고수 : 0,
      menus : ["Home", "Shop", "About"],
      products : data,
    }
  },
  methods: {
    increase() {
      this.신고수 += 1;
    }
  },
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}

body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

.black-bg {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed;
  padding: 20px;
}

.white-bg {
  width: 100%;
  background: white;
  border-radius: 8px;
  padding: 20px;
}
</style>

• impor한 data는 post.js 이다.

export default [{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
    },
    {
    id : 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000
    },
    {
    id : 2, ....

• 대충 저런 식으로 되어있는데 default로 export 한 것이다.

  

• 지린다 !