[Vue] Vue의 Key Modifier란?

 

안녕하세요. 혀코입니다.

이번 시간에는 Vue의 Key Modifier에 대해서 알아보겠습니다.

 

javascript로 이벤트의 키값을 받을 때 사용하는 것을 Vue의 Key Modifier 문법을 통해서 쉽게 제어할 수 있습니다.

Vue의 event binding 으로 keydown 이벤트를 실행해서 handler 라는 함수를 실행시켜 enter키가 눌러졌는지 확인하는 코드를 작성해 보겠습니다.

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

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

 

이것을 key modifier .enter를 사용해서 다시 작성하면 다음과 같습니다.

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

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

 

enter 키 뿐만 아니라 다른 키들도 사용 가능합니다.

다음은 f 키를 눌렀을때 'key F is pressed!' 라고 출력해 보겠습니다.

 

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

<script>
export default {
  methods: {
    handler() {
      console.log('key F is pressed!')
    }
  }
}
</script>

 

텍스트 입력 폼 안에 알파벳 아무 키를 입력하다가 F가 입력되면 콘솔창에 'Key F is pressed!' 가 출력되는 것을 확인하실 수 있습니다.

그리고 key modifier 도 .ctrl.s 처럼 chaining 형식으로 사용할 수 있어서 두개 이상의 키를 동시에 입력할 경우에만 메시지를 출력하게 만들 수 있습니다.

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

<script>
export default {
  methods: {
    handler() {
      console.log('Ctrl + S key is pressed. Document is saved!')
    }
  }
}
</script>

 

page down 및 page up 과 같은 키들은 page-down 및 page-up 등과 같은 kebab-case 처럼 소문자와 하이픈으로 이뤄진 형식으로 사용해야 합니다.

 

이렇게 Key Modifier에 대해서 알아봤습니다.

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)