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

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

简单点击事件案例




    
    Title
    


    

{ {count}}

运行效果

从零开始学VUE之模板语法(事件监听)_第1张图片

传递参数




    
    Title
    


    

{ {count}}

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

从零开始学VUE之模板语法(事件监听)_第2张图片

事件修饰符

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(

image.png)/mac(commond)

键盘Code码

从零开始学VUE之模板语法(事件监听)_第3张图片
从零开始学VUE之模板语法(事件监听)_第4张图片
从零开始学VUE之模板语法(事件监听)_第5张图片 

组合键

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

Do something

作者:彼岸舞

时间:2021\05\31

内容关于:VUE

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

你可能感兴趣的:(vue,js,proxy,epoll,event)