[Vue.js] 이벤트 핸들링

이벤트 핸들링

1. 이벤트 청취

v-on 디렉티브는 @기호로,

DOM 이벤트를 듣고 트리거될 때와 JavaScript를 실행할 때 사용합니다.
v-on:click="methodName" 혹은 줄여서 @click="methodName"으로 사용합니다.

<div id="basic-event">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
Vue.createApp({
  data() {
    return {
      counter: 1
    }
  }
}).mount('#basic-event')

2. 메소드 이벤트 핸들러

위의 코드와 같이 간단한 코드의 경우에는 문제가 없지만,

많은 이벤트 핸들러의 로직은 더 복잡하기 때문에 위와 같은 방법은 지양하는 것이 좋습니다.

<div id="event-with-method">
  <button @click="greet">Greet</button>
</div>
Vue.createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다.
      alert('Hello ' + this.name + '!')
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}).mount('#event-with-method')

이처럼 methods라는 옵션을 추가한 뒤 greet 함수를 만들어 그 안에 복잡한 로직을 코딩하여 클릭하면 실행할 이벤트 핸들러로써 메소드의 이름을 작성하시면 됩니다.

3. 인라인 메소드 핸들러

메소드 이름을 직접 바인딩 하는 대신에, 인라인 JavaScript 구문에 메소드를 사용할 수도 있습니다.

<div id="inline-handler">
  <button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>
</div>

Vue.createApp({
  methods: {
    say(message) {
      alert(message)
    }
  }
}).mount('#inline-handler')

때로 인라인 명령문 핸들러에서 원본 DOM 이벤트에 액세스 해야할 수도 있습니다.

특별한 $event를 사용해 메소드에 전달할 수 있습니다.

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

복합 이벤트 핸들러

이벤트 핸들러 안에서 복합 메소드를 지정할 수도 있습니다.

이러한 방식을 통해 하나의 이벤트에 여러 개의 메소드를 동시에 연결하여 사용할 수 있습니다.

<template>
  <button @click="handlerA(), handlerB()">
    Click me!
  </button>
</template>
<script>
export default {
  methods: {
    handlerA() {
      console.log('A')
    },
    handlerB() {
      console.log('B')
    }
  }
}
</script>

그러나 유의해야할 점은 복합 메소드를 작성할 때에는 ,로 구분하고 각각의 메소드들에 호출하겠다는 ()를 뒤에 붙여줘야 한다는 점입니다.