04.vue事件修饰符

最新推荐文章于 2024-04-12 11:01:11 发布

吃了可爱多的我

最新推荐文章于 2024-04-12 11:01:11 发布

阅读量106

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/a123456789qqo/article/details/113801841

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文通过实例代码详细解析Vue.js中的事件修饰符，包括.stop、.prevent、.capture、.self和.once，展示了它们在阻止冒泡、防止默认行为、事件捕获、限制事件触发对象以及限制事件触发次数等方面的应用，帮助读者深入理解Vue.js中事件处理的灵活性。

摘要由CSDN通过智能技术生成

注意：要在该文件同路径下先导入vue.js

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="../lib/vue.js"></script>
    <style>
        .inner{
            height:150px;
            background-color: antiquewhite;
        }
        .outer{
           padding:40px;
            background-color: yellow;
        }
    </style>
    </head>
    <body>
        <div id="app">
            <!--使用.stop修飾符停止冒泡-->
            <!-- <div class="inner" @click="divHandler">
                <input type="button" value="戳他" @click.stop="btnHandler">
            </div> -->

            <!--.prevent阻止默認行為發生-->
            <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，百度</a>
             -->

            <!--使用.capture實現事件補貨機制-->
            <!-- <div class="inner" @click.capture="divHandler">
                <input type="button" value="戳他" @click="btnHandler">
            </div> -->

            <!--使用.self實現只有點擊單簽元素時才會觸發事件-->
            <!-- <div class="inner" @click.self="divHandler">
                <input type="button" value="戳他" @click="btnHandler">
            </div> -->

            <!--使用.once只觸發一次事件-->
            <!--  <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，百度</a>
             --> 

            <!--演示：.stop和.self的區別-->
           <!--  <div class="outer" @click="div2Handler">
             <div class="inner" @click="div1Handler">
                <input type="button" value="戳他" @click.stop="btnHandler">
             </div>
            </div> -->

            <!--演示：.stop和.self的區別-->
            <div class="outer" @click="div2Handler">
                <div class="inner" @click="div1Handler">
                   <input type="button" value="戳他" @click.self="btnHandler">
                </div>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods:{
                    div1Handler(){
                        console.log('觸發了innerdiv的點擊事件')
                    },
                    btnHandler(){
                        console.log('觸發了btn的點擊事件')
                    },
                    linkClick(){
                        console.log('觸發了鏈接的點擊事件')
                    },
                    div2Handler(){
                        console.log('觸發了outerdiv的點擊事件')
                    }
                }
            })
        </script>
    </body>
</html>