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

最新推荐文章于 2024-05-22 16:40:45 发布
最新推荐文章于 2024-05-22 16:40:45 发布
阅读量945 收藏
点赞数
分类专栏： 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中的修饰符
weixin_69119939的博客
06-08 3419
vue中常用修饰符
Vue.js学习笔记之修饰符详解
12-09
本篇将简单介绍常用的修饰符。 在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。 一、v-model...
vue3 修饰符大全（近万字长文）
枫ゞ的博客
01-07 2005
本文是为了系统性的了解vue3中的修饰符，方便开发时的使用，使用修饰符可以方便地对事件进行控制和处理，提升用户体验。
学习VUE3——事件修饰符、按键修饰符
最新发布
lss_033_lss的博客
05-22 612
为了让方法能更专注于数据逻辑而不用去处理 DOM 事件的细节，Vue 为 v-on 提供了事件修饰符。Tip：使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用会阻止元素及其子元素的所有点击事件的默认行为，而则只会阻止对元素本身的点击事件的默认行为。和修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。请勿同时使用和，因为已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则会被忽略，并且浏览器会抛出警告。
Vue修饰符的总结归纳（Vue2和Vue3通用）
有事儿私信。
10-01 1611
在Vue.js中，修饰符是一种简洁的语法糖，用于修改Vue指令的行为。这些修饰符可以让我们更简洁地处理一些常见场景，比如表单输入的延迟绑定、输入值的格式化等。了解和掌握Vue的修饰符，可以让我们在开发过程中更加高效和灵活。
Vue3：v-model、自定义修饰符
大香蕉的博客
05-03 2759
vue3的v-model原理 vue3自定义修饰符
vue中的.native修饰符
缓慢前行的CV打工人
08-11 3594
native事件修饰符相关技术点
如何理解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教程课件.pdf
12-03
事件处理是Vue中的重要概念，包括绑定监听、事件修饰符和按键修饰符。事件修饰符包括prevent和stop，按键修饰符包括keycode和keyName。 7. 计算属性与监视 计算属性和监视是Vue中的重要概念，计算属性用于显示不...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
Vue中native修饰符
qq_42931285的博客
09-28 405
vue中native修饰符
Vue 3 基础[3] : 事件修饰符 (event modifier)
学习笔记
11-23 1515
如下的表单，点击 Sign Up，浏览器默认提交表单并向服务器发送HTTP请求，页面将重新加载，Vue app 将重启。 <form v-on:submit='submitForm'> <input type='text'></input> <button>Sign Up</button> </form> 为了阻止这种默认行为，有两种方法： 使用 Vanilla JS 的 pr
聊聊Vue中的native修饰符
WangdedoudouV587的博客
07-16 4182
聊聊Vue中的native修饰符
事件修饰符@（stop, prevent, self, once, capture, passive）
Hassanh的博客
04-17 268
这个 .passive 修饰符尤其能够提升移动端的性能。.once：是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行。.stop：是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件。.self：是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号。.capture：是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式。
VUE3 click 点击事件及修饰符
热门推荐
God's asylum的博客
07-18 1万+
VUE3 click点击事件及修饰符
vue的 .native修饰符
weixin_38724114的博客
06-02 134
one-test 是一个组件，组件上使用@click是不生效的。@click加.native修饰符。
Vue组件点击事件不触发的问题，添加事件修饰符native解决
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 7267
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
Vue3 v-on 事件监听 修饰符
海胆的博客
05-09 564
事件修饰符 只能对原生的 DOM 事件起作用的修饰符： .stop 组织事件冒泡传播 .prevent 阻止浏览器默认行为 如：a链接跳转页面，form submit会刷新页面，鼠标右键弹出菜单等 .capture 事件捕获模式 .self 当event.target是当前元素自身时触发 .once 只会触发一次 .passive 对应addEventListener 中的 passive 选项 .passive 会告诉浏览器你不想阻止事件的默认行为 按键修饰符 常用的键别名： .enter .
vue中的.sync修饰符作用
08-23
在Vue中，.sync修饰符的作用是实现子组件改变父组件绑定的prop的值时，该变化也会同步到父组件中。使用.sync修饰符可以方便地进行双向数据绑定。在Vue 1.0版本中，.sync修饰符存在于官方文档中，但在Vue 2.0中被移除了。然而，在实际应用中，发现.sync修饰符仍然有其适用之处，特别是在开发可复用的组件库时。因此，从Vue 2.3.0版本开始，.sync修饰符被重新引入，并作为编译时的语法糖存在。实际上，.sync修饰符会被扩展为一个自动更新父组件属性的v-on监听器。通过在子组件中使用$emit(update:属性名,val)来修改父组件的属性值，从而实现了方便的调用和维护。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [深入理解vue 修饰符sync【 vue sync修饰符示例】](https://blog.csdn.net/weixin_41829196/article/details/80907724)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue中.sync修饰符的作用](https://blog.csdn.net/baidu_36095053/article/details/124510808)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值