网站建设实训的报告,企业app制作开发公司,做网站要在vs安装什么,网站模板怎么套用Vue按键修饰符详细介绍 1. 按键修饰符2. 实现原理3. 使用方法4. 常用的按键修饰符5. 自定义按键修饰符6. 系统修饰键7. 事件修饰符的链式使用8. .exact 修饰符 1. 按键修饰符
Vue.js 中的按键修饰符使得键盘事件处理变得十分简单#xff0c;它们通常与 v-on 指令#xff08;… Vue按键修饰符详细介绍 1. 按键修饰符2. 实现原理3. 使用方法4. 常用的按键修饰符5. 自定义按键修饰符6. 系统修饰键7. 事件修饰符的链式使用8. .exact 修饰符 1. 按键修饰符
Vue.js 中的按键修饰符使得键盘事件处理变得十分简单它们通常与 v-on 指令或简写为 一起用来监听键盘事件。
Vue允许为v-on在监听键盘事件时添加按键修饰符。 示例
!-- 只有在 keyCode 是 13 时调用 vm.submit() --
input v-on:keyup.13submit!-- 利用下面的写法有同样的效果 --
input v-on:keyup.entersubmit示例响应enter键事件
input typetext keyup.13doSubmit v-modelnamevar vm new Vue({el: #app,data: function() {return {name: hello vue}},methods: {doSubmit: function() {alert(响应enter this.name);}}
});下面是一些Vue.js中的按键修饰符及其使用方法的详尽介绍
2. 实现原理
按键修饰符背后的思想非常简单在监听键盘事件时你可能只对某些特定的按键感兴趣Vue.js 提供的按键修饰符可以让你直接在模板中指定这些特定的按键从而无需在方法里编写任何额外的逻辑来检查按键代码。
3. 使用方法
按键修饰符直接跟在事件名称后面由点 (.) 分隔。例如如果你想要在用户按下 Enter 键时调用一个方法你可以这样写
input v-on:keyup.enteryourMethod或者使用简写形式
input keyup.enteryourMethod4. 常用的按键修饰符
按键别名含义 .enter回车确认键.tabTAB键 .delete捕获 “删除” 和 “退格” 键 .esc键盘左上角的Esc键取消键.space空格键.up上 .down下.left左.right右
除了这些常用按键之外你还可以使用任何有效的按键名称来作为按键修饰符。
5. 自定义按键修饰符
Vue 允许你向 config.keyCodes 对象添加自定义按键修饰符别名
// 允许 v-on:keyup.f1
Vue.config.keyCodes.f1 112;这样你就可以使用自定义的按键修饰符别名在模板中绑定事件了。
6. 系统修饰键
Vue.js 还允许使用以下几个用于检测常用系统按键的修饰符
按键别名含义.ctrlctrl键.altalt键.shiftshift键.meta在 Mac 键盘上是 Command 键在 Windows 键盘上是 Windows 键
这些事件修饰符还可以与普通的按键修饰符结合使用。例如
!-- Alt C --
input keyup.alt.67clear!-- Ctrl Click --
button click.ctrldoSomethingDo something/button7. 事件修饰符的链式使用
你可以链式地使用多个事件修饰符
!-- Ctrl Shift Enter --
input keyup.ctrl.shift.enteronEnter8. .exact 修饰符
.exact 修饰符允许你控制其他系统修饰键确切的组合。它可以确保只有当全部正确的修饰键被按下时才会触发事件处理函数
!-- 这将只会在没有任何其他键如 Shift, Alt 或 Control被按下的情况下响应 Ctrl --
button click.ctrl.exactonControlClickA/button!-- 这将只会在没有按下任何修饰键的情况下触发 --
button click.exactonClickB/button通过使用Vue的按键修饰符你可以极大地减少处理键盘事件时的 js 代码量并使你的方法更加专注于它们实际上需要做的事情而不是处理不相关的按键。
