https://youtu.be/38PWm8TgaV0?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-
Vue 6강: 상품목록 만들기 진짜 데이터로 ( import / export )
실제 상품데이터를 가져와서 HTML에 꽂아서 보여주자
데이터가 너무 길면 따로 뺄 수 있다. (다른 파일에 넣은 후 import하는 식으로)
import / export 문법 쓰는 법
> 내보낼 파일
var apple = 10;
export default apple //어떤 변수를 내보내겠습니다 라는 것임
export default 변수명
export {변수1, 변수2, ...}
> import 할 곳
import 변수 from 경로
import {변수1, 변수2, ...}
아무데나 oneroom.js라는 파일 생성하고, 데이터를 복사-붙여넣기
var a = [ { }, { }, { }, ... ,{ } ]로 작성해도 되지만, 귀찮으면 export default = [ { }, { }, { }, ... , { } ]로 해도 됨.
script 부분에서 import data from '경로'; 로 가져오기
data 부분에 원룸들 : data, 로 데이터를 넣어줬음.
* 현재 data: object형으로 저장된 배열임.
template 부분에서 이런 식으로 데이터를 가져오면 된다.
{{ 원룸들[0].title }}
* HTML 태그 안의 속성 데이터바인딩은 :어쩌구
* HTML 태그 안의 내용 데이터바인딩은 [{어쩌구}]
<img :src="원룸들[0].image">
오늘의 숙제
> 6개 상품 전부 진열하기(v-for 사용)
<div v-for="(item,index) in 원룸들" :key="index">
<img :src="원룸들[index].image" class="room-img">
<h4>{{ 원룸들[index].title }}</h4>
<p>{{ 원룸들[index].price }}원</p>
</div>
'STUDY > Vue.js' 카테고리의 다른 글
(5) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.21 |
---|---|
(4) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.20 |
(3) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.17 |
(2) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.13 |
(1) Vue로 만드는 직방/인스타그램 웹앱 강의 (0) | 2022.05.13 |