vue事件对象与修饰符

事件对象event

$event是vue提供的特殊变量，用来表示原生的事件参数event。$event可以解决事件参数对象event被覆盖问题

"en">

    "UTF-8">
    
    



"app">
    
count的值：{{ count }}
    "addCount(2,$event)">+2

事件修饰符

 常用的事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

• .stop - 阻止冒泡
• .prevent - 阻止默认事件
• .capture - 阻止捕获
• .self - 只监听触发该元素的事件
• .once - 只触发一次
• .left - 左键事件
• .right - 右键事件
• .middle - 中间滚轮事件

"doThis">

"onSubmit">

"doThat">



"doThis">...

"doThat">...


"doThis">

 案例

"en">

    "UTF-8">
    
    
    



"app">

    
.prevent事件修饰符场景
    "https://www.baidu.com" @click="onLinkClick">百度首页

    
.prevent事件修饰符场景
    "https://www.baidu.com" @click.prevent="onLinkClick">百度首页
    


    
.stop事件修饰符场景
    
class="outer" @click="onOuterClick">
    外层div
    
class="inner" @click.stop="onInnerClick">内部的div
    
    


    
.capture事件修饰符场景
    
class="outer" @click.capture="onOuterClick">
        外层div
        
class="inner" @click="onInnerClick">内部的div
    
    


    
.once事件修饰符场景
    
class="inner" @click.once="onInnerClick">内部的div
    


    
.self事件修饰符场景
    
class="box" @click="onBoxClick">
    
class="outer" @click.self="onOuterClick">
        外层div
        
class="inner" @click="onInnerClick">内部的div
    
    
    

    

 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

"submit">

"submit">

全部的按键别名：

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta

案例：

html>
lang="en">

    charset="UTF-8">
    
    


id="app">
    type="text" @keyup.enter="submit" @keyup.esc="clearInput">