vue事件修饰符示例以及介绍

1vue中的事件修饰符

1.prevent 阻止默认事件

示例：

不加时，点击a标签后先执行方法，方法执行结束跳转链接

<a href="www.baidu.com" @click="showInfo">点我跳转</a>

1-4通用方法

showInfo(){alert('你好')
}
//此时弹窗出你好，点击确定后跳转链接

加上后，点击a标签后执行showInfo方法后不跳转链接

<a ref="www.baidu.com" @click.precent="showInfo">点我跳转</a>

2.stop 阻止事件冒泡

示例：

此时点击里层div（我是大聪明）先执行里层方法后，再执行外层方法（我是二聪明），故有两个弹窗

知识点：

冒泡是从里层到外层

捕获是从外层到里层

<div @click="showInfo">我是二聪明<div @click="showInfo">我是大聪明<div>
<div>

此时加上.stop执行完里层后不执行外层，故只有一个弹窗

<div @click.stop="showInfo">我是二聪明<div @click="showInfo">我是大聪明<div>
<div>

3.once 事件只触发一次

示例：

此时点击div会弹窗，关闭弹窗再次点击也会触发弹窗

<div @click="showInfo">我是大聪明<div>

加上.once后点击第一次触发弹窗，关闭弹窗再次点击不会再触发弹窗

<div @click.once="showInfo">我是大聪明<div>

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

示例：

此时点击里层div（我是大聪明）先执行里层方法后，再执行外层方法（我是二聪明），故有两个弹窗

<div @click="showInfo">我是二聪明<div @click="showInfo">我是大聪明<div>
<div>

给父层加上.captrue后先执行外层方法（我是二聪明），再执行里层方法（我是大聪明）

<div @click.captrue="showInfo">我是二聪明<div @click="showInfo">我是大聪明<div>
<div>

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

示例：

此时点击button通过冒泡会打印两次button元素

<div @click="showInfo">我是二聪明<button @click="showInfo">我是大聪明<button>
<div>

showInfo(event){console.log(event.target)
}
//此时弹窗出你好，点击确定后跳转链接

加上 .self后,如果触发了div的click，那么只有event.target是这个div时才会执行这个方法，此时点击button之打印一次button

<div @click.self="showInfo">我是二聪明<button @click="showInfo">我是大聪明<button>
<div>

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

示例：

此时鼠标滑轮滚动时，先循环10000次后滚动条才会向下滚动。

<ul @wheel="demo">
//scroll是监听滚动条滚动  wheel是监听滚轮滚动<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

demo(){for(let i=0; i < 10000; i++){console.log(i)}console.log('累坏了')
}

加上后滚动条和方法同步执行

<ul @wheel.passive="demo">
//scroll是监听滚动条滚动  wheel是监听滚轮滚动<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

vue事件修饰符示例以及介绍相关推荐

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

vue事件修饰符示例以及介绍

vue事件修饰符示例以及介绍相关推荐

最新文章

热门文章