事件处理

上一篇：Vue的条件渲染与列表渲染：

下一篇：Vue的表单输入绑定：

事件监听

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

    
    
     
这个按钮被点击了{
   {msg}}次
    
     
    

方法事件处理器

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

内联处理器方法

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

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

事件修饰符

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

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

• .stop

• .prenent

• .capture

• .self

• .once

    
    
    
    
    
    
    
    
     ...
    
    
    
     ...
    
    

键值修饰符

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

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

• .enter

• .tab

• .delete

• .esc

• .space

• .up

• .down

• .left

• .right

修饰健

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

• .ctrl

• .alt

• .shift

• .meta

  比如：

同时按下ctrl和alt键，会有一个弹窗

鼠标按钮修饰符

• .left

• .right

• .middle

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

To be continue......

上一篇：Vue的条件渲染与列表渲染：

下一篇：Vue的表单输入绑定：