0x7 精读Vue官方文档 – 事件处理-一一网

精读 Vue 官方文档系列 ?

监听事件

事件绑定

Vue 的事件是通过内联的方式在模板中进行绑定。
Vue 为绑定事件提供了专门的 v-on 指令，简写形式为 @ 指令的参数便是事件的名称。

<button @click="do">click</button>
复制代码

表达式

事件句柄通常是一个函数或方法，但 Vue 也支持一段 JavaScript 表达式。

<button @click="count++">click</button>
复制代码

事件方法

为事件句柄赋值一个方法或函数，这个方法或函数默认的第一个参数就是事件对象(event)。

<button @click="say">click</button>
复制代码

export default {
    methods:{
        say(event){
            event.preventDefault()
        }
    }
}
复制代码

内联处理器中的方法

在事件绑定的内联语句中直接执行事件处理方法，相比为事件句柄赋值事件处理方法，此种方式可以实现更灵活的传参。

注意：此时 事件对象 参数只能使用特殊变量 $event 从模板中注入到要执行的事件处理方法中。

<button @click="say('message', $event)"></button>
复制代码

事件修饰符

“事件修饰符” 可以增强事件绑定的功能与行为。

事件修饰符(modify)	作用
`stop`	阻止冒泡。
`prevent`	阻止默认行为。
`capture`	事件捕获，最外层的DOM可以更快的响应事件。
`once`	事件只绑定一次。
`self`	只有事件的 `event.target` 为元素自身才会触发事件。
`passive`	预先声明事件句柄函数不会执行 `event.preventDefault()` 方法，从而提高性能。

示例:

<!--修饰符串联-->
<button @submit.stop.prevent="submit">submit</button>
<!--只有修饰符-->
<button @submit.prevent>submit</button>
<!--只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的，类似于事件委托概念-->
<button @click.self="say">click</button>
复制代码

Passive

passive 是 addEventListener 的配置项。

由于浏览器在执行一些具有默认行为的事件时，需要延迟一段时间来检测我们是否会调用 preventDefault 函数，但是 80% 的事件句柄方法都是不会调用 preventDefault 来阻止默认行为，所以预先指定 passive 参数可以很好的提高性能，提升页面的流畅度，这对于滚动、滑动事件以及移动端的提升更为明显。

修饰符可以串联组合使用，例如 .once.capture。
passive 修饰符与 prevent 修饰符目标是互斥的，所以两者不能同时使用。

按键修饰符

用于增强键盘事件的绑定。

按键码

<button @keydown.13="submit"></button>
复制代码

普通按键码别名

普通按键修饰符

enter
esc
page-down
delete
tab
space
left/right/up/down

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
复制代码

系统键修饰符

ctrl
shift
alt
meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
复制代码

自定义按键修饰符别名

在 config 的 keyCodes 中映射别名与按键码的对应关系。

Vue.config.keyCodes.f1 = 112;
复制代码

鼠标按钮修饰符

right
left
middle

<input v-on:mousedown.middle="clear">
复制代码

精确匹配修饰符

.exact 修饰符可以控制事件与修饰符的组合只有被精确匹配时才会被触发。

其功能与 Vue Router 中的 exact 属性相同。

<input
  type="button"
  @click.exact="handleChange"
  @click.shift.exact="muliSelect"
  value="1"
/>
<!-- 即使 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>
复制代码