Vue3学习笔记（9.2）

Vue3事件处理

我们可以使用v-on指令来监听DOM事件，从而执行JavaScript代码。

v-on指令可以缩写为@符号。

    
    
    
    
    


    

        增加1
        
这个按钮被你点了{{counter}}下
    

    

 通常情况下，我们需要使用一个方法来调用JavaScript方法。

v-on可以接收一个定义的方法来调用。

    
    
    
    
    


    

        click me
        
    

    

 

 除了直接绑定一个方法，也可以用内联JavaScript语句：
 

    
    
    
    
    


    

        Say hi
        Say ji
        
    

    

 

 事件处理程序中可以有多个方法，这些方法由逗号运算符分割：

    
    
    
    
    


    

        
        Say ji
        
    

    

 

 事件修饰符

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

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

.stop--阻止冒泡

.prevent--阻止默认事件

.capture--阻止捕获

.self--只监听触发该元素的事件

.once--只触发一次

.left--左键事件

.right--右键事件

.middle--中间滚轮事件

...

...

按键修饰符

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

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

全部的按键别名：

enter,tab,delete（捕获删除和退格键），esc,space,up,down,left,right

系统修饰键：

ctrl,alt,shift,meta

鼠标按钮修饰符：

left,right,middle

Do something

.exact修饰符

.exact修饰符允许你控制由精确的系统修饰符组合触发的事件。

A


A


A