이벤트 핸들러로 click감지

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

이렇게 버튼을 만들어서 

버튼을 누르면 신고수가 올라가게끔 만들 때, 원래는 onClick를 사용했다.

하지만 vue에서는 v-on:click=" " 또는 @click=" "를 사용할 수 있다.

먼저, 신고수의 숫자는 중요한 숫자이므로,

data() {//데이터 보관함
    return {
      신고수 : 0,
      메뉴들 : ['Home','Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      prices : [50, 60, 70]
    }
  },

이렇게 신고수라는 데이터를 만들어주고,

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

이런 식으로, 데이터바인딩을 해준다.

그리고 이제, 옛날 방식으로 하면 버튼을 누르면 숫자를 찾아서 +1을 해주고, +1된걸 HTML에 반영해주면 되지만, vue에서는 실시간 랜더링을 해주기 때문에 그렇게 할 필요가 없다. 그래서

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

이렇게만 적으면, 신고수가 ++되면 알아서 랜더링이 된다.

 

이제 여러가지 이벤트를 알아보자.

@mouseover는 해당 태그에 마우스를 가져다 대면 실행하게 한다.

@input는 글자를 입력하면 실행하게 한다. 이렇게 등등 있으므로 찾아서 사용하고,

해당 이벤트리스너에 넣는 js코드가 길어지면 밑에가서 함수를 만들어서 사용하는게 좋다.

Vue에서 함수를 만들고 싶으면, methods : {}를 만들어서 이 안에 만들어주면 된다.  그리곤 그 안에 함수이름만 넣어서 만들어주면 된다.

export default {
  name: 'App',
  data() {//데이터 보관함
    return {
      신고수 : 0,
      메뉴들 : ['Home','Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      prices : [50, 60, 70]
    }
  },
  methods : {
	increase() {
    
    },
  },
  components: {
    
  }
}

그리고 저 increase함수를 이벤트리스너 안에서 사용하려면 @click="increase"만 사용하면 된다.

그리고 함수안에서 데이터를 사용하려면 this.데이터명으로 사용해야 한다. 아니면 데이터명을 찾을 수 없다고 에러가 난다.