Vue的事件处理方法

上一篇&＃xff1a;Vue的条件渲染与列表渲染&＃xff1a;https://segmentfault.com/a/11...
下一篇&＃xff1a;Vue的表单输入绑定&＃xff1a;https://segmentfault.com/a/11...

事件监听

v-on 指令可以用来监听dom事件来执行一些js代码

方法事件处理器

许多事件处理的逻辑都很复杂&＃xff0c;所以直接把 Javascript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

内联处理器方法

除了直接绑定到一个方法&＃xff0c;也可以用内联 Javascript 语句&＃xff1a;

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法&＃xff1a;

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点&＃xff0c;但更好的方式是&＃xff1a;methods 只有纯粹的数据逻辑&＃xff0c;而不是去处理 DOM 事件细节。

为了解决这个问题&＃xff0c; Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

• .stop

• .prenent

• .capture

• .self

• .once

键值修饰符

在监听键盘事件时&＃xff0c;我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。先来看看如何获取键值&＃xff1a;

记住所有的 keyCode 比较困难&＃xff0c;所以 Vue 为最常用的按键提供了别名&＃xff1a;

• .enter

• .tab

• .delete

• .esc

• .space

• .up

• .down

• .left

• .right

修饰健

可以用如下修饰符开启鼠标或键盘事件监听&＃xff0c;使在按键按下时发生响应。

• .ctrl

• .alt

• .shift

• .meta
  比如&＃xff1a;

同时按下ctrl和alt键&＃xff0c;会有一个弹窗

鼠标按钮修饰符

• .left

• .right

• .middle

这些修饰符会限制处理程序监听特定的鼠标按键.

上一篇&＃xff1a;Vue的条件渲染与列表渲染&＃xff1a;https://segmentfault.com/a/11...
下一篇&＃xff1a;Vue的表单输入绑定&＃xff1a;https://segmentfault.com/a/11...