[Vue.js][Ch2][Vue 문법] 이벤트 핸들링 - 키 수식어

App.vue

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

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

입력한 key가 Enter이면 콘솔에 'Enter!' 가 출력된다.

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

 

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

 

입력한 key가 Enter이면 콘솔에 'Enter!' 가 출력된다.

 

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

입력한 key가 a이면 콘솔에 'Enter!' 가 출력된다.

키 수식어는 체이닝이 가능하다.

<template>
  <input 
    type="text" 
    @keydown.ctrl.a="handler" />  <!-- ctrl 키 + a 누르면 handler 메서드 실행됨 -->
</template>

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

ctrl 키 + a 누르면 handler 메서드 실행됨

<template>
  <input 
    type="text" 
    @keydown.ctrl.shift.a="handler" />  <!-- ctrl 키 + shift 키 + a 누르면 handler 메서드 실행됨 -->
</template>

ctrl 키 + shif 키 + a 누르면 handler 메서드 실행됨