笔记-vue事件修饰符

已于 2023-06-05 16:01:30 修改
阅读量76 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-04-04 15:53:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FaiLou/article/details/129954414
版权

事件修饰符（常用6个）

1，prevent：阻止标签默认行为，如：表单默认提交（阻止表单自动跳转，可能是因为跳转之前    要验证数据，或者不是要跳转）,a标签的点击跳转。

 通过封装js中的event.preventDefault()方法

2，passive：告诉浏览器不阻止该事件的默认行为，就是让浏览器不必等待直接执行，例如滚动    事件的默认行为（滚动）立即执行不必等待onScroll完成？

3，stop：阻止事件冒泡

4，capture：使用事件捕获模式？元素冒泡时先触发带有该修饰符的元素上的处理函数，有多个带有该修饰符的时候，由外而内触发。

5，once：只触发一次

6，self：当event.target(事件源)是当前元素才触发该处理函数

FaiLou102
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue笔记 - 事件的修饰符
weixin_39250980的博客
08-14 200
.stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器事使用事件捕获模式 .self 只当事件在该元素本身触发时触发回调 .once 事件只触发一次 1.使用.stop修饰符阻止冒泡 <div class="inner" style="background-color: aquamarine" @click="divHandler"&a
Vue笔记-2 事件修饰符 按键修饰符
m0_47734729的博客
09-28 193
vue中的事件修饰符 修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制 常用的事件修饰符 .stop .prevent .capture .self .once .passive 1.事件修饰符 stop修饰符 用来阻止事件冒泡 事件冒泡 详情:https://www.jianshu.com/p/3f0ee1f6ec30 prevent 事件修饰符 用来阻止标签的默认行为 self 事件修饰符 用来针对于当前标签的事件触发 ===========> 只触发自己标签
Vue框架学习笔记——事件修饰符
Aer_7z的博客
11-25 923
在前文提到了“事件处理”后，我们可以为标签绑定事件，事件也存在着六种修饰符，称为事件修饰符。 它们分别是：prevent、stop、once、capture、self、passive，这些标签具有不同的功能，可以为事件叠加事件修饰符使用。 前三个常用，后三个了解就好。
vue学习笔记7-事件修饰符
nicooooooooooooo的博客
02-25 318
存在目的简化代码在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节那更好Vue为v-on提供了事件修饰符，常用如下：1).stop——阻止事件冒泡2).prevent——阻止默认事件3).once——事件只会被触发一次4).enter——回车按键触发5).capture——
Vue.js入门笔记（六）--事件修饰符
java阳旭的博客
05-23 544
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。 .stop – 阻止单击事件继续传播 .prevent– 提交事件不再重载页面 .capture – 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 .
vue笔记--事件修饰符
qq_34530330的博客
03-10 384
阻止单击事件冒泡 提交事件不再重载页面 修饰符可以串联 >/a> 只有修饰符 添加事件监听器时使用事件捕捉模式 只当事件在元素本身（而不是子元素）触发时触发回调 vue.js为v-on提供了事件修饰符，通过点（.）便是的指令后缀来调用修饰符。 .stop .prevent .capture .self .once 2.1
Vue学习笔记----事件修饰符
aeipyuan
10-27 128
Vue事件修饰符 stop停止冒泡，不触发父元素 self只支持本身触发，子元素触发无效 once只触发一次 prevent阻止默认事件 capture捕获事件触发机制,由外到内触发 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件修饰符&...
Vue学习笔记 ------ 自定义按键修饰符
weixin_43666333的博客
02-22 217
vue已经给我们提供了一些默认按键修饰符： 我们可以通过 KeyboardEvent.keyCode 的方法来应用： &lt;button @keyup.enter = "end"&gt; 除了用系统定义的修饰符，我们还可以用通过键盘码监听相应的键盘（F2 = 113） &lt;button @keyup.113 = "end"&gt; 如果需要，我们还可以自己定义按键修饰符 java...
vue学习笔记--事件处理（监听事件和修饰符）
aspxgod10的专栏
03-07 867
1.绑定监听--事件基本处理 vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，如果有形参必须传event,此时通过$event指明实参event <body> <div id="root"> <h2>vue学习{{name}}</h2> <button @click="showInfo1">点击提示框（不传
Vue.js学习笔记之修饰符详解
12-09
在本篇学习笔记中，我们将深入探讨Vue.js中两个重要指令——`v-model`和`v-on`的修饰符，这些修饰符可以增强它们的功能，提供更灵活的使用方式。 **一、v-model的修饰符** 1. **.lazy**： `.lazy` 修饰符改变了`v...
前端学习笔记-黑马程序员Vue
01-09
事件修饰符是 Vue.js 的一个重要特点，它允许开发者在事件处理函数中添加修饰符，以便更好地控制事件的行为。 键盘事件 键盘事件是 Vue.js 的一个重要特点，它允许开发者监听键盘事件，以便更好地控制用户的输入...
如何理解Vue的.sync修饰符的使用
12-29
本文介绍了Vue的.sync修饰符的使用，分享给大家，也给自己留个笔记 案例 <div>{{bar}} <my foo.sync=bar></my> <!-- <my foo=bar update:foo=val> bar = val></my> --> [removed] Vue.component('my-...
B站vue笔记.doc
05-21
6. **事件修饰符stop**：阻止事件冒泡，确保事件只在其触发的元素上执行。 **prevent**：阻止事件的默认行为，例如表单提交时，可以防止页面刷新。 7. **key**：在使用`v-for`循环时，添加`key`属性可以提高DOM...
vue + element ui 实现侧边栏导航栏折叠收起
爱敲代码的卡拉米的博客
07-08 418
通过 row 和 col 组件，并通过 col 组件的。属性我们就可以自由地组合布局。
vue详解
m0_46702681的博客
07-08 1157
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
基于若依的文件上传、下载
谁说自己不可以
07-06 1141
基于若依的文件上传、下载、详细步骤。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
最新发布
xiejunlan的博客
07-11 1256
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue的学习之class与style绑定
人生苦短
07-07 283
本节对class与style的绑定内容就学习完毕了！
vue 事件修饰符&按键修饰符
04-02
Vue事件修饰符是用来改变事件的行为的特殊标记。它们以点号(".")开头，紧跟着是修饰符的名称。Vue提供了以下事件修饰符： 1. .stop：阻止事件冒泡； 2. .prevent：阻止默认行为； 3. .capture：使用事件捕获模式； ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值