vue学习 四 v-on的事件修饰符和按键修饰符
vue学习 四 v-on的事件修饰符和按键修饰符
meihuasheng
发布于 2021-03-16 21:40:46
发布于 2021-03-16 21:40:46
代码可运行
运行总次数：0
代码可运行
方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop 阻止事件继续传播.prevent 阻止标签的默认事件发生.capture.self.once 事件只会发生一次.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。
上图中的.once 事件中，页面结果就是点一次涨一岁后再点击就没有用了；
.stop 事件中，当鼠标移动到“停止移动”处时左边位置就不再变化了；
.prevent 事件中，当我们点击a标签后，只能执行alert方法输出hello world，不能跳转到百度了；
按键的事件修饰符：
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
意思就是只有在按下enter键之后才能触发后面的方法
<!-- 只有在 `key` 是 `Enter` 时调用方法 -->
<input v-on:keyup.enter="submit">
<!-- 只有按下alt和enter键后调用方法 -->
<input v-on:keyup.alt.enter="submit">本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/08/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
