常见的事件修饰符及其作用

在js的事件处理程序中调用event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。但是在vue中我们有更好的处理方式：这使得我们只需要处理数据逻辑即可，不再需要去处理DOM事件的细节

下面列举一些常见的修饰符：

• stop: 等同于js中的event.stopPropagation() , 防止事件冒泡

<!-- 阻止单击事件继续传播(冒泡) -->  
<a v-on:click.stop="doThis"></a>

• prevent：等同于js中的event.preventDefault() 阻止默认行为

<!-- 阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
 
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

• capture：与事件冒泡方向相反，事件捕获由外到内容

<!-- 添加事件监听器时使用事件捕获模式 -->  
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->  
<div v-on:click.capture="doThis">...</div>

• .self：只会触发元素自己的事件，不包含子元素

<!-- 只有event.target是当前操作的元素时才触发事件: -->
<div class="demo1" @click.self="showInfo">
  <button @click="showInfo">点我提示信息</button>
</div>

• once：只会触发一次

<!-- 点击事件将只会触发一次 --> 
<a v-on:click.once="doThis"></a>

按键修饰符

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

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

按键码

使用keyCode 属性

<input @keyup.13="submit">

注意：keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

你还可以通过全局config.keyCodes 对象自定义按键修饰符别名

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

系统键修饰符

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

• .ctrl
• .alt
• .shift
• .meta

例如

<!-- Alt + C -->  
<input v-on:keyup.alt.67="clear">  
  
<!-- Ctrl + Click -->  
<div v-on:click.ctrl="doSomething">Do something</div>