Vue가 키보드 이벤트를 수신하는 방법

소개

웹 개발에서 키보드 이벤트는 가장 일반적인 상호 작용 방법 중 하나입니다. 널리 사용되는 JavaScript 프레임워크인 Vue는 키보드 이벤트를 수신하는 간단하고 유연한 방법을 제공합니다. 이 기사에서는 Vue에서 키보드 이벤트를 수신하는 방법을 소개하고 몇 가지 실제 예를 보여줍니다.

1. Vue에서 키보드 이벤트 수신의 기본 사용법

Vue에서는 @keydown템플릿의 지시어를 사용하여 키보드 이벤트를 수신할 수 있습니다. 예를 들어, 버튼의 Enter키 누르기 이벤트를 수신할 수 있습니다.

<template>
  <button @keydown.enter="handleEnter">按下Enter键</button>
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleEnter() {
      
      
      console.log('Enter键被按下了！');
    }
  }
}
</script>

위 코드에서는 키 누르기 이벤트를 @keydown.enter수신 Enter하고 handleEnter메서드에 메시지를 인쇄하는 데 사용합니다.

2. 특정 주요 이벤트 듣기

특정 키 누르기 이벤트를 수신하는 것 외에도 다른 키 누르기 이벤트도 수신할 수 있습니다. @keydown.enterVue는 등과 @keydown.tab같은 공통 키 이벤트를 수신하기 위한 몇 가지 특수 수정자를 제공합니다. 동시에 키보드 코드를 사용하여 다른 주요 이벤트를 모니터링할 수도 있습니다.

<template>
  <input @keydown.esc="handleEsc" placeholder="按下Esc键退出">
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleEsc() {
      
      
      console.log('Esc键被按下了！');
    }
  }
}
</script>

위 코드에서는 키 누르기 이벤트를 @keydown.esc수신 Esc하고 handleEsc메서드에 메시지를 인쇄하는 데 사용합니다.

3. 이벤트가 터지는 것을 방지

때로는 불필요한 동작을 피하기 위해 키보드 이벤트를 수신할 때 이벤트가 발생하는 것을 방지하고 싶습니다. Vue에서는 .stop이를 달성하기 위해 수정자를 사용할 수 있습니다.

<template>
  <div @keydown.enter.stop="handleEnter">
    <input placeholder="在输入框中按下Enter键不会触发事件">
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleEnter() {
      
      
      console.log('Enter键被按下了！');
    }
  }
}
</script>

위 코드에서는 키 누르기 이벤트를 @keydown.enter.stop수신 Enter하고 handleEnter메서드에 메시지를 인쇄하는 데 사용합니다. .stop수정자를 사용하기 때문에 Enter입력 상자에서 키를 눌러도 이벤트가 시작되지 않습니다.

4. 예: 간단한 키보드 게임 만들기

이제 간단한 예를 통해 Vue에서 키보드 이벤트를 수신하는 방법을 보여드리겠습니다. 사용자가 특정 키를 누르면 게임 속 캐릭터가 해당 동작을 수행하는 간단한 키보드 게임을 만들어 보겠습니다.

<template>
  <div @keydown.space="jump" @keydown.left="moveLeft" @keydown.right="moveRight">
    <img :src="characterImage" alt="角色">
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      characterImage: 'character.png',
      position: 0
    }
  },
  methods: {
      
      
    jump() {
      
      
      // 角色跳跃的逻辑
      console.log('角色跳跃！');
    },
    moveLeft() {
      
      
      // 角色向左移动的逻辑
      console.log('角色向左移动！');
    },
    moveRight() {
      
      
      // 角色向右移动的逻辑
      console.log('角色向右移动！');
    }
  }
}
</script>

위 코드에서는 , 및 를 사용하여 @keydown.space스페이스 @keydown.left바 @keydown.right, 왼쪽 화살표 키, 오른쪽 화살표 키의 누르기 이벤트를 수신하고 해당 메서드에서 메시지를 인쇄합니다.

5. 요약

이번 글을 통해 Vue에서 키보드 이벤트를 수신하는 방법을 배웠습니다. 기본적인 사용법, 특정 키 입력에 대한 이벤트를 수신하는 방법, 이벤트 발생을 방지하는 방법을 배웠습니다. 또한 간단한 예를 통해 키보드 게임을 만드는 방법도 보여 드리겠습니다. 이 글이 Vue의 키보드 이벤트 모니터링을 이해하는 데 도움이 되기를 바랍니다!