vue事件绑定(事件修饰符)、事件处理中的this

最新推荐文章于 2023-11-25 16:09:51 发布
最新推荐文章于 2023-11-25 16:09:51 发布
阅读量913 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51525398/article/details/120963270
版权
本文详细介绍了Vue中事件绑定的各种修饰符，如.stop、.self、.prevent等，以及它们在事件处理中的作用。同时，讲解了按键和鼠标修饰符的使用，帮助开发者更精确地控制事件行为。此外，还提到了事件处理函数中this的注意事项，强调避免使用箭头函数以防止this丢失。
摘要由CSDN通过智能技术生成

事件绑定(修饰符)

1.事件绑定修饰符
	@click.stop
		停止事件冒泡
	@click.self
		停止向下传递
	@click.prevent
		阻止默认行为
	@click.capture
		捕获模式修饰符
	@click.once
		事件只绑定一次
	@scroll.passive
		提升滚动性能
2.按键绑定修饰符
	@keydown
		按键就可以触发事件
	@keydown.enter
		按下回车键时触发
	@keydown.tab
		按下tab键时触发
	@keydown.delete
		按下删除键时触发
	@keydown.esc
		按下ESC键时触发
	@keydown.up
		按下上键时触发
	@keydown.down
		按下下键时触发
	......有很多
3.鼠标修饰符
	@click.left
		点击鼠标左键触发
	@click.right
		点击鼠标右键触发
	@click.middle
		点击鼠标中键触发
4.精确修饰符
	@click.ctrl.exact
		按ctrl和鼠标键时才会触发

事件处理函数的this：

