728x90
import/export문법 쓰는법
1. export default 변수명
var apple = 10;
export default apple
2.import 변수명 from 임포트 할 파일경로
변수명이 달라도됨
import apple from './assets/oneroom.js';
import 작명 from './assets/oneroom.js';
import/export문법 쓰는법2
1 .export{변수1, 변수2....}
var apple = 10;
var apple2 = 100;
export default {apple, apple2}
2.import{변수1,변수2}from 경로
이렇게 쓴다는걸 알아두고 이제 data를 가져와본다
가져올 data들
// 변수명에 담아도 되지만 이렇게 그냥 export해도된다
export default [{
id : 0,
title: "Sinrim station 30 meters away",
content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
price: 340000
},
{
id : 1,
title: "Changdong Aurora Bedroom(Queen-size)",
content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
price: 450000
},
{
id : 2,
title: "Geumsan Apartment Flat",
content: "금산오거리 역세권 아파트입니다. 애완동물 불가능 ?",
price: 780000
},
{
id : 3,
title: "Double styled beds Studio Apt",
content: "무암동인근 2인용 원룸입니다. 전세 전환가능",
price: 550000
},
{
id : 4,
title: "MyeongIl Apartment flat",
content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
price: 680000
},
{
id : 5,
title: "Banziha One Room",
content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
price: 370000
}];
import해서 원룸들 안에 넣음
<script>
import data from './assets/oneroom.js'
export default {
name: 'App',
data(){ //여기가 데이터 보관함
return {
원룸들 : data,
모달창열림 : false,
이미지 : ["http://localhost:8081/img/room0.e2d4696b.jpg",'http://localhost:8081/img/room1.0d438c5a.jpg','http://localhost:8081/img/room2.d330e978.jpg'],
신고수 : [0,0,0],
메뉴들 : ['Home','Shop','About'],
products : ['역삼동원룸','천호동원룸','마포구원룸'],
products2 : [50,'가격은아무거나',100],
}
},
methods : {
increase(v){
//신고수 += 1; 함수안에서 데이터를 사용할떈 반드시 this.데이터명 을 써야한다.이것은 오류
this.신고수[v] += 1;
}
},
components: {
}
}
</script>
전체코드
<template>
<div class="black-bg" v-if="모달창열림 == true">
<div class="white-bg">
<h4>상세페이지임</h4>
<p>상세페이지 내용임</p>
<button @click="모달창열림 = false">닫기</button>
</div>
</div>
<div class="menu">
<a v-for="작명 in 메뉴들" :key="작명" >{{ 작명 }}</a>
<a v-for="작명 in 3" :key="작명" >{{ 작명 }}</a>
<a v-for="(a,i) in 메뉴들" :key="i" >{{ i }}</a>
</div>
<div v-for="(i) in 원룸들" :key="i">
<img :src="i.image" class="room-img">
<h4 >{{i.title}}</h4>
<p>{{i.price}}원</p>
</div>
</template>
<script>
import data from './assets/oneroom.js'
export default {
name: 'App',
data(){ //여기가 데이터 보관함
return {
원룸들 : data,
모달창열림 : false,
이미지 : ["http://localhost:8081/img/room0.e2d4696b.jpg",'http://localhost:8081/img/room1.0d438c5a.jpg','http://localhost:8081/img/room2.d330e978.jpg'],
신고수 : [0,0,0],
메뉴들 : ['Home','Shop','About'],
products : ['역삼동원룸','천호동원룸','마포구원룸'],
products2 : [50,'가격은아무거나',100],
}
},
methods : {
increase(v){
//신고수 += 1; 함수안에서 데이터를 사용할떈 반드시 this.데이터명 을 써야한다.이것은 오류
this.신고수[v] += 1;
}
},
components: {
}
}
</script>
<style>
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;
}
/* 모달창디자인 */
.room-img{
width : 100%;
margin: 40px;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.menu{
background : darkslateblue;
padding: 15px;
border-radius : 5px;
}
.menu a{
color: white;
padding: 10px;
}
</style>
결과
'VUE > VUE연습' 카테고리의 다른 글
| v-if 와 모달창 만들기 (Vue에서 동적인 UI 만드는 법) (0) | 2023.08.15 |
|---|---|
| Vue 이벤트 핸들러로 click 감지하기 (허위매물 신고버튼 만들기) (0) | 2023.08.14 |
| 리액트보다 100배 쉬운 Vue 반복문 v-for (0) | 2023.08.14 |
| HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법 (0) | 2023.08.14 |
| VUE 설치 및 개발환경 설정하기 및 설명 (0) | 2023.08.14 |
