Vue的事件监听指令v-on怎么使用

    点击我   

看到的效果如下：

在Vue的模板中，我们使用了v-on，并且绑定了一个click事件（v-on:click），然后给这个click事件绑定了一个事件clickMe。而这个clickMe在Vue中，我们一般是放在methods: {}中，也就是说clickMe这个函数写在methods中。

看到v-on:click="clickMe"，是不是非常像HTML中的onclock="clickMe"。从外表现象看，他们写法不一样，但是起到的结果是一致的。在Vue中，我们还可以使用@click来替代v-on:click。那么他们起到的作用是一样的。

在Vue中，对于v-on的使用方式，除了上面的示例展示之外，还有下面这些使用方式：

在子组件上监听自定义事件（当子组件触发my-event时将调用事件处理器）：

从上面的简单示例中，可以看出Vue在事件处理的过程中自带了一些修饰符：

• .stop：调用event.stopPropagation()

• .prevent：调用event.preventDefault()

• .capture：添加事件侦听器时使用capture模式

• .self：只当事件是从侦听器绑定的元素本身触发时才触发回调

• .{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调

• .native：监听组件根元素的原生事件

• .once：只触发一次回调

• .left：只当点击鼠标左键时触发，（v2.2.0+ 才具有）

• .right：只当点击鼠标右键时触发，（v2.2.0+ 才具有）

• .middle：只当点击鼠标中键时触发，（v2.2.0+ 才具有）

• .passive：以{passive: true}模式添加侦听器，（v2.3.0+ 才具有）

Vue的官网对事件的处理和组件的自定义的事件都有详细的介绍。如果感兴趣的话，可以查看相应的内容：

• 事件处理器

• 组件自定义事件

v-on示例

我们来做一个简单的效果，就是一个计数器，效果如下：

这个效果很简单，点击+数字往下加，点击-数字往下减。

在Vue中，我们的模板中有三个元素，两个按钮，一个显示数字的容器，第一个按钮做加的计算，第二个按钮做减的计数。简单的结构如下所示：

    +
    {{ count }}
    -