Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；

最新推荐文章于 2024-07-24 11:18:57 发布

陌依依

最新推荐文章于 2024-07-24 11:18:57 发布

阅读量629

点赞数

分类专栏： web前端开发文章标签： vue.js javascript 前端前端框架数据结构

本文链接：https://blog.youkuaiyun.com/a1598452168YY/article/details/127964984

版权

本文详细介绍了Vue中事件绑定的基础和事件修饰符的使用，包括事件绑定的加括号与不加括号的区别，如何通过事件对象获取节点对象以及输入框的值。同时讲解了stop防止事件冒泡，prevent阻止默认行为，capture、self和once的特殊功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看代码：

<body>
    <div id="box">
        {
  {count}}
        <button @click="handleAdd1()">add1</button>
        <button @click="handleAdd2">add2</button>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                count: 0,
                },
                methods: {
                    handleAdd1(){
                        this.count++
                    },
                    handleAdd2(evt) {
                        this.count++
                        console.log(evt)
                    },
                }
        })
    </script>
</body>

结果：点击add1，count数量会增加；点击add2，count数量会增加，然后打印出evt的值见下图：