I have learned Vue.js in the past two days. I feel that there are a lot of knowledge points in the component, and it is very important. Therefore, I will add a little note today and learn about Vue keyboard events and
keyboard events.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
<script src=
"../js/Vue.js"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
window.onload =
function
() {
var
vm =
new
Vue({
el:
'#box'
,
data: {},
methods: {
show:
function
(ev) {
alert(ev.keyCode)
}
}
});
}
</script>
</head>
<body>
<div id=
"box"
>
<input type=
"text"
@keydown=
"show($event)"
>
</div>
</body>
</html>
|
keyCode
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
<script src=
"../js/Vue.js"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
window.onload =
function
() {
var
vm =
new
Vue({
el:
'#box'
,
data: {},
methods: {
show:
function
(ev) {
if
(ev.keyCode==13){
alert(
'你按了回车键！'
)
}
}
}
});
}
</script>
</head>
<body>
<div id=
"box"
>
<input type=
"text"
@keyup=
"show($event)"
>
</div>
</body>
</html>
|
keyUp
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
<script src=
"../js/Vue.js"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
window.onload =
function
() {
var
vm =
new
Vue({
el:
'#box'
,
data: {},
methods: {
show:
function
(ev) {
alert(ev.keyCode)
}
}
});
}
</script>
</head>
<body>
<div id=
"box"
>
<input type=
"text"
@keyup=
"show($event)"
>
</div>
</body>
</html>
|
Keyboard Events - Shorthand
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
<script src=
"../js/Vue.js"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
window.onload =
function
() {
var
vm =
new
Vue({
el:
'#box'
,
data: {},
methods: {
show:
function
() {
alert(
'你按了回车！'
);
},
show2:
function
() {
alert(
'你按了回车！'
);
},
show3:
function
() {
alert(
'你按了上键！'
);
},
show4:
function
() {
alert(
'你按了下键！'
);
},
show5:
function
() {
alert(
'你按了左键！'
);
},
show6:
function
() {
alert(
'你按了右键！'
);
}
}
});
}
</script>
</head>
<body>
<div id=
"box"
>
<input type=
"text"
@keyup.13=
"show()"
>
<hr>
<input type=
"text"
@keyup.enter=
"show2()"
>
<hr>
<input type=
"text"
@keyup.up=
"show3()"
>
<hr>
<input type=
"text"
@keyup.down=
"show4()"
>
<hr>
<input type=
"text"
@keyup.left=
"show5()"
>
<hr>
<input type=
"text"
@keyup.right=
"show6()"
>
<hr>
</div>
</body>
</html>
|