十三、事件修饰符与按键修饰符

1、事件修饰符 

       在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

       尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

       为了解决这个问题，Vue为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

       都有哪些修饰符：

       .stop：调用event.stopPropagation()，阻止冒泡事件。

       .prevent：调用event.preventDefault()，阻止默认事件。

       .capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行。

                 如果有多个，从外到内依次执行，然后再按自然顺序执行触发事件。

       .self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。

       .once：事件只能触发一次，比如只能单击按钮一次。

       .passive：执行默认方法。一般用在滚动监听比如：@scoll,@touchmove,@mousemove等事件。因为在滚动监听过程中，

                 移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。

                 我们通过passive将内核线程查询跳过，可以大大提升滚动的流畅度。

       .left：按鼠标左键时触发。

       .right：按鼠标右键时触发。

       .middle：按鼠标中间键时触发。

       注意：passive和prevent冲突，不能同时绑定在一个监听器上。

    2、按键修饰符

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

       .enter：enter键

       .tab：tab键

       .delete：（捕获“删除”和“退格”按键）删除键

       .esc：取消键

       .space：空格键

       .up：上

       .down：下

       .left：左

       .right：右

<template v-if='false'><!--1、事件修饰符的基本用法-->
     <a @click.stop='doThis'></a><!--阻止单击事件继续传播-->
     <form @submit.prevent='onSubmit'></form> <!--提交事件不再重载页面-->
     <a @click.stop.prevent='doThis'></a><!--修饰符可以串联-->
     <form @submit.prevent></form> <!--只有修饰符-->
     <div @click.capture='doThis'></div><!--添加事件监听器时使用事件捕获模式：即内部元素触发的事件先在此处理，然后才交由内部元素进行处理-->
     <div @click.self='doThis'></div><!--只当在 event.target 是当前元素自身时触发处理函数：即事件不是从内部元素触发的-->
     <div @click.prevent.self='doThis'></div><!--会阻止所有单击-->
     <div @click.self.prevent='doThis'></div><!--只会阻止对元素自身的单击-->
</template>

<template v-if='false'><!--先模拟一个冒泡事件效果: 由当前元素，向外开始冒泡-->
    <div @click='goPage()'>
        <button @click='del()'>删除</button><!--如果点击删除按钮，先显示"删除"，再显示'跳转页面'-->
    </div>
</template>

<template v-if='false'><!--阻止冒泡事件效果: 阻止由当前元素引起的冒泡事件-->
    <div @click='goPage()'>
        <button @click.stop='del()'>删除</button><!--如果点击删除按钮，只显示"删除"-->
    </div>
</template>