按键修饰符:

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

在使用@keyup等键盘触发的事件时，vue给予了一些内置的按键修饰符:

.enter	.esc
.tab	.space
.delete	.up
.left	.down
.right

系统修饰符:

其中在2.1中新增了,可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl	.alt
.shift	.meta

注意：新增的修饰符只作用于keydown上,在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例子：

<div id="app">弹起回车触发：<input type="text" @keyup.enter="down"><br/>按下alt+ctrl触发：<input type="text" @keydown.alt.ctrl="down"><br/>弹起f2触发：<input type="text" @keyup.113="down"><br/>弹起f4触发：<input type="text" @keyup.f4="down"><br/>
</div>
<script>// 全局定义未被定义的键盘码Vue.config.keyCodes.f4=115;var vm=new Vue({el:'#app',methods:{down:function () {console.log(1);}}})
</script>

.exact修饰符：

.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>

鼠标修饰符:

.left	.right
.middle

注意:这些修饰符会限制处理函数仅响应特定的鼠标按钮。

例子

<div style="background: red;width: 240px;height: 240px" @click.left="log('left')">Do something
</div>

按键修饰符、系统修饰符、鼠标修饰符相关推荐

事件处理-注册时间 // 事件处理-修饰符 // 事件处理-键盘事件的修饰符 // 事件处理-系统修饰符 // 事件处理-鼠标修饰符
事件处理-注册事件 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
java语言修饰符$_Java语言中的修饰符
类.方法.成员变量和局部变量可用修饰符修饰符类成员方法构造方法成员变量局部变量 Abstract √ √ Static √ √ Public √ √ √ √ Protected √ √ √ ...
java 修饰符访问控制符_Java访问修饰符（访问控制符）
Java 通过修饰符来控制类.属性和方法的访问权限和其他功能,通常放在语句的最前端.例如: public classclassName { // body of class } private boo ...
java中访问修饰符_Java中的访问修饰符介绍
java中访问修饰符什么是访问修饰符? (What are Access Modifiers?) Have you ever wanted to define how people would ac ...
java中类定义修饰符_Java 中类和方法修饰符
Java 中类和方法修饰符类的修饰访问修饰符修饰符 class 类名 extends 父类名称 implements 接口名称(notes: 访问修饰符符与修饰符的位置可以互换) 访问修饰符名 ...
python修饰符的理解_python函数修饰符@的使用方法解析
这篇文章主要介绍了python函数修饰符@的使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 python函数修饰符@的作用是为现有函数增 ...
[转载] Java的访问修饰符、非访问修饰符分类详细总结以及修饰符用途总结
参考链接: Java中的可访问和非访问修饰符 Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 Java中,可以使用访问控制符来保护对类.变量.方法和构造方法的访问.Java 支持 4 种 ...
java函数修饰符_Java 函数面向对象，修饰符，类，构造方法，this
1.函数函数就是定义在类中,具有特定功能的一段小程序. 在面向对象编程的语言中,函数也叫方法. 2.函数的格式修饰符返回值类型函数名(参数类型实际参数,....) { 执行语句; retur ...
Python修饰符（一）—— 函数修饰符 “@”
今天被问到Python函数修饰符,顺手写写. Python函数修饰符,"@",与其说是修饰函数倒不如说是引用.调用它修饰的函数. 举个栗子,下面的一段代码,里面两个函数,没有被调用 ...

按键修饰符、系统修饰符、鼠标修饰符