vue之事件修饰符

最新推荐文章于 2023-06-26 17:01:44 发布

Volcano_WQL

最新推荐文章于 2023-06-26 17:01:44 发布

阅读量355

点赞数

分类专栏： Vue.js自学笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45614713/article/details/105466720

版权

Vue.js自学笔记专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <div class="btnParent" @click="clickParent">
<!--        .stop修饰符阻止冒泡事件向上传递-->
        <button @click.stop="clickEvent">按钮</button>
    </div>

    <form action="" method="post">
        <!--   阻止默认事件 -->
        <input type="text" name="username" id="" value=""/>
        <input @click.prevent="searchWeather" type="submit" value="提交"/>
    </form>
<!--    .self 只有点该按钮才会激活对应事件
          .once 只触发一次
            .enter等  按键修饰符 -->
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{

        },
        methods:{
            clickEvent:function (event) {
                console.log("clickEvent")
            },
            clickParent:function () {
                console.log("clickParent")
            },
            searchWeather:function () {
                console.log("查询天气");
            }

        }
    })
</script>
</body>
</html>