[Vue2]指令修饰符（一）

通用修饰符

.prevent

阻止默认事件行为，等价于 event.preventDefault()。

什么是默认事件？

比如a超链接标签，默认事件是点击该元素后跳转到指定的网页链接中，使用该修饰符后，点击后不再直接跳转。

<a @click href="www.baidu.com">阻止默认事件</a>

.stop

阻止事件冒泡，等价于 event.stopPropagation()

什么是事件冒泡？

比如我给一个<div>绑定了点击事件A，然后在这个<div>里面再嵌套了一个<div>，并且绑定上一个点击事件B。因为子<div>嵌套在父<div>里面，因此当一个点击判定为点击了子<div>时，也会判定父<div>被点击，两者的点击事件会同时触发。这就是事件冒泡。

阻止了事件冒泡后，点击子<div>不再会判定为点击了父<div>（或者说阻止了判定向父<div>传递）

<div @click="father">
    <div @click.stop="son">点击不会冒泡</div>
</div>

.self

仅当事件从元素自身触发时生效（忽略子元素冒泡）

<div @click.self="father">
    忽略子元素冒泡<div @click="son">点击会冒泡</div>
</div>

.once

事件只触发一次

<button @click.once>仅生效一次</button>

.passive

优化滚动性能，告诉浏览器无需等待事件处理完成（常用于移动端滚动）

<div @scroll.passive>
    ...
    ...
    ...
</div>

.capture

使用事件捕获模式（从外层向内层触发，可理解为与事件冒泡正好相反）

<div @click.capture>
    <p>捕获模式</p>
    <div @click="son1"></div>
    <div @click="son2"></div>
    <div @click="son3"></div>
</div>

v-model表单修饰符

.lazy

将 input 事件改为 change 事件（输入完成后同步）

vue是动态渲染的，通常v-model绑定的属性会被实时同步为input中的数据。使用.lazy之后，同步会在你的输入结束后（例如点击页面中其他地方）再进行。

<input v-model.lazy="message" type="text">

.number

自动将输入转为数值类型，如果输入的数据不能转换为数值类型（例如"abc"），则保留原数据，不会进行数值类型转换。

<input v-model.number="age" type="number">

.trim

自动去除输入首尾空格

例如输入：" haha haha "，使用该修饰符后，同步后的数据为："haha haha"。（字符串中间的空格不会去除）

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

键盘事件修饰符

键盘事件修饰符中，像.enter这种指定对应键的有很多，像End键和Home键都有对应的.end和.home，具体的请参阅 vue官网文档 和 vue2官网文档。

按键别名

直接指定按键名（如 .enter, .tab, .esc, .space, .delete），当按下指定键时，触发绑定事件。

<input @keyup.enter="submit">

使用场合：

比如百度的输入框，你可以在输入完搜索词之后，点击搜索栏的右边的按键可以提交搜索关键词信息，按下enter回车键也可以提交搜索关键词信息

<div>
    <input v-model="message" @keyup.enter="submit">
    <button @click="submit">
</div>

系统修饰键

组合按键（.ctrl, .alt, .shift, .meta），即需要按住指定键后再点击按钮才会触发事件。

<div @click.ctrl="ctrlClick">需按住 Ctrl 点击</div>

.exact

精确匹配按键组合（避免其他按键同时按下时触发）

<button @click.ctrl.exact="仅Ctrl按下时触发"></button>

鼠标事件修饰符

.left（左键点击）

.right（右键点击）

.middle（中键点击）

<button @click.right="右键点击">使用右键点击</button>