第六节——Vue中的事件

一、定义事件

Vue 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同

使用@修饰符(v-on:的缩写)+事件名的方式 给dom添加事件后面跟方法名,方法名可以直接加括号如@click="add()"里面进行传参。对应的事件处理函数必须在 methods对象中定义。


二、事件修饰符

为了更好地处理事件,Vue3提供了一些便利的事件修饰符。事件修饰符可以用于改变默认事件行为、限制事件触发条件等如.stop、.prevent、.capture、.self、.once等等。下面是一些常用的事件修饰符用法

1、.stop

阻止事件冒泡,即停止事件在父元素中的传播。



2、.prevent

阻止事件的默认行为,如提交表单或点击链接后的页面跳转。



3、.once

只触发一次事件处理方法,之后解绑事件



三、event对象

1、默认传入获取event



2、携带其他参数获取event



四、在函数内使用this获取当前Vue上下文

可以直接使用this.xx 使用data里定义的状态,或者使用this.xx()调用methods里面定义的其他函数

注意:this指向问题




你可能感兴趣的:(vue,vue.js,javascript,前端)