17. Vue - 이벤트 키 수식어

1. 키 수식어란?

• 먼저 다음 예제코드를 살펴보자. 

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

<script>
export default {
  methods: {
    handler(event) {
      if(event.key === 'Enter') {
        console.log('Enter!!')
      }
      console.log(event)
    }
  }
}
</script>

• 위의 예제코드를 실행하게 되면 다음과 같은 결과가 콘솔에 출력된다. 

 

• 키보드 이벤트를 콘솔에 출력하도록 만든 코드이다.
• 위의 사진은 a를 입력하고 엔터키를 눌렀을때 콘솔에 출력되는 결과이다. 
• 이처럼, 키보드 조작에 의해 입력된 값을 이벤트 객체를 통해 확인할 수 있다.
• 이 과정을 이벤트 수식어를 통해 쉽게 구현할 수 있는데, 이를 키 수식어라고 부른다. 

---

2. 키 수식어 사용방법

• 키 수식어는 반드시 케밥 케이스를 사용해야 한다. 이 부분을 유념하자.

a) 특정 키 수식어 등록

<template>
  <input
    type="text"
    @keydown.enter="handler" />
</template>

<script>
export default {
  methods: {
    handler() {
      console.log('Enter!!!')
    }
  }
}
</script>

• 위의 코드는 엔터키를 눌렀을 때만 핸들러가 동작하도록 만든 키 수식어다.
• 코드에서 볼 수 있듯이, @keydown 뒤에 점(.)과 함께 원하는 키를 등록할 수 있다.

 

b) 다수의 키 수식어 등록

• Chaining 기능을 사용하여 여러개의 키를 이처럼 등록할 수도 있다. 
• 위의 코드는 엔터 또는 컨트롤을 누르면 이벤트 핸들러가 동작하게 된다. 

 

• 컨트롤, 쉬프트, 알트키의 경우 반드시 함께 눌러야만 인지한다. 
• 위의 코드를 예시로 하면, 컨트롤 키 또는 a키를 누른다고 이벤트 핸들러가 동작하는 것이 아니라
• 반드시 컨트롤 키와 a키를 함께 눌러야 이벤트 핸들러가 동작하는 방식이다.