[Vue.js] Vue.js 이벤트 사용 방법 (클릭 이벤트)

[Vue.js] 뷰 태그 이벤트 사용 방법

 

뷰에서 클릭 이벤트를 사용하는 방법에는

두가지가 있는데 아래와 같다

그럼 하단의 샘플 예제를 통해

두 가지 이벤트 사용 방법을 알아보도록 하자

 

⭐️  기본 형태

<!--두가지 모두 이벤트 등록하는 키워드-->
<태그명 v-on:이벤트이름></태그명>
<태그명 @이벤트이름></태그명>

 

⭐️  샘플 예제 간단 설명

샘플 예제에서는 좋아요 버튼과 싫어요 버튼을 클릭시

오른쪽에 좋아요 싫어요 개수가 올라가는 간단한 예제이다

 

⭐️  샘플예제

<!--좋아요 싫어요 버튼 클릭-->
<template>
  <button class="button" v-on:click="likecnt++">좋아요</button> <span>좋아요 : {{likecnt}}</span>
  <button class="button" @click="dislikecnt++">싫어요</button> <span>싫어요 : {{dislikecnt}}</span>
</template>



export default {
  name: 'App',
  data(){
    return {
      likecnt : 0,
      dislikecnt : 0
    }
  }
}
</script>

<style>
  .button{
    margin-left : 15px;
  }
</style>

 

 

🌈  출력 결과