【vue笔记】3.事件修饰符

最新推荐文章于 2024-07-04 14:48:00 发布
最新推荐文章于 2024-07-04 14:48:00 发布
阅读量961 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AXIMI/article/details/87989971
版权
修饰符功能
.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只有事件在该元素本身触发时触发回调（别人影响不了它，它也影响不了别人）
.once事件只触发一次

.stop

由于vue界面的特殊性，组件一般是一层层叠加起来的，所以触发中心事件时，周边事件也会随之触发，即冒泡。例如，对于下面的vue结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    </style>
</head>
<body>
    <div id="app">
      <div class="inner" @click="div1Handler">
          <input type="button" value="button" @click="btnHandler">
      </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    </script>
</body>
</html>

界面呈现为：
在这里插入图片描述
当我们点击中心的button按钮时，触发的事件为：
在这里插入图片描述
可以看到点击了按钮的同时，背景区域的事件也被触发了。为了避免这种情况，可以使用.stop修饰符。将下面的代码：

<input type="button" value="button" @click="btnHandler">

修改为：

<input type="button" value="button" @click.stop="btnHandler">

再次点击按钮后，显示触发的事件为：
在这里插入图片描述

.prevent

下面这个.prevent可以阻止页面跳转：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    </style>  
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" @click.prevent="linkclick">baidu</a>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                linkclick(){
                    console.log('link event')
                }
                }
            })    
    </script>
</body>
</html>

本来点击链接后会跳转到百度的页面，但是这里使用.prevent修饰符后就不会跳转了。

.capture

还是上面那个.stop部分的代码修改一下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    </style>
</head>
<body>
    <div id="app">
      <div class="inner" @click.capture="div1Handler">
          <input type="button" value="button" @click="btnHandler">
      </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    </script>
</body>
</html>

显示的界面同样为：
在这里插入图片描述
这次点击按钮之后，会触发绿色背景板的事件div1Handler再触发按钮事件btnHandler。

.self

还是同样一段代码，在click之后添加修饰符.self此时点击按钮和背景板时只有自己各自的事件会响应。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    </style>
</head>
<body>
    <div id="app">
      <div class="inner" @click.self="div1Handler">
          <input type="button" value="button" @click.self="btnHandler">
      </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    </script>
</body>
</html>

.once

顾名思义，修饰符对应的事件只会触发一次：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    </style>
</head>
<body>
    <div id="app">
      <div class="inner" @click.self="div1Handler">
          <input type="button" value="button" @click.once="btnHandler">
      </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    </script>
</body>
</html>
AXIMI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【第三篇】Vue中的事件修饰符
波波烤鸭的博客
07-06 12万+
  本文我们来详细介绍下vue中的事件修饰符 Vue事件修饰符 事件修饰符概览 修饰符 说明 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事件只触发一次 事件修饰符具体介绍 .stop   .stop用来防止冒泡，我们先来看...
