vue2.0之v-on 绑定事件监听器

v-on

缩写:@
预期:Function | Inline Statement | Object
参数:event

修饰符:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,167评论 0 29
  • 素食馆一下子冒出来,各种小广告的朋友圈里转起。 国庆期间,没能免俗,只是从个人潇洒转为带着爸爸妈妈一起去消遣。 今...
    G言阅读 306评论 0 0
  • 很多人说毕业季就是分手季 马上就要收拾东西离开熟悉的校园了 你,和你的对象还好么? 当然,不是所有的人都能在大学中...
    学妹晚上好阅读 263评论 0 0
  • 一同拎起 一桶又一桶 纯净的日子 浇灌亲情 盛开的孩子 结出你我 吞咽风雨的 野心
    水波杨山阅读 1,142评论 6 7
  • 《门徒》 海底石 作 题记 我不怕一无所有 也不怕烂漫天真 我就是从那里走来 怕只怕你走进我的灵魂 颠倒是非 一 ...
    王自鹏阅读 499评论 0 1

友情链接更多精彩内容