最推荐方式是使用@keyup.up等按键修饰符监听方向键，语义清晰、无需keyCode；局部交互直接绑定元素，全局控制需用window.addEventListener并清除监听，优先使用event.key判断。

Vue 中监听方向键（上、下、左、右）实现移动控制，最推荐的方式是用 @keyup.up 和 @keyup.down 这类按键修饰符，简洁、语义清晰、无需查 keyCode。

直接在输入框或可聚焦元素上绑定

适用于搜索框、表单、弹窗等局部交互场景。按下方向键时触发对应逻辑：

• 用 @keyup.up 监听「上箭头」，@keyup.down 监听「下箭头」
• 默认只响应 keyup（抬起），避免重复触发；如需按住持续响应，改用 @keydown.up
• 事件函数中可执行光标移动、选项高亮、列表滚动等操作

示例：

<input type="text" placeholder="按上下键切换选项">

对应方法：

methods: {
  moveUp() { console.log('向上移动') },
  moveDown() { console.log('向下移动') }
}

全局监听页面级方向键（如画布/相册控制）

当焦点不在输入框，而希望整个页面响应方向键（比如控制图片移动、幻灯片切换），需用 window.addEventListener：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 在 mounted 中添加监听，beforeUnmount 中清除，防止内存泄漏
• 用 event.key 判断（推荐）或 event.code，比 keyCode 更可靠且语义明确
• 注意加 e.preventDefault() 防止浏览器默认行为（如页面滚动）

示例：

mounted() {
  window.addEventListener('keydown', this.handleDirectionKey)
},
beforeUnmount() {
  window.removeEventListener('keydown', this.handleDirectionKey)
},
methods: {
  handleDirectionKey(e) {
    if (e.key === 'ArrowUp') {
      this.movePhoto('up')
    } else if (e.key === 'ArrowDown') {
      this.movePhoto('down')
    }
  },
  movePhoto(dir) {
    // 更新图片的 transform 或 margin 等样式
  }
}

组合键与防误触技巧

方向键常配合修饰键使用（如 Ctrl+↑ 调整速度），也需注意实际体验：

• 若需组合键，可写成 @keydown.ctrl.up 或在事件函数中判断 e.ctrlKey && e.key === 'ArrowUp'
• 避免在 contenteditable 区域或文本输入中拦截方向键，影响用户正常编辑
• Mac 上 Command 键对应 metaKey，别名 .meta 可统一处理跨平台快捷键

不建议直接用 keyCode 的原因

虽然 e.keyCode === 38 也能识别上箭头，但：

• keyCode 已被标准废弃，event.key（值为 "ArrowUp"）和 event.code（值为 "ArrowUp"）才是现代推荐方式
• 别名写法更直观：.up、.down、.left、.right 一目了然
• VUE 自动做了兼容处理，包括 CapsLock、NumLock 等状态影响，不用手动过滤

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！