이벤트 핸들링

공식 참고 문서

https://v3.ko.vuejs.org/guide/events.html

이벤트 핸들링 | Vue.js

 

이벤트 핸들러: 어떠한 동작을 하였을때 실행시킬 함수를 정의하여 사용

 

버튼을 클릭하였을때 사용자가 정의한 핸들러를 호출하는 예제 코드를 작성하였다.

1. 버튼을 클릭하였을 때 이벤트 데이터를 가져오는 핸들러

2. 버튼을 클릭하였을 때 입력한 매개변수 데이터를 가져오는 핸들러

3. 버튼을 클릭하였을 때 입력한 매개변수와 이벤트 데이터를 가져오는 핸들러

4. 버튼을 클릭하였을 때 여러가지의 핸들러를 동시에 사용하는 예제

 

예제 코드 (App.vue)

<template>
  <button @click="handler">
    이벤트 출력
  </button>
  <button @click="handler2('what')">
    매개변수 데이터 출력
  </button>
  <button @click="handler3('ee', $event)">
    매개변수와 이벤트 모두 출력
  </button>
  <button @click="handlerA(), handlerB()">
    여러개의 핸들러를 호출
  </button>
</template>

<script>
export default {
  methods: {
    // 이벤트를 동작하는 객체를 출력
    handler(event)   {
      console.log(event)
      console.log(event.target)
      console.log(event.target.textContent)
    },
    handler2(msg){
      console.log(msg)
    },
    handler3(msg, e){
      console.log(msg)
      console.log(e)
    },
    handlerA(){
      console.log('A')
    },
    handlerB(){
      console.log('B')
    }
  }
}
</script>

 

브라우저 확인