Vue.js 이벤트

이벤트

Vue.js에서 이벤트 처리는 애플리케이션의 대화형 요소들을 관리하기 위해 필수적인 부분입니다. Vue.js는 사용자 입력과 같은 이벤트를 처리하고, 이벤트에 반응하여 데이터를 업데이트하거나 다른 로직을 실행할 수 있는 강력한 방법을 제공합니다.

기본 이벤트 처리

Vue에서 이벤트를 처리하는 가장 기본적인 방법은 v-on 디렉티브를 사용하는 것입니다. 이를 통해 DOM 이벤트를 듣고, 그 이벤트가 발생할 때 메소드를 실행할 수 있습니다.

<!-- 메소드 핸들러 -->
<button v-on:click="greet">Click me</button>

new Vue({
  el: '#app',
  methods: {
    greet: function (event) {
      alert('Hello Vue.js!')
    }
  }
})

메소드 이벤트 핸들링

v-on 디렉티브는 메소드 이름을 직접 받을 수 있으므로, 복잡한 표현식보다는 메소드를 직접 바인딩하는 것이 일반적입니다.

<!-- 인자를 전달하면서 메소드 호출 -->
<button v-on:click="say('hi')">Say hi</button>

new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

이벤트 수식어

Vue.js는 이벤트를 더 쉽게 다룰 수 있도록 여러 이벤트 수식어를 제공합니다. 이 수식어는 v-on 디렉티브에 점으로 연결하여 사용할 수 있습니다.

• .stop - 이벤트 전파를 중단합니다.
• .prevent - 이벤트의 기본 작업을 방지합니다 (예를 들어, 링크 열기).
• .capture - 캡처 모드에서 이벤트 리스너를 추가합니다.
• .self - 이벤트가 해당 요소에서 발생했을 때만 트리거를 합니다.
• .once - 이벤트를 한 번만 트리거합니다.

<!-- 클릭 이벤트 전파 중단 -->
<button v-on:click.stop="doThis"></button>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않도록 방지 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 이벤트 리스너를 한 번만 트리거 -->
<button v-on:click.once="doThis"></button>

키 수식어

키보드 이벤트를 처리할 때, 특정 키에 대해 리스너를 설정할 수 있습니다. Vue.js는 키 이벤트에 대해 키 수식어를 제공하여 코드의 가독성을 높여줍니다.

<!-- 엔터 키 이벤트만 처리 -->
<input v-on:keyup.enter="submit" />

시스템 수식어 키

• .ctrl - Ctrl 키와 함께 눌려야 합니다.
• .alt - Alt 키와 함께 눌려야 합니다.
• .shift - Shift 키와 함께 눌려야 합니다.
• .meta - Meta 키와 함께 눌려야 합니다 (맥에서는 Command).

<!-- Ctrl + C -->
<input v-on:keyup.ctrl.c="onCopy" />