6. import, export로 다른파일 데이터 바인딩

import, export와 데이터바인딩 연습

• [export default 변수] 로 데이터 내보내기(변수명 생략 가능)
• [imfort 변수 from '경로';]로 데이터 받아오기

//새 파일(oneroom.js) 만들어서 데이터 저장
export default [{ //export default로 데이터 내보내기, 내보낸 데이터는 import로 받는다
    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,
    title: "Geumsan Apartment Flat",
    image: "https://codingapple1.github.io/vue/room2.jpg",
    content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
    price: 780000
    },
    {
    id : 3,
    title: "Double styled beds Studio Apt",
    image: "https://codingapple1.github.io/vue/room3.jpg",
    content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
    price: 550000
    },
    {
    id : 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000
    },
    {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000
  }];

---

import data from './oneroom.js'; // import로 oneroom.js의 데이터를 받아와 data 변수에 할당

export default {
  name: 'App',
  data(){
    return {
      원룸들 : data, //data에 원룸들 데이터를 만들어 data 변수값을 줌
    }
  },
  components: {    
  }
}

---

<!--원룸들에 저장된 data에서 이미지 링크, 타이틀, 가격 데이터를 받아와 바인딩-->
<div>
  <img :src="원룸들[0].image" alt="매물사진" class="room-img"> 
  <h4>{{원룸들[0].title}}</h4>
  <p>{{원룸들[0].price}} 원</p>
</div>

<!--위 코드를 v-for로 반복-->
<div v-for="(room, i) in 원룸들" :key="i"> <!--room엔 원룸들 데이터 요소가 하나씩 순서대로 들어감(각 room이 원룸들[순서]와 같은 값)-->
  <img :src="room.image" alt="매물사진" class="room-img">
  <h4>{{room.title}}</h4>
  <p>{{room.price}} 원</p>
</div>
<!--바인딩 할 때 room 대신 원룸들[i]로 지정 가능-->

 

 

 

 

코딩애플 강의로 실습한 내용입니다
출처 : https://codingapple.com/