[Vue] 이벤트 핸들링 - 키 수식어

⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️

• 키 수식어

 

---

 

자바스크립트에서 key 접근

어떤 요소에 키보드 이벤트를 등록할때 키 코드를 확인해야 하는 경우가 많다. 아래의 예제처럼 input 요소에 사용자가 어떤 값을 입력한 경우 사용자가 입력한 값을 받아와서 처리하는 작업을 많이 해준다. 자바스크립트의 경우 event 객체에 있는 key값에 접근해 작업을 해주만 Vue에서는 간단히 이벤트핸들러에 접근하고 싶은 key를 바로 등록해줄 수 있다.

<template>
  <input type="text" @keydown="handlerA" />
</template>

<script>
export default {
  methods: {
    handlerA(event) {
      console.log(event.key);
      if (event.key === 'a') {
        console.log('click a');
      }
    },
};
</script>

 

Vue에서 key 접근

사용자가 입력한 key에 접근하기 위해 Vue에서는 key 수식어로 바로 접근이 가능하다.

<template>
  <!-- Vue에서는 key를 넘겨줄 수 있다 -->
  <input type="text" @keydown.a="handlerB" />
  <!-- 여러 key를 넘길수도 있다 -->
  <!-- ctrl a를 동시에 입력해야 handlerC가 실행된다 -->
  <input type="text" @keydown.ctrl.a="handlerC" />
</template>

<script>
export default {
  methods: {
    handlerB() {
      console.log('click a');
    },
    handlerC() {
      console.log('click ctrl and a');
    },
  },
};
</script>