실제 데이터 이용하기(import/export)

데이터가 너무 길어지면 app.vue파일의 데이터 담는 공간에 담기가 너무 더러워진다. 그럴 경우, src폴더에 파일을 만들고 거기에 데이터를 적은 후에,

export default 변수명 / import 변수명 from 파일경로 를 이용하던가

export {변수명1, 변수명2} / import {변수명1, 변수명2} from 경로 를 이용하면 된다.

그래서

mport data from './room.js';


export default {
  name: 'App',
  data() {//데이터 보관함
    return {
      원룸들 : data,
      모달창열렸니 : false,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      prices : [50, 60, 70]
    }
  },

script태그 안에 import를 해오고, 원룸들 이란 이름으로 data란 데이터를 넣어준다. 그리곤,

<img :src="원룸들[0].image" alt="" class="room-img">
<h4 @click="모달창열렸니 = true">{{원룸들[0].content}}</h4>
<p>{{원룸들[0].price}} 만원</p>

이런 식으로, 데이터를 보고, 오브젝트 데이터에서 데이터바인딩을 해서 key를 뽑아주면 된다.

여기서, html태그안의 속성 데이터바인딩은 :어쩌구

html 태그안의 내용 데이터바인딩은 {{ 어쩌구 }} 이렇게 적어주면 된다.