Vue中的事件修饰符
2018-10-28 14:27
134 查看
Vue里面的事件修饰符,可以阻止冒泡行为,和一些默认行为等等,让我们看看具体是怎么使用的。
.stop(阻止冒泡)
[code]<div class="inner" @click="div1Handler"> <input type="button" value="戳他" @click.stop="btnHandler"> </div>
.prevent(阻止默认行为)
[code]<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
上面这一行代码并没有跳转到百度,因为.prevent 阻止了a标签的默认行为
.capture(实现捕获触发事件的机制)
[code]<div class="inner" @click.capture="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div>
.self(实现只有点击当前元素时候,才会触发事件处理函数)
[code]<div class="inner" @click="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div>
.once(实现支触发一次事件处理函数)
[code]<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
.stop 和.self 的区别
.self 指挥阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡行为
阅读更多相关文章推荐
- Vue------第四天(事件处理:事件监听、修饰符等;表单输入绑定:基础用法、值绑定)
- vue中的事件修饰符
- vue事件修饰符和按键修饰符用法总结
- 《vue2.0 框架学习》--键盘事件和修饰符
- vue笔记--事件修饰符
- vue.js中的事件修饰符的使用
- vue-事件修饰符
- Vue.js事件修饰符解释
- Vue 事件修饰符.self的用法
- 前端框架vue.js系列(4):事件修饰符与按键修饰符
- Vue基础知识之常用属性和事件修饰符(二)
- vue2.X事件修饰符
- 详解Vue 事件修饰符capture 的使用
- vue 事件修饰符 stop,capture,prevent
- vue.js常用的事件修饰符
- VUE的事件修饰符,once,prevent,stop,capture,self,passive
- vue-事件修饰符和按键修饰符
- Vue.js-03:第三章 - 事件修饰符的使用
- Vue 框架-03-键盘事件、健值修饰符、双向数据绑定
- 第二天(vue事件、事件修饰符,键盘事件与修饰符)