很多刚开始使用v-on的键盘事件时，经常会碰到明明添加了@keyup.按键名/值，却没有起作用，（小鸡不尿尿，各有各的道），其实不是没有起作用，而是元素没有获取焦点导致的。

一、v-on 在监听键盘事件时，如果元素没有获取焦点，keyup事件无法生效

比如把 keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件。点击之后，焦点就在按钮上，所以这时按空格键有效。

解决办法一: 按钮添加自定义指令(获取焦点)，添加事件修饰符，ok搞定

• js:
  directives: {
  focus: {
  // 指令的定义
  inserted: function(el) {
  el.focus();
  }
  }
  }
• html:
  <button v-focus @keyup.enter="login" >登 录</button>

解决办法二：把事件绑定到父元素（外框）

<div @keyup.enter="login">
<input type="text">
</div>

二、例子：实现点击按键enter进行登录

思路：

<div @keyup.enter="login">
<input type="text" placeholder="手机号码">
<input type="text" placeholder="密码">
<button v-focus @click.stop="login">登录</button>
</div>

image.png