事件修饰符

一  事件修饰符

· prevent : 阻止标签的默认行为

· stop : 停止事件冒泡

（新手不理解事件冒泡的小伙伴可以这样理解，子盒子绑定一个事件，点击子盒子触发事件的同时父盒子也会触发事件，.stop修饰符可以阻止这种传递，让事件冒泡停止在写了stop修饰符的位置）

<div @click="show">

<button @click.stop="show">按钮</button>

<!-- 修饰符可以连续写 -->

<!-- <a href="http://www.baidu.com/" @click.prevent.stop="showInfo">点我提示信息</a> -->

此时点击a标签并不会发生跳转哦。.prevent修饰符阻止了a标签的跳转

</div>

· once ：事件只触发一次

<button @click.once="show">单击按钮</button>

·capture：使用事件捕获

可以这样理解。事件冒泡是由当前操作元素向父元素不断传递，而事件捕获则是相反的过程，从最外层window开始向内捕获

·self：只有event.target 是当前操作的元素时才触发事件

<div  @click.self="show">

<button @click="show">单击按钮</button>

</div>

·passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<ul @wheel.passive="demo" >

<li>1</li><li>2</li><li>3</li><li>4</li>

</ul>

Wheel:鼠标滚轮事件，不加上passive，需要等待事件结束后执行滚动，加上则不受滚轮不受回调影响

二  v-model修饰符 

一般用于用户输入框的特殊需求

lazy：失去焦点再收集数据

<input v-model.lazy="obj">

此时用户在该input框内输入的值不会实时的绑定在obj上 而是在用户输入完毕或将焦点移开时绑定

number：输入字符串转为有效的数字

<input v-model.number="obj">

将用户输入的字符串转为数字类型

trim：输入首尾空格过滤

<input v-model.trim="obj">

自动过滤掉用户在首尾输入的空格字符

三  常用键盘修饰符  

·回车 => enter

·删除 => delete (捕获“删除”和“退格”键)

·退出 => esc

·空格 => space

·换行 => tab (特殊，必须配合keydown去使用)

·上 => up

·下 => down

·左 => left

·右 => right

举例：

<input type="text" value="" placeholder="按下回车显示信息" @keyup.enter = "show"/>

系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。