Vue中监听事件

一，在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件

<input @keyup.enter="function">

属性名	键值
.delete	delete（删除）/BackSpace（退格）
.tab	Tab
.enter	Enter（回车）
.esc	Esc（退出）
.space	Space（空格键）
.left	Left（左箭头）
.up	Up（上箭头）
.right	Right（右箭头）
.down	Down（下箭头）
.ctrl	Ctrl
.alt	Alt
.shift	Shift
contextmenu.prevent	鼠标右击

二，Vue也支持组合写法

组合写法	按键组合
@keyup.alt.67	Alt + C
@click.ctrl.enter	Ctrl + Enter

三，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如：

<el-input
  v-model="inputName"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

如果遇到.native修饰符也无效的情况，可能就需要用到$listeners了，具体用法请参考Vue官方文档：将原生事件绑定到组件。

四、textarea阻止浏览器默认换行操作

   <el-input
          class="textarea"
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          show-word-limit
          @input="inputFn"
          @keydown.native="listen($event)"
        >

js

  listen (event) {
        if (event.keyCode === 13) {
           event.preventDefault();// 阻止浏览器默认换行操作
           return false
        }
      }