Vue.js 문법 - 키 수식어

 

키 수식어

 

- Vue에서 키 이벤트를 청취할 때 수식어로 v-on 또는 @ 를 더할 수 있다

- 체이닝이 가능하다

 

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

<!-- 체이닝 -->
<input type="text" @keydown.ctrl.a="handler" />

 

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

 

<!-- $event.key === PageDown 일 때만 호출 -->
<input @keyup.page-down="onPageDown" />

 

키 명령어

 

- Vue는 자주 사용하는 키 명령어를 제공

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