Vue中的常用的事件修饰符

最新推荐文章于 2024-05-27 18:55:13 发布
最新推荐文章于 2024-05-27 18:55:13 发布
阅读量75 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51771816/article/details/132558449
版权

文章目录

一. 事件修饰符

在vue中了解一些事件修饰符，可以跟高效的辅助我们开发，一下是一些常用的事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件发送
.once 让方法只能执行一次
.capture 事件捕获
.self 只有点击自己才会触发
一些常用的键盘事件
.up 向上
.left 向左
.right 向右
.down 向下
.enter enter键
.13 键盘编码

1.1 .stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>

   .parent {
      width: 300px;
      height: 300px;
      border: 3px solid #000;
   }
   .child {
        width: 200px;
        height: 200px;
        border: 2px solid red;
   }

    </style>
</head>
<body>
    <div id="app">
<!-- 
   常用的事件修饰符 
   .once 使用一次
   .capture 事件捕获
   .self  只有点击自己触发
   .stop 阻止冒泡事件
   .prevent 阻止默认事件发生
   键盘事件
   .up 向上
   .left 向左
   .right 向右
   .down 向下
   .13   键盘事件
 -->
    <div class="parent" @click="parent">
        parent
        <div class="child" @click.stop="child">child</div>
    </div>             


    </div>
</body>
<script>
   new Vue({
     el:"#app",
     data:{

     },
     methods:{
         child(){
             console.log('child');
         },
         parent(){
             console.log('parent');
         }
     }

   })



</script>
</html>

在这里插入图片描述

1.2 .self

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>

   .parent {
      width: 300px;
      height: 300px;
      border: 3px solid #000;
   }
   .child {
        width: 200px;
        height: 200px;
        border: 2px solid red;
   }

    </style>
</head>
<body>
    <div id="app">
<!-- 
   常用的事件修饰符 
   .once 使用一次
   .capture 事件捕获
   .self  只有点击自己触发
   .stop 阻止冒泡事件
   .prevent 阻止默认事件发生
   键盘事件
   .up 向上
   .left 向左
   .right 向右
   .down 向下
   .13   键盘事件
 -->
    <div class="parent" @click.self="parent">
        parent
        <div class="child" @click="child">child</div>
    </div>             


    </div>
</body>
<script>
   new Vue({
     el:"#app",
     data:{

     },
     methods:{
         child(){
             console.log('child');
         },
         parent(){
             console.log('parent');
         }
     }

   })



</script>
</html>

在这里插入图片描述

1.3 .capture

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>

   .parent {
      width: 300px;
      height: 300px;
      border: 3px solid #000;
   }
   .child {
        width: 200px;
        height: 200px;
        border: 2px solid red;
   }

    </style>
</head>
<body>
    <div id="app">
<!-- 
   常用的事件修饰符 
   .once 使用一次
   .capture 事件捕获
   .self  只有点击自己触发
   .stop 阻止冒泡事件
   .prevent 阻止默认事件发生
   键盘事件
   .up 向上
   .left 向左
   .right 向右
   .down 向下
   .13   键盘事件
 -->
    <div class="parent" @click.capture="parent">
        parent
        <div class="child" @click="child">child</div>
    </div>             


    </div>
</body>
<script>
   new Vue({
     el:"#app",
     data:{

     },
     methods:{
         child(){
             console.log('child');
         },
         parent(){
             console.log('parent');
         }
     }

   })



</script>
</html>

在这里插入图片描述

1.4 .prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>

   .parent {
      width: 300px;
      height: 300px;
      border: 3px solid #000;
   }
   .child {
        width: 200px;
        height: 200px;
        border: 2px solid red;
   }

    </style>
</head>
<body>
    <div id="app">
<!-- 
   常用的事件修饰符 
   .once 使用一次
   .capture 事件捕获
   .self  只有点击自己触发
   .stop 阻止冒泡事件
   .prevent 阻止默认事件发生
   键盘事件
   .up 向上
   .left 向左
   .right 向右
   .down 向下
   .13   键盘事件
 -->
        num:{{num}} <br>
        <button @click.once="add">点击增加</button>

    </div>             


    </div>
