Vue.js事件修饰符理解测试

最新推荐文章于 2025-04-16 20:02:39 发布

原创最新推荐文章于 2025-04-16 20:02:39 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #Javascript

JavaScript 同时被 2 个专栏收录

15 篇文章

订阅专栏

DOM

2 篇文章

订阅专栏

本文通过实例详细介绍了Vue中事件修饰符的使用方法，包括.stop、.capture、.self及.once等，展示了如何通过这些修饰符精确控制DOM事件的传播方式。

测试程序

<!doctype html>
<html>
    <head>
        <title>事件捕获顺序测试</title>
        <meta charset="utf-8">
        <style text="txt/css">
            div{
                border:1px solid red;
                padding:20px;
            }
        </style>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="xdd">
            <div v-on:click="out(1)">
                onclick 输出1
                <div v-on:click="out(2)">
                    onclick 输出2
                    <div v-on:click="out(3)">
                        onclick  输出3
                        <div v-on:click="out(4)">
                            onclick  输出4
                            (DOM0级事件)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
        var app=new Vue({
            el:"#xdd",
            methods:{
                out:function(n){
                    alert(n);
                }
            }
        })
        </script>
    </body>
</html>