Vue를 알아야 한다. - 이벤트 핸들러, 함수 선언

이벤트 핸들러

이벤트 핸들러는 해당 이벤트에 어떠한 행동을 추가하는 것 이다.
자바스크립트는 이라는 이벤트 핸들러를 HTML태그에 달았지만
Vue에서는 @click="" 이라고 사용한다
내부에 자바스크립트 코드를 자유롭게 작성 가능하다.

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button @click="신고수++">허위매물신고</button>
  <span>신고수 : {신고수}</span>
</div>

허위매물신고 버튼을 클릭하게 되면 신고수라는 상태가 1씩 증가하게 된다.(초기값 0)

@click 말고 다른 이벤트 핸들러도 만들 수 있다.
@mouseover 하면 클릭이 아니라 마우스만 댔을 때 자바스크립트를 실행가능하고
@input 하면 인풋에 값을 입력했을 때 자바스크립트를 실행가능하다.

함수 선언

긴 코드를 짧게 축약해주는게 바로 함수문법이다.
함수 만드는 자리는 data함수 아래에 methods : {}라는 항목을 신설해준다.

data(){
  return {
    신고수 : 0,
  },
  methods : {
    increase(){
      this.신고수 += 1
    }
  }
}

여기서 데이터를 가져다쓰고 싶으면 꼭 this.데이터이름 이라고 사용해야한다.
this는 이 코드를 실행하는 객체를 의미한다.

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button @click="increase()">허위매물신고</button>
  <span>신고수 : {신고수}</span>
</div>

@click="increase" 이렇게 사용할 수도 있다.