1、methods选项里的函数里的this都是vue对象本身，即事件处理函数里的this也是vue对象本身
2、vue提供的选项的值如果是函数时，不可用箭头函数  , 会造成this丢失
Ensoleile2021
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue事件机制和事件修饰符
weixin_53027472的博客
09-25 540
Vue事件机制和事件修饰符
vue事件(事件指令、事件对象、事件修饰符)
此鱼非闲鱼也的博客
04-22 1262
vue事件 1、事件指令： 两种写法： (1) v-on:事件名.修饰符="执行的函数名或表达式" (2) @事件名="执行的函数名或表达式" 注意: (1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中 (2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。 在普通js函数中，加小括号是调用此函数 (3) this指向...
vue实现给div绑定keyup的enter事件
11-19
摘要：发现给div绑定keyup.enter事件是没有效果的。那该如何实现呢？下面直接上代码吧 1、在template中代码 2、在created的生命周期中，写一个全局的enter事件 这样按下键盘中的enter事件就是有效的了 补充知识： vue给div绑定keyup的enter事件实现接电话（结合阿里云软电话SDK） 摘要：之前我们的接入的阿里云软电话SDK的功能，现在有个新的需求就是我们自己的弹窗中添加一个按钮可以接听电话，同时可以按键盘的Enter键接电话。（这里的很多废话，是为了记录当时想的逻辑） 实现思路： 1、点击事件接听电话 在create生命周期的时候，监听电话来了
vue @click传参时this问题
weixin_43900888的博客
05-07 6036
vue中，当button的@click函数传递data中数据作为函数参数时，不可使用this.xxx，因为此时this指向button自身，而不是数据。 例如，下列为错误示范： <el-button type="primary" round @click="exchange(this.tableDatae)">兑换</el-button> export default{ data(){ return { tableData:'k' } } } 正确示范： &l
关于vue的@click传递
qq_40088443的博客
03-22 3612
新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了，但是在vue里，this被赋予了特殊的含义，这样做并不可以。所以当碰上需要传递点击的这个元素时，可以用事件传递。在@click后面加上事件event。示例如下： <div @click="test($event)"> </div> 然后Vue部分： methods:{ t...
vue中事件方法参数传this指向null的解决
qq_45454550的博客
08-08 4474
vue中事件方法参数传this指向null的解决 问题描述 以前用JS的时候，一个元素要使用点击事件的话可以直接在元素内使用click指向某个方法 或者获取这个元素绑定点击事件，那么在元素内使用click调用方法时， 可以将当前元素自身通过方法参数传进方法，类似这样 <div id="app" onclick="fun(this)"> </div> 然后在fun方法获取this就是这个元素了 和document.getElementById(‘app’)获取的是一样的 直接传thi
VUE框架的事件绑定与事件回调函数的this对象------VUE框架
春风若有怜花意，可否许我再少年
11-25 1032
VUE框架的事件绑定与事件回调函数的this对象------VUE框架
vue bind绑定this上下文
weixin_30889885的博客
10-22 2656
vue methods中的函数是如何强制绑定到vue实例中的 箭头函数中的this 转载于:https://www.cnblogs.com/knuzy/p/9829269.html
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
10-15
在Vue.js中，处理用户输入和交互通常涉及事件监听和事件修饰符的使用。Vue提供了多种方式来监听和处理DOM事件，允许开发者以一种更加高效和可维护的方式来管理这些事件。接下来将详细介绍Vue中关于双击事件、点击...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
我们可以在模板中使用这些事件修饰符来解决绑定事件的阻止冒泡失效问题。例如： <a v-on:click.stop="doThis"> <form v-on:submit.prevent="onSubmit"></form> <a v-on:click.stop.prevent="doThat"></a> ...
Vue 事件绑定 事件修饰符 条件判断 循环遍历
她还会来吗的博客
02-28 477
Vue第二天 事件绑定 v-on:事件 简写:@事件 <div id="app"> <h2>{{counter}} </h2> <button v-on:click="add">+</button> <button v-on:click="decre">-</button> </div> <script src="./vue.js"&gt
Vue 中addEventListener事件回调函数this的指向
XIAIBIANCHENG的专栏
01-22 4981
在Vue中调用document.addEventListener添加事件回调函数,在回调函数中调用this对象时，通过调试发现，this指向的是之前调用document.addEventListener的Vue对象或者Vue组件示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l
vue中的怎么绑定事件以及this指向哪里
weixin_48047636的博客
05-18 398
<body> <div id="b"> <!-- <button v-on:click='c'>我是vue1</button> --> <button @click="c">我是vue2</button> <button @click="e">我是语法糖</button> </div> <script src="
[vue] @click 不同写法调用对象中函数时影响 this 指向，this.__ob__.dep.sub
(〃'▽'〃)
11-14 468
看例子 https://codepen.io/q962_/full/pobGdJv 这样是可以的，因为 object 通常时直接写在 data 里的，不纯在多个 vm 共用
Vue 事件
qq_36194388的博客
08-03 320
1语法: 1.1 使用v-on指令注册事件 <标签 v-on:事件句柄="表达式或者事件处理函数"></标签> 1.2 简写方式 <标签 @事件句柄="表达式或者事件处理函数"></标签>2. 注意事项:事件处理函数作为事件句柄的值不需要调用. <div id="app"> <h1>结果</h1> {{num}} <h1>...
vue调函数时参数this的写法
Queen-Shir的博客
07-25 1315
js写法：@click="switchChecked(this)" Vue写法：@click="switchChecked($event)"
vue html 传入this,详解vue中this.$emit()的返回值是什么
weixin_42300302的博客
06-25 1128
vue中的三大属性:属性 、事件、插槽，---事件在事件中有普通事件：@click/@input/@change/@xxx...事件；修饰符事件：@input.trim,@click.stop,@submit.prevent...一般用于原生html元素；答：在vue中this.$emit(); 返回值是this;代码示例：在子组件中：Event.vue:接收通过父组件传递过来的props:{na...
【vue脱坑指南】 @click 参数传当前对象
harryperlau的博客
06-02 1337
错误示例： 传 this 不能获取到当前对象。 <img:src.prop="verifycode"@click="flushVerifycode(this)" /> 正确做法： 传 $event 事件。 <img:src.prop="verifycode"@click="flushVerifycode($event)"/> 此时 event.currentTarget 便可以获取到当前点击事件对象。 ...
Vue文件中传递this给其他js文件的函数
科技向善
04-23 1941
请注意，bind方法返回的是一个新函数，因此我们需要使用括号调用它以执行该函数。bind方法是JavaScript中的一个原生方法，它可以用于绑定函数的this值和一些预设参数，并返回一个新的函数。其中，thisArg是要绑定到函数上的this值，可以是任何JavaScript对象；而arg1、arg2等则是预设的参数。bind方法将返回一个新函数，该函数具有绑定的this值和预设的参数，当调用该新函数时，实际执行的是原始函数，并且绑定的this值和预设的参数将被传递给原始函数。
vue事件绑定常用事件
最新发布
07-17
Vue.js 中常用的事件绑定主要有以下几个： 1. **v-on 或 @**: 这是最常见的事件监听器绑定语法，例如 `@click="handleClick"`，表示当元素被点击时，会触发 `handleClick` 函数。 2. **自定义事件**: Vue允许创建和触发自定义事件，比如 `this.$emit('custom-event', data)` 来发送一个事件，并传递数据，`v-on:` 后面可以跟随 `custom-event`。 3. **修饰符**: - `.prevent`: 阻止默认事件行为（如阻止表单提交或链接跳转） - `.stop`: 可取消冒泡（默认事件会在其祖先元素上继续触发，直到到达文档根节点） - `.capture`: 事件处理函数将在捕获阶段被调用，而不是在冒泡阶段 - `.self`: 只作用于当前元素，不包括其子元素 4. **动态绑定**: 使用方括号 `[]` 语法可以在运行时设置事件监听器，如 `v-on:[event] = "handler"`，其中 `event` 是动态字符串变量。 5. **简写语法**: 对于简单的事件处理器，Vue还提供了一种简化的绑定形式，如 `<button v-on:click="doSomething">...</button>` 相当于 `<button @click="doSomething">...</button>`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值