09-事件修饰符 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        事件修饰符：
            .stop：作用：用来阻止事件冒泡,用来阻止事件继续向外层传毒
            .prevent：作用：用来组织标签的默认行为
            .self：作用：只监听自身标签触发的事件
            .once：作用：该事件只触发一次

        语法：@事件名.事件修饰符=“事件处理函数”
    -->
    <h1>stop标签</h1>
    <div id="app">
        <div style="width: 200px; height: 200px; background-color: red" @click="parent">
            <div style="width: 100px; height: 100px; background-color: darkmagenta" @click.stop="child">

            </div>
        </div>


        <!--
       prevent，例如下面a标签，href属性就是默认标签行为，会先触发点击事件，然后跳转百度
       可以添加prevent阻止跳转百度
         -->
        <h1>prevent标签</h1>
        <a href="http://www.baidu.com" @click.prevent="test">跳转</a>

        <h1>self标签</h1>
        <!--
            监听自身标签触发的事件
        -->
        <div style="width: 200px; height: 200px; background-color: red" @click.self="parent">
            <div style="width: 100px; height: 100px; background-color: darkmagenta" @click="child">

            </div>
        </div>

        <h1>once修饰符</h1>
        <button @click.once="test">只触发一次</button>
    </div>


</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{

        },
        methods:{
            parent(){
                console.log("parent")
            },
            child(){
                console.log("child")
            },
            test(){
                console.log("test")
            }
        }
    });
</script>
posted @ 2021-09-24 14:07  不是孩子了  阅读(67)  评论(0)    收藏  举报