vue 3个常用事件修饰符?
祈澈菇凉
10-24 1197
Vue 提供了多个事件修饰符，用于在处理 DOM 事件时进行特定的修饰。
vue修饰符的使用
coding...
04-30 486
在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。.enter .tab .delete (捕获“Delete”和“Backspace”两个按键) .esc .space .up .down .left .right。你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。在监听键盘事件时，我们经常需要检查特定的按键。请注意，系统按键修饰符和常规按键不同。
【vue】vue常用修饰符，超易懂图文代码实践详解
最新发布
weixin_42474607的博客
07-04 1073
Vue 允许你配置自定义按键修饰符别名。这可以通过。
Vue3 v-on 事件监听 修饰符
海胆的博客
05-09 596
事件修饰符 只能对原生的 DOM 事件起作用的修饰符： .stop 组织事件冒泡传播 .prevent 阻止浏览器默认行为 如：a链接跳转页面，form submit会刷新页面，鼠标右键弹出菜单等 .capture 事件捕获模式 .self 当event.target是当前元素自身时触发 .once 只会触发一次 .passive 对应addEventListener 中的 passive 选项 .passive 会告诉浏览器你不想阻止事件的默认行为 按键修饰符 常用的键别名： .enter .
vue3 修饰符大全（近万字长文）
枫ゞ的博客
01-07 2521
本文是为了系统性的了解vue3中的修饰符，方便开发时的使用，使用修饰符可以方便地对事件进行控制和处理，提升用户体验。
如何理解Vue的.sync修饰符的使用
12-29
本文介绍了Vue的.sync修饰符的使用，分享给大家，也给自己留个笔记 案例 <div>{{bar}} <my foo.sync=bar> <!-- <my foo=bar update:foo=val> bar = val></my> --> [removed] Vue.component('my-comp',...
Vue.js学习笔记之修饰符详解
12-09
在本篇学习笔记中，我们将深入探讨Vue.js中两个重要指令——`v-model`和`v-on`的修饰符，这些修饰符可以增强它们的功能，提供更灵活的使用方式。 **一、v-model的修饰符** 1. **.lazy**： `.lazy` 修饰符改变了`v...
JS vue中.sync修饰符详解 学习笔记
qq_44999678的博客
10-02 1175
.sync修饰符其实讲起来并不是那么容易的，他是一个多种操作的语法糖。 首先我们来看.sync是来解决什么问题的。根据官方文档的表示，.sync是用来解决prop的双向绑定的问题的。其实这个说法也不是很准确，.sync是一个操作的语法糖，而那个操作实现了prop的双向绑定。我们都知道 如果我们可以直接通过props向子组件去传递数据，供子组件使用，但是我们不能更改prop，此时，这就形成了一个单向的数据流动。有时候我们有这样的需求，我们传给子组件的数据需要被子组件修改，然后父组件更新为最新的数据。我们不能直
Vue小笔记.docx
08-21
同时，Vue还支持事件修饰符，如`.stop`阻止冒泡，`.prevent`阻止默认行为等。 6. **过渡与动画**： Vue提供了内置的过渡效果，可以配合CSS动画库如Animate.css使用，为组件的显示和隐藏添加平滑的过渡效果。 7. *...
Vue 3 基础[3] : 事件修饰符 (event modifier)
学习笔记
11-23 1540
如下的表单，点击 Sign Up，浏览器默认提交表单并向服务器发送HTTP请求，页面将重新加载，Vue app 将重启。 <form v-on:submit='submitForm'> <input type='text'></input> <button>Sign Up</button> </form> 为了阻止这种默认行为，有两种方法： 使用 Vanilla JS 的 pr
vue应用 - 3.修饰符
qq_35432512的博客
11-11 260
表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 表单修饰符 .lazy 我们希望失去焦点的时候再更新视图 <div>{{lazyTxt}}</div> <input type="text" v-model.lazy="lazyTxt" placeholder="lazy"> .trim 去除value两边的空格 <i...
前端VUE3.0,DAY9，事件修饰符
疯子的梦想@的博客
08-04 836
VUE3.0,DAY9事件符举例事件修饰符展示 事件符举例 Vue中的事件修饰符: prevent:阻止默认事件(常用) ; stop:阻止事件冒泡(常用); once: 事件只触发一 次(常用) capture:使用事件的捕获模式; self:只有event. target是当前操作的元素是才触发事件; passive:事件的默认行为立即执行，无需等待事件回调执行完毕; 事件修饰符展示 1.当点击链接名字时，会弹窗一个提示信息，随后默认进行网页跳转。那么增加一个preventdefault则就禁止了该
vue3修饰符大全
weixin_42146519的博客
02-18 1066
vue中常见修饰符使用方法
【vue3】Vue中的事件修饰符及示例
芳草萋萋鹦鹉洲哦
03-30 1118
5、once：事件只触发一次（常用）
vue3 - 事件处理之事件修饰符
m0_50080847的博客
02-15 132
内容取自>> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-...
Vue3：v-model、自定义修饰符
大香蕉的博客
05-03 2790
vue3的v-model原理 vue3自定义修饰符
第36节: Vue3 事件修饰符
特创数字
12-22 439
在UniApp中使用Vue3框架时，你可以使用事件修饰符来更方便地处理用户交互事件。在上面的示例中，我们在元素上使用了@click监听事件，并在事件前添加了prevent修饰符。这个修饰符可以阻止事件的默认行为，例如页面跳转或表单提交等。在handleClick方法中，我们简单地输出了一条消息到控制台。通过使用事件修饰符，你可以更方便地处理用户交互事件，并避免不必要的默认行为。
vue3修饰符用法
weixin_50961467的博客
04-17 2794
这意味着如果一个父元素和子元素都有相同类型的事件监听器，并且点击了子元素，那么只会触发子元素的事件监听器，父元素的事件监听器将被忽略。用于限制事件只能在触发事件的元素本身上触发，而不是在子元素上触发。在上述的代码中，当按钮被点击时，submitForm函数会被调用，同时会阻止表单的默认提交行为。例如，我们有一个父元素和一个子元素，父元素绑定了一个点击事件，子元素是父元素的一个子元素。修饰符可以确保点击子元素时不会触发父元素的点击事件，只有当点击父元素本身时才会触发。在上面的例子中，当按钮被点击时，
Vue.js深入解析：修饰符使用技巧
"Vue.js学习笔记之修饰符详解" 在Vue.js框架中，修饰符是用于扩展指令功能的小型关键字，它们以点"."后跟相应名称的形式附加到指令后面。这篇文章将深入探讨`v-model`和`v-on`指令的一些常见修饰符。 1. **v-model...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值