Vue 阻止事件冒泡和默認行爲案例

時間 2019-11-06

原文原文鏈接

話很少說，
三句多。
先上一段代碼：html

<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 就是神仙操做，簡單直接暴力，關鍵也會記不住，
真是一把鼻涕一把辛酸淚啊。code

相關標籤/搜索