<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>欢迎来带{{name}}学习</div>
<input
type="text"
placeholder="按下回车提示输入"
@keyup.enter="showinfo1"
/><br />
<input
type="text"
placeholder="按下大小写切换提示"
@keyup.caps-lock="showinfo1"
/><br />
<input
type="text"
placeholder="按下换行符号tab提示输入"
@keydown.tab="showinfo1"
/><br />
<input
type="text"
placeholder="按下换行符号ctrl提示输入"
@keydown.ctrl="showinfo1"
/><br />
<input
type="text"
placeholder="按下换行符号shift提示输入"
@keydown.shift="showinfo1"
/><br />
<input
type="text"
placeholder="按下换行符号alt提示输入"
@keydown.alt="showinfo1"
/><br />
<!--
1. vue 中常见的按键别名
回车=>enter
删除=>delete (捕获删除和推格键)
退出=>esc
空格=>space
换行=>tab 特殊必须配合 keydown 使用
上=>up
下=>down
左=>left
右=>right
回车=>
2.vue 中未提供别名的按键，可以使用按键原始的key值去绑定，但是要注意要转换为kebab-case短横线命名
3.系统修饰符（用法特殊）ctrl alt shift meta
1)配合keyup使用：按下修饰符的同时，在按下其他键，随后释放其他键，事件才触发
2)配合keydown使用 正常触发事件
3)@keydown.shift.y 可以连写
4.也可以使用keyCode 去指定具体的按键 不推荐
5.Vue.configure.keyCodes 自定义键名=键码 可以去指定键盘别名
-->
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
name: "尚硅谷",
},
methods: {
showinfo1(event) {
console.log(event.key, event.keyCode);
//if(e.keyCode!==13) return;
console.log(event.target.value);
},
},
});
</script>
</html>