在搜索框中敲回车，实现模糊查询的业务

如果在一个 form 表单中的 input 输入框里敲回车，浏览器默认会提交表单（跳转页面）。

搜索条件只有一个输入框时,如果使用了@keyup.enter.native=“handleQuery” 原始键盘回车事件来触发搜索操作,会对整个页面都进行刷新,想让页面不刷新,可使用 @submit.native.prevent 原始提交事件

在此 input 内部回车时，需要阻止自动提交表单：

Vue 的事件修饰符

在 vue 中，为 html5 标签绑定事件的方式如下：

// 当表单提交时执行
submit(e){
e.stopPropergation() // 阻止事件冒泡
e.preventDefault() // 阻止浏览器的默认行为
}

在上述事件处理函数中，经常需要：阻止浏览器默认行为、阻止事件冒泡、获取按键键值、获取事件触发时的属性

等需求。 vue 认为，事件处理函数内部应该更多的聚焦在业务功能的实现上，而不是这些琐碎的事件对象处理。

所以 vue 提供了很多事件修饰符来帮助简化这些代码：

 // 绑定点击事件，将自动阻止事件冒泡
链接 // 阻止浏览器默认行为
 // 该事件将仅生效1次
 // keyup事件触发后，判断是回车键时执行submit

为 el-input 绑定回车事件的写法如下：

.native 的作用

native 事件修饰符的作用是：将当前绑定的事件当做 html 原生事件。

 keyup为dom原生事件：按键抬起事件
 keyup被理解为elinput自定义组件的自定义事件

所以，以后为自定义组件绑定原生事件时，一般都会加一个 .native 修饰符，来告诉vue：这是一个原生事件，不

是组件的自定义事件：