한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

키수식어

1. keydown 이벤트

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

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

개발 서버를 열어 input박스에 키보드를 입력해 보면, 키보드 이벤트 객체가 콘솔창에 나타나게 됩니다. 이 객체를 자세히 살펴보면 key값에 누른 키보드값이 들어가 있는 것을 확인할 수 있습니다.

2. key이벤트 제어

key이벤트를 제어할 때 이벤트 객체 안에 들어 있는 key속성의 내용을 확인해 로직을 정리해 활용할 수 있습니다.

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

3. vue.js의 key수식어

vue.js의 key수식어를 이용하면 key이벤트를 조금 더 손쉽게 제어를 할 수 있습니다.

⭐event.key에서 확인할 수 있는 특정한 키의 이름을 dash-case(kebab-case)로 변경해서 수식어로 넣어주면 됩니다.

key의 고유값이 없는 경우 index를 사용할 수는 있지만 그 요소가 가변하지 않는다는 전제조건이 있어야합니다!

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

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

3-2. 메소드 체이닝

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