vue中 点击事件的写法_vue系列--vue是如何实现绑定事件

本文详细介绍了Vue.js中事件绑定的使用,包括在标签内直接写JS方法、调用methods的方式,以及如何传参和事件对象。同时,文章探讨了事件修饰符如.stop、.prevent、.capture、.self和.once的应用,并给出了多个实例说明,帮助理解这些修饰符如何影响事件处理。最后提到了键盘事件的监听方法。
摘要由CSDN通过智能技术生成

一、前言

vuejs中的事件绑定,使用来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法。

二、事件绑定方式

1、 直接在标签中写js方法

执行方法的第一种写法

2、调用method的办法

执行方法的第一种写法

执行方法的 简写 写法

export default {

data () {

return {

msg: '你好vue',

list:[]

}

},

methods:{

run:function(){

alert('这是一个方法');

}

}

}

(1)方法传参,方法直接在调用时在方法内传入参数

执行方法传值111

执行方法传值2222

deleteData(val){

alert(val);

},

(2)传入事件对象

事件对象

eventFn(e){

console.log(e);

// e.srcElement dom节点

e.srcElement.style.background='red';

console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/

}

三、事件修饰符

1、stop  //阻止事件继续传播 即阻止它的捕获和冒泡过程<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值