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>