vue的v-on作用和事件对象以及修饰符使用

最新推荐文章于 2023-07-09 12:43:49 发布
最新推荐文章于 2023-07-09 12:43:49 发布
阅读量306 收藏
点赞数
文章标签： vue.js javascript 前端 ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42576804/article/details/129593111
版权

Vue中的v-on指令用于绑定事件处理程序。它可以用于监听DOM事件，自定义组件事件以及指令事件。v-on的值通常是一个方法名或者一个内联JavaScript语句，当触发事件时，这个方法或语句会被执行。

事件对象是指在事件处理程序中自动传入的参数，包含了关于事件的所有信息，如事件类型、触发元素、鼠标位置等。在Vue中，事件对象会作为第一个参数自动传入事件处理程序中。我们可以在方法中使用$event来访问这个事件对象。

修饰符是一种用于修改事件行为的特殊指令。它们以点号开头，放在事件名之后，用于控制事件如何响应。Vue提供了多种修饰符，例如.stop、.prevent、.capture、.s

Jay星晴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue——v-on指令的常用修饰符
weixin_44649210的博客
11-02 888
stop 作用： 阻止事件冒泡 <body> <div id="father" @click="bubbling('father')" style="background-color: red;"> <button id="son" @click="bubbling('son')">点击</button> </div> <script> let vm = new Vue({
Vue指令之v-on
热门推荐
俊而不逊的博客
12-07 1万+
Vue指令之v-on 目录 Vue指令之v-on 1.v-on怎么使用？ 2.事件名到底写什么呢？ 3.方法名在哪里定义呢？ 4.v-on的简写 5.访问data中的数据,通过this关键字 6.总结 v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。 我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需..
vue指令之v-on
jh1906338271的博客
03-11 2165
1.v-on的基本使用 点击加号即可加加1，点击减号就会减一。 v-on的作用是用来事件监听的，是用来绑定一些事件的。绑定的一些事件就在自己的方法里面定义，定义完之后调用函数就行了 v-on的简写是@。 2.v-on的参数问题 在事件定义时，写方法省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器生成的event事件对象作为参数传入到方法，而且方法定义时，我们需要ev...
11vue学习_v-on 修饰符的使用
chencaw的专栏
01-31 101
1、相关的修饰符如下 <!-- v-on的修饰符 --> <!-- 在某些情况下，拿event进行一些事件处理 --> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></butto
Vue.js 中v-on的事件修饰符【笔记】
单枪匹码
06-09 1359
1、Vue.js中修饰符使用：在指令后缀通过点( . )来调用修饰符。 <a v-on:click.stop="doThis"></a> 举个例子：一个嵌套div，分别添加click事件。 <div id="aa" @click="doaa"> <div id="bb" @click="dobb"></div> </div> 点击以后会相继执行dobb和doaa方法，此时我们可以通过加修饰符的方式来阻止冒泡事件。 <div
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点...为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .prevent .capture .self .once <div @click='doThis' style="widt
vue v-on监听事件详解
12-29
在vue.js中监听事件是通过v-on指令来实现的，先看一下简单的监听事件代码。 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> [removed][removed...
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
10-15
主要介绍了Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
11-20
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on:click 单击事件 <button class=” btn btn-info” v-on:click=”add(1)”> + + </button> <button class=” btn btn-...
Vue中的v-on同时传递event对象和其它参数
ZQ个人博客
04-20 1209
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加 以下两种事件处理函数加括号和不加括号是等价的： <div id="app"> <button @click='submit'>按钮1</button> <button @click='submits()'>按钮2</button> </div> //js methods:{ submit(){ console.log("我被点击了")
Vue事件处理 v-on:xxx 或@xxx & 事件修饰符
最新发布
weixin_55772633的博客
07-09 1927
在Vue中，事件修饰符是一种特殊的指令，用于修改事件的默认行为或者增强事件的功能。Vue提供了许多事件修饰符，例如stop、prevent、capture等。Vue中的事件绑定与原生JavaScript中的事件绑定类似，都是通过添加事件监听器来触发特定的操作。.passive：告诉浏览器该事件的默认行为可以被安全地禁用，以提高性能。.self：只当事件在该元素本身（而不是子元素）触发时触发回调。修饰符来阻止表单提交时的默认行为。指令来绑定一个点击事件，当用户点击按钮时，修饰符可以阻止事件的默认行为。
Vue学习01-v-on事件修饰符
sunms
08-13 169
事件修饰符： .stop：阻止标签的向外冒泡行为 .prevent ：阻止标签的默认行为，如阻止a标签向href跳转 .self ： 只触发标签自身的事件，如div只触发自己的点击事件，不管内部别人的点击事件 .once：让指定的标签事件只触发一次 按键修饰符：与键盘的按键事件绑定在一起 @keyup.enter： @keyup.tab：该标签获得tab建的时候被触发，而不是自身按tab键触发 ...
vue_事件绑定 v-on _事件修饰符
aof26372的博客
02-15 144
事件绑定 v-on 传参的同时，接收事件对象 <button @click="test('111', $evnt)">哈哈</button> 事件修饰符 阻止事件的默认行为 <a href="www.baidu.com" @click.prevent="jumpFunc">百度</a> 停止事件冒泡 <div@clic...
vue获取v-on绑定事件的触发对象
weixin_34247032的博客
04-24 353
<span @click="fn" id="foo">xxx</span> fn(e){ console.log(e);//展开查看e.currentTarget为null e.target有值 console.log(e.currentTarget.id);//foo } 因为等你展开 log 出来的事件对象的时候...
Vue----事件修饰符详解+代码
DDDDDouble的博客
12-13 227
Vue----事件修饰详解
vue学习记录 v-on事件绑定
weixin_33935505的博客
08-18 136
在vue中 可以用v-on 指令绑定一个事件监听器，通过它调用我们Vue实例中定义的方法 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;数组更新&lt;/title&gt; &lt;style&gt;
Vue事件修饰符和随机数
y17757773039的博客
09-24 601
常见事件修饰符.stop .prevent .capture .self .once .keyup.enter和随机数
Vue中v-on指令详解
qq_41359998的博客
08-08 1393
Vue中v-on指令详解 v-on 监听事件 v-on可以简写为@ 程序中的事件包括Vue事件、前端页面本身的一些事件！我们这里的click是vue的时间，可以绑定到Vue中的methods中的方法事件。因此写为v-on:click，不写为之前的on-click demo1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值