(4) Vue로 만드는 직방/인스타그램 웹앱 강의

https://youtu.be/Agm-F366ZwY?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

 

이벤트 핸들러

: HTML 클릭 시 코드 실행하는 법

 

허위매물신고 버튼을 누르면 신고수가 1 증가되게 해보자.

    <button>허위매물신고</button> <span>신고수 : 0</span>

자스로 할 때: <button onClick=""></button>

Vue로 할 때: <button v-on:click=""></button> 또는 @click=""

 

자스: 버튼 누르면 숫자 찾아서 +1 하고 +1된 걸 HTML에 반영

뷰: 버튼 누르면 관련된 데이터만 +1 (Vue는 데이터 변하면 HTML에 바로 반영됨)

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

 

데이터 부분

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : 0,
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};

 

Vue 특징

> 데이터가 변하면 관련된 HTML은 자동으로 바뀐다.

신고수+=1

와 신고수++1 은 같다.

 

<button @mouseover="신고수 +=1">허위매물신고</button>

마우스 오버했을 때 신고수++하는 코드

 

(참고) @이벤트이름 으로 여러가지 이벤트 사용가능

 

Q. 입력할 코드가 좀 길면..

함수를 사용한다!

 

함수

함수 만드는 공간은 정해져 있다.

데이터 부분 뒤 methods : { 함수( ){ } } 안에 함수를 만들면 된다.

 

* Vue에서 함수 만들 때 주의사항

: 함수 안에서 데이터 쓸 땐 this.데이터명 

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

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : 0,
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  methods :{
    increase(){
      this.신고수+=1;
    }

  },
  components: {},
};

 

 

오늘의 숙제

> 모든 상품에 신고버튼기능 만들어오기

힌트

> 상품마다 신고수를 기록하는 곳이 있어야 함

template

 
  <div>
    <h4>{{ products[0] }}</h4>
    <p>50 만원</p>
    <button @click="신고수[0]++">허위매물신고</button> <span>신고수 : {{신고수[0]}}</span>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>가격은 아무거나</p>
    <button @click="신고수[1]++">허위매물신고</button> <span>신고수 : {{신고수[1]}}</span>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>가격은 아무거나</p>
    <button @click="신고수[2]++">허위매물신고</button> <span>신고수 : {{신고수[2]}}</span>
  </div>

script 

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : [0,0,0],
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  methods :{
    increase(){
      this.신고수+=1;
    }

  },
  components: {},
};

 

 

for문으로 한 번에 할 수는 없을까? 🤔

싶어서 template 부분을 바꿨다. 😀

  <div v-for="(a,i) in 신고수" :key="i">
    <h4>{{ products[i] }}</h4>
    <p>50 만원</p>
    <button @click="신고수[i]++">허위매물신고</button> <span>신고수 : {{신고수[i]}}</span>
  </div>