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

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

<form action="">
<input type="text" name="pwd">
</form>

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

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

<el-form @submit.native.prevent></el-form>

Vue 的事件修饰符

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

<form @submit="submit">
<input type="text">
</form>

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

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

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

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

<button @click.stop="doClick"></button> // 绑定点击事件，将自动阻止事件冒泡
<a @click.prevent="clickA" href="#">链接</a> // 阻止浏览器默认行为
<button @click.once="doClick"></button> // 该事件将仅生效1次
<input @keyup.enter="submit"> // keyup事件触发后，判断是回车键时执行submit
<input @keyup.page-down="next">

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

<el-input @keyup.native.enter="" />

.native 的作用

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

<input @keyup="" /> keyup为dom原生事件：按键抬起事件
<el-input @keyup="" /> keyup被理解为elinput自定义组件的自定义事件

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

是组件的自定义事件：

<el-input @keyup.native=""/>
<el-button @click.native=""><el-button>
<el-input @blur.native=""/>