vue中的修饰符案例

最新推荐文章于 2024-01-05 16:25:20 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2024-01-05 16:25:20 发布

阅读量136

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wulianlang6162/article/details/98442570

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

事件中的修饰符

.stop :阻止冒泡
.prevent 阻止默认事件
.capture: 添加使劲按倾听时使用事件捕获模式
.self 只当事件在该元素本身触发的时候回调
.once 事件只触发一次

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<!--//导入js包-->
<script src="js/vue.js"></script>
<body>
<div id="app">
    <!--.self只有点击当前元素才会触发，冒泡和捕获不会触发-->
    <div class="inner" @click.self="div">
        <!--先出发内部的点击事件，可以使用.stop来阻止冒泡-->
        <input type="button" value="stop来阻止冒泡" @click.stop="on">
        <!--prevent来阻止默认行为-->
        <a href="http://www.baidu.com" @click.prevent="linkclick"> 去百度</a>
        <!--capture实现捕获触发事件机制-->
        <input type="button" value="捕获" @click.capture="gocapture">
        <!--使用.once只是触发一次事件-->
        <input type="button" value="once" @click.once="once">
        <!--self 和stop的区别，self只阻止当前事件，stop就是全部阻止-->
    </div>
</div>

<script type="text/javascript"
\>
    new Vue({
        el: '#app',
        data: {
            msg: 'hellfovue '
        },
        methods:{
            on(){
                console.log("inner事件")
            },
            div(){
                console.log("div的点击事件")
            },
            linkclick(){
                console.log("去百度事件")
            },
            gocapture(){
                console.log("捕获")
            }
            ,once(){
                console.log("one")
            }
        }
    });
</script>

</body>
</html>

学习没有捷径，如果有那便是持之以恒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中的修饰符案例

事件中的修饰符.stop :阻止冒泡.prevent 阻止默认事件.capture: 添加使劲按倾听时使用事件捕获模式.self 只当事件在该元素本身触发的时候回调.once 事件只触发一次案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