vue 监听事件–v-on

基础用法

v-on 的用法大体分为俩种分别是: v-on:clickv-on:keyup(键弹起) v-on:keydown(键按下) 分别用来监听鼠标和键盘事件

最后关于监听种类更具体的事件需要用到事件修饰符, 它是紧跟在v-on:click/keyup后面用点好隔开的特定参数

实例: 打字练习

这个实例综合有点强,用到了 v-bind v-on v-model 这三个指令 , 此外还使用了watch参数监听属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打字练习</title>
<script src="vue.min.js"></script>
<style>
.spellRight{
color: darkgreen;
}
.spellWrong{
color: orangered;
}
</style>
</head>
<body>
<div id="app">

<button v-if="!begin" v-on:click="beginGame">点击开始游戏</button>
<div v-else>
<p>{{tipText}}</p>
<input type="text" @keyup.enter="spellCheck" v-model="message" v-bind:class="spellCheckFlag?'spellRight':'spellWrong'">
回车提交
<p style="color: orangered">{{wrongTip}}</p>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
begin: false, // 游戏开始标识
spellCheckFlag:true, // 单词正确css和错误css切换标识
message:"", // 用户输入框输入文本
tipText: "", // 提示文字
wrongTip:"", // 错误提示信息
words:["data", "methods","watch","el"], // 单词列表
num:0 // 单词列表计数
},
methods:{
// 监听开始游戏事件
beginGame:function (){
this.begin=true;
this.tipText= this.words[this.num];
},
// 监听按键回车点击 并 游戏输入检查
spellCheck:function (){
if(this.message===this.words[this.num]){
//输入正确 判断游戏是否结束
if (this.num+1<this.words.length) {
//没有结束切换下一个词
this.num += 1;
this.tipText=this.words[this.num];
this.message="";
this.wrongTip="";
}else {
// 结束,弹出提示,重新开始
//初始化
this.begin=false;
this.spellCheckFlag=true;
this.message="";
this.tipText= "";
this.wrongTip="";
this.num=0
alert("游戏结束!");
}
}else {
// 提示输入错误
this.wrongTip="错误";
}
},
},
watch:{
// 监听字符输入 进行拼写检查 切换css
message:function (val){
if(val===this.words[this.num]){
this.spellCheckFlag=true;
}else {
this.spellCheckFlag=false;
}
}
}
})
</script>
</body>
</html>

绑定多个事件

在上个简单示例中我们只绑定了一个事件,事实上v-on允许我们绑定多个事件, 请使用方法v-on={事件1,事件2}

缩写

相比与v-bind 可以缩写为: v-on则是可以缩写为@例如@click@keyup

事件修饰符

注意 : v-on允许我们使用多个事件修饰符

基本的事件修饰符

名称 介绍
.stop 阻止冒泡。本质是调用 event.stopPropagation()。
.prevent 阻止默认事件(默认行为)。本质是调用 event.preventDefault()。
.capture 添加事件监听器时,使用捕获的方式(也就是说,事件采用捕获的方式,而不是采用冒泡的方式)。
.self 只有当事件在该元素本身(比如不是子元素)触发时,才会触发回调。
.once 事件只触发一次。
.{keyCode|keyAlias} 只当事件是从侦听器绑定的元素本身触发时,才触发回调。
.native 监听组件根元素的原生事件。

其中 .capture 作用是 令事件采用捕获的方式,而不是采用冒泡的方式. 其中冒泡和捕获的区别为:

1. 冒泡是从里往外冒,捕获是从外往里捕。

2. 当捕获存在时,先从外到里的捕获,剩下的从里到外的冒泡输出。

按键修饰符

按键修饰符用来检测具体的按键常常配合 @keyup使用

vue中定义了常见的键码分别为

名称 别名
回车 enter
删除 delete (捕获“删除”和“退格”键)
退出 esc
空格 space
换行 tab (特殊,必须配合keydown去使用)
up
down
left
right

Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)其语法格式为自定义键名 = 键码 具体键码数值请参照附录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
head>
<meta charset="UTF-8">
<title>添加自定义键码</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input placeholder="按下回车弹出提示信息" @keyup.huiche="alertInfo">
</div>

<script>
var vm =new Vue({
el:"#app",
methods:{
/**
一个速记函数
展开形式为:
    alertInfo:fuction(){}
**/
alertInfo(){
alert("我们自定义了一个`huiche`按键修饰符")
}
}
});
Vue.config.keyCodes.huiche = 13;
</script>

</body>
</html>

当你需要定义多个按键修饰符时请传入对象

1
2
3
4
Vue.config.keyCodes = {
f2: 113,
huiche: 13
};

系统修饰键(用法特殊):ctrl、alt、shift、meta

  • 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
  • 配合keydown使用:正常触发事件。

其使用方法类似@keyup.ctrl.y 意思是输入(ctrl+y)事件

附录 – 键码表

字母和数字键的键码值(keyCode)

按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

数字键盘上的各键键码值(keyCode) 功能键键码值(keyCode)

按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F9 120
1 97 9 105 F2 113 F10 121
2 98 * 106 F3 114 F11 122
3 99 + 107 F4 115 F12 123
4 100 Enter 108 F5 116
5 101 - 109 F6 117
6 102 . 110 F7 118
7 103 / 111 F8 119
控制键键码值(keyCode)
按键键码按键键码按键键码按键键码
BackSpace8Esc27Right Arrow39-_189
Tab9Spacebar32Dw Arrow40.>190
Clear12Page Up33Insert45/?191
Enter13Page Down34Delete46`~192
Shift16End35Num Lock144[{ 219
Control17Home36;:186\|220
Alt18Left Arrow37=+187]}221
Cape Lock20Up Arrow38,<188'"222

多媒体键码值(keyCode)

按键 键码 按键 键码
音量加 175 浏览器 172
音量减 174 邮件 180
停止 179 搜索 170
静音 173 收藏 171

参考资料

CSDN-陈小同学 v-on 的修饰符

CSDN-木木木华 Vue事件符.capture的含义用法

CSDN-勇敢*牛牛【Vue】基础系列(七)键盘事件_vue.config.keycodes

CSDN-苦夏木禾 键盘键码keyCode对照表