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

事件高级用法 （ 修饰符 ）

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

  这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为,但是我们发现，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>
           div>
       div>

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

1. 事件修饰符
   .stop //阻止单击事件冒泡，当点击box2时就不会触发box1的点击事件，若不加则会触发
   .prevent // 阻止默认事件( 提交事件不再重载页面)
   .capture //添加事件侦听器时使用事件捕获模式，先执行外层盒子事件，再执行里面盒子事件
   .once // click 事件只能点击一次，2.1.4版本新增
   .self //将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

2. 按键修饰符
   业务： input 按键 enter 时触发
   Vue将通过事件对象 e 拿取键盘码的这个过程进行了封装

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

        
        <hr>
        
        
        <hr>
        

3. 特殊修饰符
   .native:组件上绑定原生事件（主要是组件上绑定）