</body>
<script>
   new Vue({
     el:"#app",
     data:{
         num:1
     },
     methods:{
         child(){
             console.log('child');
         },
         parent(){
             console.log('parent');
         },
         add(){
            this.num++
         }
     }

   })



</script>
</html>

在这里插入图片描述

1.5 prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>

   .parent {
      width: 300px;
      height: 300px;
      border: 3px solid #000;
   }
   .child {
        width: 200px;
        height: 200px;
        border: 2px solid red;
   }

    </style>
</head>
<body>
    <div id="app">
<!-- 
   常用的事件修饰符 
   .once 使用一次
   .capture 事件捕获
   .self  只有点击自己触发
   .stop 阻止冒泡事件
   .prevent 阻止默认事件发生
   键盘事件
   .up 向上
   .left 向左
   .right 向右
   .down 向下
   .13   键盘事件
 -->
      <a href="" @click.prevent="fun">跳转</a>

    </div>             


    </div>
</body>
<script>
   new Vue({
     el:"#app",
     data:{
         num:1
     },
     methods:{
         fun(){
            console.log('1234');
         }
     }

   })



</script>
</html>

在这里插入图片描述
在这里插入图片描述

逸疏iiii
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
【第三篇】Vue中的事件修饰符
波波烤鸭的博客
07-06 12万+
  本文我们来详细介绍下vue中的事件修饰符 Vue事件修饰符 事件修饰符概览 修饰符 说明 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事件只触发一次 事件修饰符具体介绍 .stop   .stop用来防止冒泡，我们先来看...
