从零开始学VUE之模板语法(事件监听)

事件监听 v-on指令(缩写"@")

简单点击事件案例

    
    
    


    

      
{
         {count}}

      +
      
      -
    

运行效果

传递参数

    
    
    


    

      
{
         {count}}

      -

      -

      -
    

点击后运行效果,点了按钮

事件修饰符

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	tab键
.delete	删除/退格(backspace)
.esc	esc
.space	空格
.up	上
.down	下
.left	左
.right	右
.ctrl	ctrl
.alt	alt
.shift	shift
.meta	windows( )/mac(commond)

键盘Code码

 

组合键

# 通过keyup(键盘回弹).alt.67(c) 触发clear方法,实现组合键


Do something

作者：彼岸舞

时间：2021\05\31

内容关于：VUE

本文属于作者原创,未经允许,禁止转发