vue2使用ref监听按键事件

在Vue 2中，使用`ref`来监听按键事件是一个直接的方法，通常可以结合键盘事件监听器如`keydown`或`keyup`来实现。`ref`属性在Vue中用于直接获取DOM元素的引用，然后可以在这个DOM元素上直接设置事件监听器。以下是一个基本的例子来展示如何使用`ref`来监听按键事件：

<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myInput.addEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      // 你可以在这里处理按键事件
      console.log('按键被按下', event.key);
    }
  },
  beforeDestroy() {
    // 确保在组件销毁前移除事件监听器
    if (this.$refs.myInput) {
      this.$refs.myInput.removeEventListener('keydown', this.handleKeyDown);
    }
  }
}
</script>

在上面的代码中，`<input>`元素有一个`ref`属性，其值为`myInput`。在Vue组件的`mounted`生命周期钩子中，我们通过`this.$refs.myInput`获取了这个DOM元素的引用，并为其添加了一个`keydown`事件监听器。当按键被按下时，`handleKeyDown`方法会被调用，我们可以在这里根据`event.key`来判断哪个键被按下并进行相应的处理。另外，为了避免内存泄漏，我们在`beforeDestroy`生命周期钩子中移除了事件监听器。