01_Vue.js

부동산 사이트 만들기

기본으로 뜨는 내용 지우기
logo 빼고 다 지울 거
(HelloWorld라고 써있는 거 다 지워주면 됨)

Vue.js

<template>
  <img alt="Vue logo" src="./assets/logo.png">

</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

데이터바인딩 문법 {{}}

데이터바인딩을 하는 이유
1. html을 하드코딩해놓으면 나중에 변경이 어려움. (쇼핑몰 상품들은 매일 가격이 변동됨)
2. 실시간 자동 렌더링 기능 이용
-> vue는 data를 변경하면 실제 데이터 변경 사항이 자동으로 반영됨 관련된 데이터 전부 다 바꿔줌 web-app 같은 사이트를 만들 수 있음
가격 필터 같은 걸 설정하면 html이 자동으로 바뀜(실시간 재 렌더링)

<template>
  <img alt="Vue logo" src="./assets/logo.png">

  <!-- {{ 데이터바인딩 }} -->
  <div>
    <!-- logo는 실시간 변경되지 않기 때문에 데이터바인딩 하지 않음 -->
    <!-- {{ logo }} -->
    <!-- 하드 코딩해놓으면 됨 -->
    원룸샵
    <!-- HTML 속성도 데이터바인딩 가능 -->
    <!-- :속성="데이터이름" -->
    <h4 :style="스타일">XX 원룸</h4>
    <!-- data 이름으로 불러주면 됨 -->
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>{{ price2 }} 만원</p>
  </div>
  <button>반값 만들기 버튼</button>
</template>

<script>


