关于Vue事件处理器的含义

.stop: 不会一直传递,自己运行结束就结束了。就是js中的event.stopPropagation()的缩写,它是用来阻止冒泡的;

.prevent: 比如 submit 加了这个,就不会提交了。就是js中event.preventDefault()的缩写,它是用来阻止默认行为的;

.capture: 在传递的父子事件种,加了这个,无论先点哪个,都先执行这个。捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件;

.self: 只有点击自己本身才会执行,点他的子元素也不会被传递。就是防止父元素(设置了该修饰符)的子元素的事件冒泡到父元素上,只有本身触发时才会执行事件处理程序(函数)

.once: 只执行一次。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 提供了一种简单的方式来处理 DOM 事件。你可以在 Vue 实例上使用 v-on 指令来监听 DOM 事件,并在触发事件时调用指定的方法。 例如,如果你想要在点击按钮时触发一个方法,你可以这样写: ```html <button v-on:click="doSomething">Click me</button> ``` 在这个例子中,v-on:click="doSomething" 表示当按钮被点击时,调用 Vue 实例中的 doSomething 方法。 除了 click 事件,你还可以监听其他的 DOM 事件,例如 mouseover、keydown 等等。你可以通过在 v-on 指令后面跟上事件名来监听这些事件。 另外,你还可以使用 @ 符号作为 v-on 的简写,例如: ```html <button @click="doSomething">Click me</button> ``` 这与上面的例子是等价的。 除了监听 DOM 事件外,你还可以在 Vue 实例中定义自定义事件,这些事件可以用来在组件间进行通信。要定义一个自定义事件,你可以使用 Vue 实例上的 $emit 方法。 例如,如果你想在某个组件中触发一个自定义事件,并将一些数据传递给其他组件,你可以这样写: ```javascript this.$emit('my-event', data); ``` 在这个例子中,'my-event' 表示自定义事件的名称,data 表示要传递给其他组件的数据。其他组件可以通过在模板中使用 v-on 指令来监听这个自定义事件,并在事件触发时调用指定的方法。 例如: ```html <my-component v-on:my-event="handleEvent"></my-component> ``` 在这个例子中,当 my-event 自定义事件被触发时,调用 Vue 实例中的 handleEvent 方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值