VUE3 click点击事件及修饰符详解
只绑定一个点击事件
<button @click="greet">单个点击事件</button>
methods:{ greet(){ console.log('单个点击事件') } }
一个标签内绑定多个点击事件方法
<button @click="one($event), two($event)">多个点击事件</button>
methods:{ one(e){ console.log(e) }, two(e){ console.log(e) } }
事件修饰符
.stop 阻止单击事件继续冒泡(适用于出现嵌套点击事件时)
<div @click="box('我是大box')" style="width:500px; background:red"> <button @click.stop="doThis('我是内嵌点击事件按')">单个点击事件</button> </div>
methods:{ doThis(val){ console.log(val) }, box(val){ console.log(val) } }
.prevent 阻止默认事件
<form action=""> <!-- 默认提交事件 --> <!-- <input type="submit" value="提交"> --> <!-- 阻止默认事件 --> <input type="submit" value="提交" @click.prevent="submitCLICK('prevent阻止默认事件')"> </form>
methods:{ submitCLICK(val){ console.log(val) } }
.capture 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理
<form action=""> <input type="submit" value="提交" @click.capture="submitCLICK('capture先在此处理')"> </form>
methods:{ submitCLICK(val){ console.log(val) } }
.once点击事件将只会触发一次
<button @click.once="ononce('点击事件将只会触发一次')">点击事件将只会触发一次</button>
methods:{ ononce(val){ console.log(val) } }
.passive用在移动端的scroll事件,来提高浏览器响应速度,提升用户体验
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发, --> <div @scroll.passive="onScroll">...</div>
修饰符串联使用(按循序执行)
// 按循序执行先执行阻止冒泡事件在执行阻止默认事件 <a @click.stop.prevent="doThat"></a>
TIP
不要把 .passive 和 .prevent(阻止默认事件) 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。
请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
Vue 为最常用的键提供了别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` 按enter键执行 --> <input @keyup.enter="submit" /> <!-- 按delete 键执行 --> <input @keyup.delete="submit" />
系统修饰键
.ctrl
.alt
.shift
.meta
<!-- Alt + Enter 时触发--> <input @keyup.alt.enter="clear" /> <!-- Ctrl + Click 按住加点击时触发--> <div @click.ctrl="doSomething">Do something</div>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue style width a href动态拼接问题的解决
这篇文章主要介绍了vue style width a href动态拼接问题的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08解决Vue警告Write operation failed:computed value is readonl
这篇文章主要给大家介绍了关于如何解决Vue警告Write operation failed:computed value is readonly的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03五步教你用Nginx部署Vue项目及解决动态路由刷新404问题
nginx 是一个代理的服务器,下面这篇文章主要给大家介绍了关于如何通过五步教你用Nginx部署Vue项目及解决动态路由刷新404问题的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-12-12vue-cli系列之vue-cli-service整体架构浅析
这篇文章主要介绍了vue-cli系列之vue-cli-service整体架构浅析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-01-01vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决
这篇文章主要介绍了vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论