Vue-阻止事件冒泡和默认行为案例

40次阅读

共计 631 个字符,预计需要花费 2 分钟才能阅读完成。

话不多说,
三句多。
先上一段代码:

<script>
    window.onload=function(){
        let vm=new Vue({
            el:"#div",
            data:{ },
            methods:{show(){console.log(111);
                    // 原生写法://js:show(e){console.log(111); e.stopPropagation();}
                    //html:<button @click="show($event)">
                },
                print(){console.log(222);
                },
                write(){console.log(333);
                },study(){console.log(444);
                    // 原生写法://js:show(e){console.log(111); e.preventDefult();}
                }
            }
        });
    }
</script>
<body>
    <div id="div">
        <!-- 事件冒泡 -->
        <div @click="write">
            <p @click="print">
                <button @click.stop="show">click me</button>
                <!--+.stop 直接完事,简单干脆 -->
            </p>
        </div> 
        <!-- 阻止默认行为 -->
        <a href="#" @click.prevent="study"></a> 
        <!--+.prevent 直接完事,简单暴力,握草 --> 
    </div>
</body>

感觉 Vue 就是神仙操作,简单直接暴力,关键也会记不住,
真是一把鼻涕一把辛酸泪啊。

正文完
 0