Vue.js的学习（5）

最新推荐文章于 2025-05-08 14:32:06 发布

Mccree1997

最新推荐文章于 2025-05-08 14:32:06 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-js

本文链接：https://blog.youkuaiyun.com/Mccree1997/article/details/79197566

vue-js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍Vue.js中的事件处理机制，包括使用v-on指令绑定事件、修饰符如.prevent和.stop的作用，以及如何通过自定义方法响应用户交互。

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

事件处理程序

v-on 是Vue用来监听DOM事件的指令缩写是@

<ul id="app4">
        <button @click="couter()">click</button>
        <li>按钮点击了{{num}}次</li>
        <button @click="hello">Click me</button>
    </ul>
//JS代码
 var example=new Vue({
        el:"#app4",
        data:{
            num:0
        },
        methods:{
           couter:function(){
                this.num=this.num+1;
           },
            hello:function(){
               alert("hello "+this.num);
            }
        }
    })

使用起来有点像在标签中插入onclick

<div id="app5">
        <button @click="alert('hello')">click</button>
//之后绑定Vue就可以使用
</div>

当然有事件的地方就肯定有event.preventDefault()和event.stopPropagation()方法

在Vue中我们只需要在后面用.stop和.prevent 等等可以达到效果

//阻止事件冒泡
<a v-on:click.stop="hello"></a>
//阻止默认事件
<form v-on:submit.prevent="onSubmit"></form>
//添加事件处理程序使用捕获模式
<div v-on:click.capture="doThis">...</div>
//只当在 event.target 是当前元素自身时触发处理函数 
<div v-on:click.self="doThat">...</div>
//只触发一次
<div @click.once="OneTime"></div>