Vue中事件高级用法（修饰符）

最新推荐文章于 2024-09-09 09:15:38 发布

QQ_1440277049

最新推荐文章于 2024-09-09 09:15:38 发布

阅读量477

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/HelloWord182/article/details/94190471

版权

Vue基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

事件高级用法（修饰符）

修饰符的由来
业务：阻止事件冒泡

这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为,但是我们发现，e.stopPropagation() 我们书写了三次，

总结：这么书写会导致代码重复，浪费性能

   new Vue({
       el: '#app',
       methods: {
           bigHandler ( e ) {
               e.stopPropagation()
               alert( 'big' )
           },
           middleHandler ( e ) {
               e.stopPropagation()
               alert( 'middle' )
           },
           smallHanlder ( e ) {
               e.stopPropagation()
               alert( 'small' )
           }
       }
   })

解决：修饰符
格式： @eventType.修饰符 = “事件处理程序”
修饰符名称：是我们原生方法简写（第一个单词（基本上））

       <div class="big" @click.stop = "bigHandler">
           <div class="middle" @click.stop = "middleHandler">
               <div class="small" @click.stop = "smallHanlder"></div>
           </div>
       </div>

          new Vue({
                el: '#app',
                methods: {
                    bigHandler ( e ) {
                        alert( 'big' )
                    },
                    middleHandler ( e ) {
                        alert( 'middle' )
                    },
                    smallHanlder ( e ) {
                        alert( 'small' )
                    }
                }
            })

事件修饰符
.stop //阻止单击事件冒泡，当点击box2时就不会触发box1的点击事件，若不加则会触发
.prevent // 阻止默认事件( 提交事件不再重载页面)
.capture //添加事件侦听器时使用事件捕获模式，先执行外层盒子事件，再执行里面盒子事件
.once // click 事件只能点击一次，2.1.4版本新增
.self //将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响
按键修饰符
业务： input 按键 enter 时触发
Vue将通过事件对象 e 拿取键盘码的这个过程进行了封装

自定义按键修饰符
指定某一个字符为某一个键盘码

        <input type="text" v-model = "val" @keyup = "inputHandler">
        <hr>
        <input type="text" v-model = "val" @keyup.enter = "fn">
        <input type="text" v-model = "val" @keyup.13 = "fn">
        <hr>
        <input type="text" v-model = "val" @keyup.p = "fn">