七、方法与事件

当ViewModel 销毁时，所有的事件处理器都会自动删除，无须自己清理。

Vue 提供了一个特殊变量$event ，用于访问原生DOM 事件

<a href=” h!tp:llwww.apple.com”@ click="handleClick （＇禁止打开’，$event ）” >打开链接＜/a>

在＠绑定的事件后加

小圆点“．”，再跟一个后缀来使用修饰符。Vue 支持以下修饰符：

• .stop

• .prevent

• .capture

• .self

• .once

具体用法如下：

＜ ！一阻止单击事件冒泡一〉

<a @click.stop=”handle "></a>

〈！一提交事件不再重载页面一〉

<form @submit.prevent="handle” ></ form>

〈！一修饰符可以串联一〉

<a @click.stop.prevent=” handle ” ></a>

〈！一只有修饰符一〉

<form @submit . prevent></form>

〈！一添加事件侦听器时使用事件捕获模式一〉

<div @click . capture=”handle ”> ... </div>

〈！一只当事件在该元素本身（而不是子元素） 触发时触发回调一〉

<div @click.self=” handle ”> ... </div>

＜ ！一只触发一次，组件同样适用一〉

<div @click.once=” handle ”> ... </div>

在表单元素上监昕键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

＜ ！一只有在keyCode 是13 时调用vm . submit （）一〉

<input @keyup.13 ＝“ submit ”〉

除了具体的某个keyCode 外， Vue 还提供了一些快捷名称，以下是全部的别名：

• .enter

• .tab

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

• .esc

• .space

• .up

• .down

• .left

• .right

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

• .ctrl

• .alt

• .shift

• .meta (Mac 下是Command 键， Windows 下是窗口键）