Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别

最新推荐文章于 2024-08-21 18:34:09 发布
最新推荐文章于 2024-08-21 18:34:09 发布
阅读量698 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39368007/article/details/104764634
版权
本文探讨Vue中的事件修饰符，重点讲解了.stop用于阻止事件冒泡，而.self则确保事件仅在元素本身触发时响应。同时提到了.prevent阻止默认事件，.capture在捕获阶段处理事件，以及.once事件只触发一次的概念。
摘要由CSDN通过智能技术生成

事件修饰符：

  • .stop 阻止冒泡

注：不阻止冒泡的话：先冒里面的那个元素，再冒外面的元素

  • .prevent 阻止默认事件

  • .capture 添加事件侦听器时使用事件捕获模式

注：捕获时间：先冒外面的元素，再冒里面的那个元素

  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

  • .once 事件只触发一次

    <
最低0.47元/天 解锁文章
小草dym
关注
Vue · v-on和事件修饰符（.stop .prevent .capture .self .once）
chez-moi
03-12 1550
一、事件修饰符 .stop 阻止冒泡 .prevent 组织默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 二、事件修饰符的使用 （1）.stop 在没使用.stop时，默认是冒泡机制 .stop阻止所有冒泡行为 【代码实现-无.stop】 <!DOCTY...
Vue3官网基础（四）事件处理（v-on、事件修饰符.passive.self.capture）、表单绑定输入 v-model（textarea、checkbox、radio、select、值绑定、修
qq_43456781的博客
09-17 1575
Vue3官网基础（四）事件处理（v-on、事件修饰符.passive.self.capture）、表单绑定输入 v-model（textarea、checkbox、radio、select、值绑定、修饰符 ） 文章目录Vue3官网基础（四）事件处理（v-on、事件修饰符.passive.self.capture）、表单绑定输入 v-model（textarea、checkbox、radio、select、值绑定、修饰符 ）1. 事件处理监听事件事件处理方法内联处理器中的方法多事件处理器事件修饰符按键修饰符按
Vue之v-on之修饰符stop（006）
weixin_31707323的博客
04-10 217
Vue之v-on之修饰符 一、代码（未加STOP） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>v-on</title> </head> <body> <div id="a
事件修饰符 .self 和 .stop 的区别
最爱喝怡宝的博客
11-10 2662
在vue中 .self 和 .stop 的功能有些相同，都可以阻止冒泡，但他们其实也是由区别的 .stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡 .self 是我只让自己不冒泡，其他人我不管 <div id="app"> <!-- .stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡 --> <!-- .self 是我只阻止自己的冒泡事件，其他人我不管 --> ..
vue之事件修饰符详解（ .stop、.prevent、 .capture 、.self、.once、passive）
weixin_43337481的博客
05-24 2037
这个 .passive 修饰符尤其能够提升移动端的性能。.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行。.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件。.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号。.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交。
v-on/@ 事件处理指令修饰符-stop、prevent、once
QWERTY55555的专栏
10-11 347
.once修饰符，点击事件只触发一次{{num}}
Vue学习之旅Part2：Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)
"✧treasure mountain✧"
04-17 1万+
一、v-bind 先来一个常见场景： 在vue里定义了个名为mytitle的属性 <script> var vm=new Vue({ el:"#app", data:{ mytitle:"This is a title!" }, }) </script> 此时 如果 <input...
vue指令v-on和事件修饰符的使用
2401_84437095的博客
04-29 250
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
浅谈Vue.js 中的 v-on 事件指令的使用
10-17
总的来说，Vue.js的`v-on`事件指令提供了强大的事件处理能力，结合事件修饰符和按键修饰符，使得开发者能够更灵活地控制DOM事件，提高代码的可读性和可维护性。这使得Vue.js成为构建交互式Web应用的理想选择。
v-on指令
热门推荐
fushan2012的博客
02-22 1万+
v-on
Vue之v-on修饰符self（009）
weixin_31707323的博客
04-11 250
Vue之v-on修饰符self 加self到最里层div上，完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>v-on(capture)</title> </head> <body&g
v-on修饰符阻止事件冒泡
向左z的博客
02-15 1019
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...
v-on:属性的self修饰符案例
qq_42418169的博客
08-10 395
将self修饰符放在button按钮的外层div上，button的click事件起作用时，外层的inner并没有执行click事件 **注意：**虽然被self修饰符加持，不会被冒泡机制影响，单不代表冒泡机制会被阻止
vue中事件修饰符，stop,prevent,capture,self,once
肖帅的博客
01-10 1173
1,stop修饰符，能够阻止冒泡事件，按照案例说明如下： 按钮在div容器中。 ①，点击框中非按钮的位置，会触发div的事件 ②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件 注意：此时还没加stop事件 ③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下， stop会阻止事件冒泡行为。 代码如下： <templ...
Vue事件处理：v-on 指令
最新发布
pan_junbiao的博客
08-21 787
在 Vue.js 中，事件处理是一个很重要的环节，可以使用v-on 指令对 DOM 事件进行监听。该指令通常在模板中直接使用，在触发事件时执行相应的 JavaScript 代码。在 HTML 元素中使用v-on 指令时，v-on 后面可以是所有的原生事件名称。与事件绑定的方法可以传入原生 DOM 事件对象，将 event 作为参数进行传递。
vue指令之事件修饰符及v-on的使用
weixin_44748596的博客
10-04 409
1,vue中用v-on绑定事件，用click事件举例： v-on:click="outershow" 简写为：@click="outershow" <div id="app"> <div class="outer" @click="outershow"> <div class="inner" @click="innershow"> ...
Vue事件修饰符
weixin_45665589的博客
09-16 235
下面是对于冒泡和捕获事件的图示（图片转载于此处） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件修饰符</title> <script src="h
Vue事件传递问题（stop、self、once）
大道至简
09-26 651
once prevent stop capture self passive
v-on指令及简写形式、用this访问数据、事件修饰符（.prevent、.stop、.capture、.once、.self）、按键修饰符@keyup的使用
qq_57423665的博客
04-18 682
1.v-on事件绑定指令vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。原生DOM对象有onclick. oninput. onkeyup等原生事件,替换为vue的事件绑定形式后， 分别为: v-on:click、v-on:input、 v-on:keyup。在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值