키 수식어

이전 시간의 이벤트 수식어에 이어 Vue.js의 키 수식어에 대해 알아봅시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. 키 수식어란?

키보드 이벤트를 청취할 때, 종종 공동 키 코드를 확인해야 합니다.
Vue에서 키 이벤트를 청취할 때 키 수식어로 v-on 또는 @를 더할 수 있습니다.

<!-- 키가 'Enter'일때만 `vm.submit()`을 호출할 수 있습니다.-->
<input @keyup.enter="submit" />

KeyboardEvent.key 를 통해 노출된 유효 키 이름을 케밥 케이스로 변환하여 수식어로 사용할 수 있습니다.

<input @keyup.page-down="onPageDown" />

위의 예제에서, 핸들러는 $event.key === PageDown 일 때만 호출됩니다.

2. 키 명령어

• .enter
• .tab
• .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
• .esc
• .space
• .up
• .down
• .left
• .right

3. 키 수식어 체이닝

키 수식어 또한, 이벤트 수식어와 마찬가지로 체이닝이 가능합니다.

<input type="text" @keydown.ctrl.shift.a="handler" />