在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
按键码
使用 keyCode attribute 是允许的：
<input v-on:keyup.13="submit">1.通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right有一些按键 ( .esc 以及所有的方向键 ) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
2.使用自定义的按键修饰符：
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `key` 是 `f2` 时调用 `vm.add()` -->
<input type="text" v-model="name" @keyup.f2="add">你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<!-- 在下述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。 -->
<input v-on:keyup.page-down="onPageDown">keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
系统修饰键
2.1.0新增，可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。
.exact 修饰符
2.5.0新增.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>鼠标按钮修饰符
2.2.0 新增，这些修饰符会限制处理函数仅响应特定的鼠标按钮。
.left
.right
.middle完整案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
输入内容：<input type="text" v-model="msg" @keyup.f2="f1">
<input type="button" :value="str2" @click="f1">
<p v-show="str">{{msg}}</p>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
// 自定义按键修饰符
Vue.config.keyCodes.f2 = 113;
new Vue({
el : "#app",
data : {
msg : "",
str : false,
str2 : "显示输入的内容",
},
methods : {
f1(){
this.str = !this.str;
if(this.str){
this.str2 = "隐藏输入的内容";
}else{
this.str2 = "显示输入的内容";
}
}
}
});
</script>
</body>
</html>为什么在 HTML 中监听事件？
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
- 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
必须 注册 为本站用户， 登录 后才可以发表评论！