VUE中事件处理，处理事件冒泡等

VUE中事件处理，处理事件冒泡等

.prevent 阻止父元素的事件
.stop 阻止事件冒泡

按键修饰符

<template>
    <div>
        <button @click="clickBtn('点击了',$event)">点击</button>

        <h3>事件修饰符</h3>
        <a href="http://www.baidu.com" @click.prevent="aClick">prevent</a>
        <div style="width: 100px;height: 100px;background: red;" @click="clickDiv('点击了')">
            <button @click.stop="btnClick">点击</button>
        </div>

        <h3>按键修饰符</h3>
        <input type="text" @keyup.enter="dealKey">
    </div>
</template>

<script>
    export default {
        name: "DealEvents",
        methods:{
            clickBtn(args,event){
                console.log(args);
                console.log(event)
            },
            aClick(){
                alert("不加prevent，会弹出后进去页面");
            },
            clickDiv(args){
                console.log("父亲div的点击事件被触发");
            },
            btnClick(){
                console.log("儿子button的点击事件被触发,加上.stop就可以阻止事件冒泡");
            },
            dealKey(){
                //返回回车键的键数
                console.log(event['keyCode']);
            }

        }
    }
</script>

<style scoped>

</style>