vue键盘事件

事件名称

@keydown,当按下去就会触发事件； @keyup,当按下去抬起来，就会触发事件；（常用）

<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
methods:{
showInfo(e){
console.log(e.target.value)  //打印出来的是输入框里面的内容
}

• 这样无论输入什么都会打印出来，这样是不对的，当按回车键的时候，再进行数据的收集；

• 每一个按键都有对应的编码

  • console.log(e.keyCode)
  • 当按下回车键时，他的编码是88

  methods:{
   showInfo(e){
   if (e.keyCode !==13) return // 如果不是enter回车键，就把逻辑停掉
   console.log(e.target.value)  //打印出来的是输入框里面的内容
  }
  

## 在vue中不需要那么麻烦
- 只需要在`@keyup`后面加一个`enter`即可


<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">


## vue中常用的几个按键别名

- 回车 => enter
- 删除 => delete(捕获删除和退格键)
- 退出 = >esc 
- 空格 = > space
- 换行 = > tab

## 修饰符可以连续写

<input type="text" placeholder="按下回车提示输入" @keyup.stop.prevent="showInfo">

- 阻止冒泡并防止默认事件