Let's talk about Vue's event monitoring instruction v-on

In front-end development, we need to interact with users frequently. At this time, we must monitor user events, such as clicks, drags, keyboard events, etc. How to monitor events in Vue? Use the v-on directive. The following article will take you through Vue's event monitoring command v-on. I hope it will be helpful to you!

v-on command introduction

• Function: Binding Defined event listener

• Abbreviation: @

• Expected: Function (method) | Inline Statement (internal expression) | Object (object)

• Parameters: event

Bind event listeners in Vue. The event type is specified by parameters; the expression can be the name of a method or an inline statement, which can be omitted if there are no modifiers. (Learning video sharing: vue video tutorial)

Starting from v2.4.0, v-on also supports binding an event/listener key-value pair without parameters Object. Note that when using object syntax, no modifiers are supported.

When used on ordinary elements, it can only listen to native DOM events. When used on a custom element component, you can also listen to custom events triggered by child components.

When listening to native DOM events, the method takes the event as the only parameter. If using an inline statement, the statement can access an $event attribute: v-on:click="handle('ok', $event)".

Let’s look at a simple example first

<!-- Template -->
<div id="app">
    <h1 id="点击我">点击我</h1>   
</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,
    methods: {
        clickMe: function() {
            alert("点击我，我就出来了!(^_^)")
        }
    },
    data: {
    }
})

The effect you see is as follows:

In the Vue template, we use v-on, and bind a click event (v-on:click), and then bind this click event An event clickMe was triggered. And this clickMe in Vue, we usually put it in methods: {}, that is to say, the clickMe function is written in methodsmiddle.

See v-on:click="clickMe", is it very similar to onclock="clickMe" in HTML? Judging from the appearance, their writing methods are different, but the results are the same. In Vue, we can also use @click instead of v-on:click. Then they play the same role.

In Vue, in addition to the above examples, there are also the following usage methods for v-on:

<!-- 方法处理器 -->
<button v-on:click="clickMe"></button>

<!-- 对象语法 （v2.4.0版本以上才支持） -->
<button v-on="{ mousedown: doThis, mouseup: doThat}"></button>

<!-- 内联语句 -->
<button v-on:click="doThat(&#39;Hello&#39;, $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为， 没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符， 键别名 -->
<input @keyup.13="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

on subcomponents Listen to custom events (the event handler will be called when the subcomponent triggers my-event):

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

From the above simple example, you can see that Vue is in the process of event processing It comes with some modifiers:

• .stop: Call event.stopPropagation()

• . prevent: Call event.preventDefault()

• .capture: Use capture mode when adding event listeners

• .self: The callback is only triggered when the event is triggered from the element itself to which the listener is bound

• .{keyCode | keyAlias }: Trigger the callback only when the event is triggered from a specific key

• .native: Listen to the native event of the component root element

• .once: Only triggers the callback once

• .left: Only triggers when the left mouse button is clicked. (Only available in v2.2.0)

• .right: Triggered only when the right mouse button is clicked, (Only available on v2.2.0)

• .middle: Only triggered when the middle mouse button is clicked, (only available in v2.2.0)

• .passive : Add a listener in {passive: true} mode, (only available in v2.3.0)

Vue’s official website handles events and customizes components events are described in detail. If you are interested, you can view the corresponding content:

• Event handler

• Component customization Event

v-on example

Let’s make a simple effect, which is a counter. The effect is as follows:

This effect is very simple. Click to increase the number, and click - to decrease the number.

In Vue, our template has three elements, two buttons, and a container that displays numbers. The first button does addition calculations, and the second button does subtraction counting. The simple structure is as follows:

<div id="app">
    <button v-on:click="increase">+</button>
    <span>{{ count }}</span>
    <button v-on:click="reduce">-</button>
</div>

两个按钮上都绑定了一个click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{{ count }}。每次点击按钮这个{{ count }}都会做相应的变化。

模板有了之后，需要添加对应的功能。

let app = new Vue({
    el: '#app',
    methods: {
        increase: function() {
            this.count++
        },
        reduce: function() {
            this.count--
        }
    },
    data: {
        count: 0
    }
})

在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。

演示demo地址：https://codepen.io/airen/pen/PJbKNg

对于这么简单的效果，我们也可以直接在v-on中处理完：

<button v-on:click="count += 1">+</button>

比如我们前面的示例，修改下：

  <button v-on:click="count += 1">+</button>
  {{ count }}
  -


// JavaScript
let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

效果一样：

演示demo地址：https://codepen.io/airen/pen/veyeLY

（学习视频分享：web前端开发、编程基础视频）

The above is the detailed content of Let's talk about Vue's event monitoring instruction v-on. For more information, please follow other related articles on the PHP Chinese website!