export default {
  name: 'App',
  // 데이터 보관함
  data() {
    return {
      // Object 자료 형식으로 데이터 저장
      price1 : 60,
      price2 : 70,
      // logo : "원룸샵",
      // 데이터 이름은 한글도 가능
      스타일 : 'color : blue',
      
    }
  },
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

:속성="데이터이름"

HTML 속성도 데이터 바인딩이 가능함 HTML에서 사용하는 모든 속성 가능

data에 변수 이름은 한글도 가능
template

  <div>
    <h4 :style="스타일">스타일원룸</h4>
    <p>XX 만원</p>
  </div>

script 태그 안

<script>


export default {
  name: 'App',
  // 데이터 보관함
  data() {
    return {

      // 데이터 이름은 한글도 가능
      스타일 : 'color : blue',
    }
  },
  components: {

  }
}
</script>

배열 꺼내 쓰기

products : ['역삼동원룸', '천호동원룸', '마포구원룸']

Array 자료형
var arr = [10, 20, 30];
arr[0] == 10
=> 자바스크립트 array 자료형

{{products[0]}} == 역삼동원룸 이렇게 사용하면 됨

  <div>
    <h4>{{ products[0] }}</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>{{ price2 }} 만원</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>{{ price2 }} 만원</p>
  </div>

  data() {
    return {
      price1 : 60,
      price2 : 70,
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      
    }

CSS 적용

태그에 클래스 작성해서 Vue.js 제일 아래 style 태그에서 css 스타일 적용할 수 있음.

  <div class="menu">
    <a>products</a>
    <a>About</a>
  </div>

<style>
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}
</style>

v-for="작명 in 숫자" :key="작명"

입력한 숫자만큼 반복문이 반복됨
이 경우에는 작명한 말과 상관 없이 똑같은 태그가 숫자만큼 반복됨 태그 안에 글자 자체가 반복되는 것

<a v-for="list in 3" :key="list">Home</a>

v-for="작명 in data안자료" :key="작명" {{ 작명 }}

data 안에 배열을 작성하면 data 안 자료 개수만큼 반복하고 작명한 걸로 데이터 바인딩해서 안에 값들을 하나씩 꺼내옴

<a v-for="메뉴 in 메뉴들" :key="메뉴">{{ 메뉴 }}</a>

data

메뉴들 : ['Home', 'Shop', 'About'],

:key="" 의 용도

반복문 쓸 때 꼭 써야함
반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀
작명을 두개까지 할 수 있음 괄호치고
(a, i)
a는 하나 하나의 데이터 오른쪽에 작명한 건 1씩 증가하는 정수값이 됨

<a v-for="(메뉴, 정수) in 메뉴들" :key="정수">{{ 정수 }}</a>

메뉴를 key 값으로 해서 출력하면 data에 들어있던 배열이 순차적으로 출력됨
괄호 오른쪽에 있는 정수를 key 값으로 출력하면 index num이 출력됨

products 배열 꺼내오는 방법

  <div v-for="product in products" v-bind:key="product">
    <h4>{{ product }}</h4>
    <p>가격 문의</p>
  </div>

products 배열 개수만큼 반복해서 product 꺼내오기

  <div v-for="(a, i) in 3" :key="i">
    <h4>{{ products[i] }}</h4>
    <p>가격 문의</p>
  </div>

3번 반복해서 products[i]번째 인덱스 출력

  <div v-for="(a, i) in products" :key="i">
    <h4>{{ a }}</h4>
    <p>가격 문의</p>
  </div>

products만큼 반복해서 products의 배열을 a라고 불러오기

셋 다 똑같이 출력됨

이벤트 핸들러 v-on:click=""

== @click="" 와 같음

허위매물 신고 버튼 클릭 시 신고 수 증가하게 하는 버튼

<button v-on:click="신고수++">허위매물신고</button> <span>신고수 : {{ 신고수 }}</span>

data

신고수 : 0,

@mouseover=""

마우스를 갖다댈 때 이벤트 일어남
여러가지 이벤트 사용 가능함

자바스크립트가 길어질 때 함수를 만들어서 함수 가져다가 쓸 수 있음.

<button v-on:click="increase">허위매물신고</button> <span>신고수 : {{ 신고수 }}</span>

export default {
  name: 'App',
  // 데이터 보관함
  data() {
    return {
      신고수 : 0,
    }
  },
  methods : {
    increase() {
      this.신고수++;
    }
  },
  components: {

  }
}

각각 매물마다 신고하기 버튼 만들어서 신고하기 누를 때마다 신고수 증가하게 하기

template

 <div>
    <h4>{{ products[0] }}</h4>
    <p>{{ price1 }} 만원</p>
    <!-- <button v-on:click="신고수++">허위매물신고</button> <span>신고수 : {{ 신고수 }}</span> -->
    <button v-on:click="increase(0)">허위매물신고</button> <span>신고수 : {{ 신고수[0] }}</span>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>{{ price2 }} 만원</p>
    <button v-on:click="increase(1)">허위매물신고</button> <span>신고수 : {{ 신고수[1] }}</span>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>{{ price2 }} 만원</p>
    <button v-on:click="increase(2)">허위매물신고</button> <span>신고수 : {{ 신고수[2] }}</span>
  </div>

data

  data() {
    return {
      신고수 : [0, 0, 0]
    }
  },

methods

  methods : {
    increase(i) {
      this.신고수[i]++;
    }
  },

신고수 배열을 각각 index num으로 불러서 신고수에 보여준 후 increase 함수에 매개변수로 그 숫자를 전해줘서 특정 index만 숫자가 늘어날 수 있게 만들어줌

아니면 버튼마다

<button v-on:click="신고수[0]++">허위매물신고</button> <span>신고수 : {{ 신고수[0] }}</span>

이렇게 각각 써줄 수도 있음

모두 다 배열에 담아서 한번에 출력하고 허위매물신고 누를 때마다 신고수 증가시켜주기
template

  <div v-for="(o, i) in obj" v-bind:key="o">
    <h4>{{ o.메뉴 }}</h4>
    <p> {{ o.가격 }}</p>
    <button v-on:click="up(i)">허위매물신고</button> <span>신고수 : {{ o.신고 }}</span>
  </div>

data

      obj : [
        {'메뉴' : '역삼동원룸' , '가격' : 60, '신고' : 0},
        {'메뉴' : '천호동원룸', '가격' : 70, '신고' : 0},
        {'메뉴' : '마포구원룸', '가격' : 90, '신고' : 0}
      ]

methods

    up(i) {
      this.obj[i].신고++;
    }

이미지 표시

src/assets 폴더 안에 이미지 넣어두기 (상대경로로 찾아서 사용할 거임)

이미지 불러오기

상대 경로

template

<img src="./assets/room0.jpg">

App.vue 는 src 폴더 바로 하위에 파일로 존재
./ App.vue와 동일한 폴더(src)에 존재하는 assets 폴더 -> 상대경로이기 때문에 지금 있는 App.vue 기준으로
/ assets 폴더 하위에 room0.jpg

또는

절대 경로

<img src="@/assets/room0.jpg">

@ 는 루트 폴더를 의미 루트 폴더는 src
/assets 하위에 폴더
/room0.jpg 하위에 room0.jpg 파일

모달창 만들기 v-if="조건식"

클릭하면 집에 대한 상세 내용이 뜨게 모달창 만들기

동적인 UI 만드는 법
1. UI의 현재 상태를 데이터로 저장
2. 데이터에 따라 UI가 어떻게 보일지 작성

template

  <!-- 모달창 부분 -->
  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      <h4>상세 페이지</h4>
      <p>상세 페이지 내용</p>
    </div>
  </div>

template 최상단에 작성 -> css position:fixed 가 veiwport 기준이기 때문에veiwport 기준이기 때문에

template
제목 클릭 시 모달창이 열리게 설정

<h4 @click="모달창열렸니 = true">{{ products[0] }}</h4>

@click == v-on:click=""
클릭 시 data에 담아둔 모달창열렸니 안에 값이 바뀌게

data

모달창열렸니 : false,

style

/* 모달창 css */
body {
  margin: 0;
}
div {
  /* div를 빠져나가지 않게 */
  box-sizing: border-box;
}
.black-bg {
  width: 100%;
  height: 100%;
  /* 0, 0, 0은 검정색 0.5는 투명도 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 모달창은 고정 */
  position: fixed;
  padding: 20px;
}

data를 state로 보기도 함 UI의 상태를 담아두기 때문에

모달창 닫기 버튼

template

  <!-- 모달창 부분 -->
  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      <h4>상세 페이지</h4>
      <p>상세 페이지 내용</p>
      <button @click="모달창열렸니 = false">닫기</button>
    </div>
  </div>

닫기 버튼을 클릭했을 때 data (state) 모달창 상태를 false로 바꿔주면 모달창이 닫힘