Vue) Click을 감지하는 이벤트 핸들러

나 안해·2023년 3월 15일

vue

목록 보기

5/10

0. Vue에서는 이벤트를

기존에 onClick=""으로 작성했던 js와 달리
v-on:Click=""나 @click=""으로 작성한다.

0.1 이벤트명 정리

이벤트	기능
click	말그대로 클릭
mouseover	해당 위치에 마우스를 댔을 때

등 여러개가 있지만 굳이 정리 찾아보지말고 Ctrl+SpaceBar로 직접 써보자

1. ""에 들어가는 JS의 내용은?

버튼을 누르면 변수를 찾고 계산을 해서 그 값을 HTML에 반영하는 기존 JS의 방식과 달리 vue는 클릭 만으로 반영된다.
그러니까 @click=""의 안에는 count++나 count +=1, count = count+1을 입력해주면 된다.(데이터를 쓴다고 {{}} 사용X)

JS 함수?

1.1 이벤트가 너무 길어지면?

script에서 함수를 만들어서 쓰면 된다

method : { 함수(){} }의 위치

<script>
export default {
  name: 'App',
  data(){
    return { 
    }
  },
  methods : {
  	함수 내용
  }
  components: {
  }
}
</script>

2. 예시) 버튼 카운터

회원별 클릭 카운터를 만들어보자

<template>
  <div v-for="(i, j) in users" :key="i">
    <h4>{{i}}</h4>
    <button @click="ben(j)"></button> <span>신고수 : {{count[j]}}</span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return { 
      count: [0, 0, 0],
      users : ['user1', 'user2', 'user3']
    }
  },
  methods :{
    ben(i){
      this.count[i] +=1;
    }
  },
  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;
}

.menu {
  background-color: darkslateblue;
  padding : 15px;
  border-radius: 5ps;
}

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