Vue事件修饰符的总结

分为六点：

1.prevent 阻止默认行为(常用)

2.stop 阻止事件冒泡(常用)

3.once 事件值触发一次(常用)

4.capture 使用事件的捕获模式

5.self 只有event.target是当前操作的元素是才触发事件

6.passive 事件的默认行为立即执行无需等待事件回调执行完毕

我们可以分别看一下具体是怎么使用：

1 prvent 阻止默认行为

 <div class="root"><a href="http://www.baidu.com" @click.prevent='show'>点我</a> // 点击之后会发现 并不会跳转百度页面 </div><script>new Vue({el:'.root',data: {},methods: {show(){alert('你好');}},})</script>

2 stop 阻止冒泡行为

 <div class="stop" @click.stop='show1'><button @click.stop='show1'> 阻止冒泡</button>
//如果不用.stop则会发生事件冒泡 出现两次你好弹窗</div><script>new Vue({el:'.stop',data: {},methods: {show1(){alert('你好');}},})</script>

3.once 只触发一次

  <div class="once"><button @click.once='show2'>只触发一次</button>
//支触发一次的意思就是 当点击完成第一次事件后 再次点击就不生效</div><script>new Vue({el: '.once',data: {},methods: {show2() {alert('你好');}},})</script>

4 capture使用事件的捕获模式

 <div class="capture" @click.capture='show3(1)'><button @click='show3(2)'>触发捕获</button>
//如果没有.capture 事件修饰符 则结果输出位 2 1 冒泡行为
//这里使用了.capture后 输出结果为 1 2 触发捕获阶段 从外向里</div><script>new Vue({el: '.capture',data: {},methods: {show3(a) {console.log(a);}},})</script>

5 self

 <div class="capture" @click.self='show3()'><button @click='show3()'>点击我</button>
//效果类似于 .prevent 可以阻止冒泡
//如果不加这里会输出 两个 <button>点击我</button>
//因为只是冒泡上只是触发了输出 但是并没有输出div </div><script>new Vue({el: '.capture',data: {},methods: {show3(e) {console.log(e.target);}},})</script>

6 passive 我的理解为相当于异步就是不等回调函数执行完毕进而直接先立即执行默认行为

Vue事件修饰符的总结相关推荐

vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
vue事件修饰符，六次实操带你快速了解与应用~
一.速识概念: 你好呀,最近过的怎么样?今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...

Vue事件修饰符的总结

Vue事件修饰符的总结相关推荐

最新文章

热门文章