05——按键修饰符-智码星河

什么是按键修饰符：按键修饰符就是捕获你按下的是什么键，进而触发什么方法，本质就是封装了原生js中的键盘事件，其实就是捕获某个键的键盘事件，代替了e.keycode。

在原生js中，我们要用按键触发某个事件，就得先判断e.keyCode ==’键码 ’，进而才能去触发方法：（注意键盘事件只能绑定给window或者表单元素）

<body>
    
        <input type="text" value="按下回车键">
    
</body>

<script type="text/javascript">
    var ipt = document.querySelector('input')
    ipt.onkeyup = function (e) {
        if (e.keyCode == 13) { alert('按下了回车键') }
    }
</script>

那么在vue中，它大大简化了这个操作，只需要在给input绑定事件的时候点上按键的码即可，例如我想要按下回车键（13）触发，那么就是@keyup.13 = ‘方法名’

但直接写数字官方不推荐，官方推荐把数字改成特定的字母，例如13是回车键，那么它推荐我们写@keyup.enter = ‘方法名’，而这个 enter就是按键修饰符，效果就是当回车键弹起就触发fn方法。

<input type="text" @keyup.enter="fn">

官方内置的事件修饰符：

.enter ------ 按下回车键触发
.tab ---------- tab键
.delete (捕获“删除”和“退格”键) -------- 删除键
.esc --------esc键
.space ----- 空格键
.up -------上键
.down -------- 下键
.left ------左键
.right ------右键

例如想要按下空格键触发：

@keydown.space = ‘ 方法名 ’

小总结:

@keydown/keyup/keypress.修饰符名字 = ‘方法名’

如果没有官方的内置的，那么就使用 Vue.config.keyCodes.自定义的名字 = 键码; 来自定义一个按键修饰符

如果不想自定义，可以直接写键码数字：

@keyup.65 = ‘方法名’

本站代码模板仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！