1.常见的键盘事件
keydown:按下键盘，不需要抬起来就会触发
keyup:按下键盘，等键盘抬起来才会触发
2.键盘按下，输出输入框中输入的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
console.log(e.target.value)
}
},
})
</script>
</html>
实现效果：
3.(普通方式)只有按下回车的时候,才会输出输入框中输入的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
//keyCode为13代表回车键
if(e.keyCode !== 13) return
console.log(e.target.value)
}
},
})
</script>
</html>
实现效果：
实现效果：
4.(Vue方式)只有按下回车的时候,才会输出输入框中输入的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
console.log(e.target.value)
}
},
})
</script>
</html>
实现效果：
5.Vue中常用的按键别名
上述@keyup.enter来控制键盘事件的方式就是Vue中的按键别名。
那么Vue中常用的按键别名有以下几种：
回车：enter
删除：delete (捕获"删除"和"退格"键)
退出：esc
空格：space
换行：tab（特殊：必须配合keydown使用）
上：up
下：down
左：left
右：right
6.Vue中未提供别名的按键处理
Vue中未提供别名的按键可以使用按键原始的key值取绑定，首先注意
如果按键是多个单词的，则单词和单词之间需要用-相隔,且多个单词都要转小写。
按键key获取方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
console.log(e.key,e.keyCode);
//console.log(e.target.value)
}
},
})
</script>
</html>
以CapsLock来举例，它是两个单词组成的，所以键盘事件需要这样写：
@keyup.caps-lock
7.Vue中用法特殊的系统修饰键：ctrl,alt,shift,meta（window徽标键，4个方块的那个）
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发。
(2).配合keydown使用：正常触发事件。
8.使用keyCode指定具体的按键（不推荐）
刚刚我们使用了键名指定，键的别名，其实我们还可以使用键的编码指定
比如enter键的编码是13，那我们就可以使用13去指定按键事件：
————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
console.log(e.key,e.keyCode);
//console.log(e.target.value)
}
},
})
</script>
</html>
执行效果：
