Vue2.0 Vue事件处理修饰符(v-on.)

最新推荐文章于 2024-04-24 09:22:16 发布

结城明日奈是我老婆

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量304

点赞数

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121904296

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件处理</title>
    </head>
    <body>
        <div id="root">
            欢迎{{name}}
            <a href="https://www.bilibili.com" @click="showInfo">点我</a>
        </div>
    </body>
    <script src="indexJS.js"></script>
</html>

Vue.config.productionTip=false

new Vue({
    el: '#root',
    data() {
        return {
            name: '陈天羽'
        }
    },
    methods: {
        showInfo(){
            alert('同学你好')
        }
    },
})

弹窗后就跳走了，我不想让它跳走
跳走是<a>标签的默认行为

methods: {
        showInfo(e){
            e.preventDefault();
            alert('同学你好')
        }
    },

e.preventDefault();原意是event.preventDefault();来阻止默认行为;还可以用另一种方法阻止掉这个默认事件

<a href="https://www.bilibili.com" @click.prevent="showInfo">prevent按键</a>

那vue给我准备了几个修饰符
Vue中的事件修饰符
1.prevent: 阻止默认事件(常用);
2.stop: 阻止事件冒泡(常用);
3.once: 事件只触发一次(常用);
4.capture: 使用事件的捕获模式;
5.self: 只有event.target是当前操作元素时才触发;
6.passive: 事件的默认行为立刻执行,无需等待事件回调执行完成;

stop: 阻止事件冒泡

<div class="demo1" @click="showInfo1">
    <button @click="showInfo1">点我</button>
</div>

点击了按钮弹窗出现了俩次(这就是冒泡(点击了按键冒泡到了div的身上))
阻止这个冒泡可以写一个配置方法

showInfo1(e){
    e.stopPropagation();
    alert('同学你好')
}

还可以在html:

<div class="demo1" @click="showInfo1">
    <button @click.stop="showInfo1">stop按键</button>
</div>

once: 事件只触发一次(常用)

你点了一次弹窗,之后你不希望在有这个了

capture: 使用事件的捕获模式

<div>
    div1
    <div>
        div2
    </div>
</div>

先进行事件捕获，再是事件冒泡

捕获阶段是由外往内的;随后触发的是冒泡阶段，是有内往外的
不想再冒泡的时候处理
我想在捕获阶段就开始处理事件，就可以

<div @click.capture="showInfo2(1)">
    div1
    <div @click="showInfo2(2)">div2</div>
</div>

对于div1来说事件在捕获阶段就已经开始了

passive: 事件的默认行为立刻执行,无需等待事件回调执行完成

关于滚动是有俩个单词的

scroll
wheel:鼠标滚动轮的滚动
这俩的区别是wheel即便是滚动到最下面在滚动依然会触发;
而scroll滚动到最下面怎么滚动都不会触发

<ul @wheel.passive="demo1" class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>