Vue2.0开发之——Vue基础用法-事件绑定$event(20)

一 概述

• 事件参数对象
• $event表示事件参数对象event
• 事件修饰符

二 事件参数对象

2.1 说明

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event

2.2 示例

布局代码

+1
1

vue代码(默认参数event，打印此event)

addCount(e){
       console.log(e)
}
1
2
3

打印结果(PointerEvent)

三 $event表示事件参数对象event

3.1 没有事件参数时

布局代码

+1
1

vue代码

addCount(e){
          this.count+=1;
          if(this.count%2==0){ //偶数
            e.target.style.backgroundColor='red'
          }else{
            e.target.style.backgroundColor=''
          }
        }
1
2
3
4
5
6
7
8

3.2 $event表示事件参数对象

布局代码

+1
1

vue代码

addCount(n,e){
          this.count+=n;
          if(this.count%2==0){ //偶数
            e.target.style.backgroundColor='red'
          }else{
            e.target.style.backgroundColor=''
          }
        }
1
2
3
4
5
6
7
8

3.3 效果图

四 事件修饰符

4.1 事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此， vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

4.2 .prevent示例

未使用vue标签

布局代码

跳转到百度首页
1

vue代码(使用了preventDefault)

show(e){
        e.preventDefault()
        console.log('点击了a标签')
}
1
2
3
4

使用vue标签.prevent

布局代码

跳转到百度首页
1

vue代码

show(e){
        console.log('点击了a标签')
}
1
2
3

效果图

4.3 .stop示例(阻止冒泡)

未使用vue标签

布局代码

      按钮

1
2
3

vue代码

btnHandle(e){
        e.stopPropagation()
        console.log('btnHandle')
},
divHandle(){
        console.log('divHandle')
}
1
2
3
4
5
6
7

使用vue标签.stop

布局代码

 

      按钮

1
2
3

vue代码

btnHandle(){
        console.log('btnHandle')
      },
divHandle(){
        console.log('divHandle')
      }
1
2
3
4
5
6

效果图