Vue常用按键别名详解

在 Vue 中，常用的按键别名共有 9 个核心别名，用于快速监听键盘事件，它们分别是：.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。通过这些别名，开发者可以直接在模板中绑定按键事件，无需手动处理键码或兼容性问题。

---

详细分析

1. 按键别名列表及作用

以下为 Vue 官方支持的按键别名及其对应的按键和典型使用场景：

别名	对应按键	典型场景
.enter	Enter（回车键）	表单提交、搜索确认
.tab	Tab（制表键）	表单焦点切换
.delete	Delete 和 Backspace	删除内容、撤销操作
.esc	Escape（退出键）	关闭弹窗、取消操作
.space	Space（空格键）	播放/暂停、选中选项
.up	↑（上方向键）	列表导航、数值增加
.down	↓（下方向键）	列表导航、数值减少
.left	←（左方向键）	横向导航、日期切换
.right	→（右方向键）	横向导航、日期切换

---

2. 代码示例

以下是一个包含全部常用别名的完整示例：

<template>
  <div>
    <!-- 回车键 -->
    <input @keyup.enter="handleEnter" placeholder="按回车提交" />
    
    <!-- Tab键（需配合 keydown 事件） -->
    <input @keydown.tab="handleTab" placehol