Vue 기반 부동산 프로젝트 #1

※ Vue 기본 문법

1) 데이터 바인딩: data 속성에 정의한 value 속성 값을 렌더링할 때 {{ }} 형태로 사용
2) 반복문(for문)
· menus라는 배열을 menu라는 변수에 하나씩 넣어 출력
· 배열뿐만 아니라 Object 자료형도 사용 가능

 

 

3) 조건문(if문)
   <div v-if="1 == 1">안녕하세요</div>
   <div v-else>반갑습니다</div>

 

※ 부동산 사이트 만들기

1. App.vue

1) 데이터 export
· assets 위치에 oneroom.js를 생성 → 원룸들의 데이터를 삽입하고, component 파일에서 사용할 수 있도록 export 

· assets 위치에 매물을 표현할 6개의 사진 추가

2) 데이터 import

· component 파일, App.xue에서 import 하여 사용

 

 

3) 배열 형태의 roomsInfo는 for문을 이용해 출력

※ 이미지의 동적바인딩 처리하기: :src 또는 v-bind:src를 사용하여 binding 처리
· 단, 경로가 단순 문자열이기 때문에 오류가 발생하므로, js에서 require("./room0.jpg") 형태로 기재

 

 

 

4) 클릭이벤트: 허위매물신고 button 클릭 시 신고 수 증가

· 간단한 방식: data에 신고수 배열은 함수 이용한 방식과 동일하게 선언 필요

 

 

· script 사용 방식