Vue中常用事件修饰符
io_123io_123的博客
02-17 2217
常用事件修饰符
Vue中的事件修饰符
RayShyy的博客
10-17 1387
给button和其父元素添加了相同的点击事件，vue默认存在事件冒泡，即点击button触发其绑定的方法，然后会向外逐层判断是否有绑定相同的点击事件，如果有则会触发，这里button添加stop这个修饰符就是用来阻止事件冒泡行为的。由于vue默认是冒泡，如果点击button触发了其身上的点击事件(e.target是button)，之后会向外层查找是否有相同的点击事件，这里div添加了self修饰符，触发点击的目标元素并不是div，则不会触发div上的点击事件。
vue中各类事件修饰符
WEBYANGxw的博客
12-19 2365
vue中各类事件修饰符
Vue常见的事件修饰符
见证自己学习,成长的记录
03-08 2294
vue一共给我们准备了6个事件修饰符，前三个比较常用，后三个少见，这里着重讲下前三个1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)个人感觉，了解常见的这些时间修饰符就够用了，不常见的了解即可。用到的时候再搜索相关资料。
vue常用的事件修饰符
web前端开发博客
01-26 5686
vue事件修饰符，有5个很常用的阻止冒泡：.stop、阻止默认事件：.prevent、添加事件侦听器时使用事件捕获模式 ：.capture、只当事件在该元素本身触发时触发回调：.self 、事件只触发一次：.once，5个常用的vue事件修饰符，举一个例子，其他4个你也懂了。 1.阻止冒泡：.stop 看个例子，你就懂了 <!Doctype html> &lt...
Vue中常用修饰符
Root1216的博客
07-18 245
Vue中常用修饰符三大类型简介：事件修饰符、 v-model的修饰符、键盘事件的修饰符
聊聊vue中的修饰符，常用事件修饰符【总结】
m0_60150712的博客
08-02 332
本篇文章会带大家聊一聊vue指令中的修饰符，对比vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
【Vue2】事件修饰符
weixin_44431073的博客
05-19 774
vue中一共有六个事件修饰符 1、prevent 写法示例：@click.prevent="xxx' 说明：阻止默认事件的触发 案例： <a href="https://www.baidu.com/" @click="showInfo"></a> 先执行showInfo方法，然后跳转到百度。如果只是想执行showInfo方法， 而不跳转，那么可以用prevent修饰。 <a href="https://www.baidu.com/" @click.preve...
Vue——常用的修饰符
ZKH129的博客
06-18 1428
Vue常用的修饰符总结
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
Vue.js 事件修饰符的使用教程
10-17
在实际开发中，不可避免的会使用到对于事件的操作，如何处理 DOM 事件流，成为我们必须要掌握的技能。这篇文章主要介绍了Vue.js 事件修饰符的使用教程,需要的朋友可以参考下
Vue事件修饰符native、self示例详解
10-16
主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vite+ts+mock+vue-router+pinia实现vue的路由权限
beekim的博客
05-20 386
vite.config.ts配置。
基于vuestic-ui实战教程 - 页面篇
PleaseBeStrong的博客
05-21 1013
原有的table组件不够美观，想要自己定义的时候就可以用该模板，对于模板的实例如上图我用红色框框框出来的就是几个加入的组件，下面就分别在代码中实现上面的代码中提到了特别多的类型比如UserData 、Pagination 、Sorting 等等，下面就给出这些类型的定义（如下代码定义在api/system/sysUser/types.ts 中）前面两个完全根据后端的实体类对应，而下面三个就是渲染所需要用到的一些类型定义/* sysUser参数类型 *//* sysUser参数类型*/
Vue从入门到实战Day07
ltt159264的博客
05-21 1022
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
VUE3注册指令的方法
weixin_44072254的博客
05-22 503
【代码】VUE3注册指令的方法。
Vue 组件生命周期：探索钩子
最新发布
https://blog.amd794.com
05-27 252
1.1 什么是 Vue 组件生命周期？创建前（beforeCreate）创建后（created）载入前（beforeMount）载入后（mounted）更新前（beforeUpdate）更新后（updated）销毁前（beforeDestroy）销毁后（destroyed）在每个阶段，Vue 框架都提供了特定的钩子函数，开发人员可以在这些函数中编写自定义的代码，从而实现对组件生命周期的控制和管理。1.2 为什么需要了解生命周期？了解组件的运行机制，提高开发效率。
Vue 组件功能的复用
u010373106的博客
05-22 251
Vue中的混入（Mixins）是一种复用组件逻辑的技术，它允许你抽取组件中的可复用功能，并将其作为一个独立的模块与其他组件组合。混入对象可以包含数据、计算属性、方法、生命周期钩子、侦听器等组件选项。当组件使用混入时，混入对象的选项会被“混合”到该组件自身的选项中。注册，会影响所有之后创建的Vue实例。但应谨慎使用，以免污染全局命名空间。：Vue也支持全局混入，通过。
vue中的事件修饰符passive
05-10
在 Vue 中，事件修饰符是指通过在事件后面添加一些特殊的修饰符，来改变事件的行为。其中，`passive` 事件修饰符用于提高移动端网页的滚动性能。 在移动端，由于浏览器需要等待 JavaScript 的响应结果才能进行滚动操作，因此滚动会有一定的延迟，从而导致用户体验感受不佳。而 `passive` 事件修饰符就是为了解决这个问题而产生的。 当一个元素上绑定了滚动事件时，如果使用了 `passive` 修饰符，就表示该事件处理程序不会调用 `preventDefault()` 方法阻止默认行为。这样，浏览器就能知道该事件处理程序不会阻止事件的默认行为，从而在滚动操作时更加流畅。 具体使用方法如下： ``` <!-- 普通用法 --> <div @scroll="handleScroll"></div> <!-- 使用 passive 修饰符 --> <div @scroll.passive="handleScroll"></div> ``` 需要注意的是，`passive` 修饰符会影响到事件的执行顺序，因此不应该与其他修饰符同时使用。此外，`passive` 修饰符只适用于 `touchstart`、`touchmove` 和 `wheel` 这三种事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值