v-on instruction and its parameter passing and modifier


1. Foundation

Official document link https://cn.vuejs.org/v2/api/#v-on

  • Function: binding event listening.
    The event type is specified by the parameter. The expression can be the name of a method or an inline statement, and can be omitted if there is no modifier.

  • Expected: Function | Inline Statement | Object

  • Syntax:

<div id="app">
<!--eventA()It's a self-defined method-->
    <button v-on:click="eventA()">A1</button>
  • Grammar sugar (abbreviation):
<div id="app">
<!--It's no different from the one above-->
    <button @click="eventA()">A1</button>
  • Parameters:
    – event object (representing the state of the event, such as the state of mouse and keyboard), default parameter.
    – custom parameters

  • Usage:
    When used on ordinary elements, you can only listen for native DOM events. When used on custom element components, you can also listen for custom events triggered by sub components.
    When listening for native DOM events, the method takes the event as the only parameter. If you use an inline statement, the statement can access a $event property: v-on:click = "handle('ok ', $event)".
    Starting from 2.4.0, v-on also supports objects that bind an event / listener key value pair without parameters. Note that when using object syntax, no modifiers are supported.

2. Parameter transfer


<div id="app">
<!--    sw-->
    <button v-on:click="eventA">A1</button>
    <button v-on:click="eventA()">A2</button>
    <button v-on:click="eventB()">B1</button>
    <button v-on:click="eventB">B2</button>
    <button v-on:click="eventB('okk')">B3</button>
    <button v-on:click="eventC('okkC')">C</button>
    <button v-on:click="eventD('okkD')">D</button>
    <button v-on:click="eventD('okkD',$event)">D2</button>


    const app=new Vue({
        el:'#app ', / / used to manage the data to be mounted
        data:{     //Define data
            message:'Hello world!',
            eventA:function () {
            eventB:function (abc) {
            eventC:function (abc,event) {
                console.log("-C-"+abc+' '+event);
            eventD:function (abc,$event) {
                console.log("-D-"+abc+' '+$event);
eventA:function ()      
eventB:function (abc) 
eventC:function (abc,event) 
eventD:function (abc,$event)

As above, button A corresponds to the eventA() method, and so on.

  • Click the button once to get the result as shown in the figure above.
  • When a parameter is required but not passed in, the default parameter event object appears.
  • When you need to pass in an event object, you need to use "$event", otherwise vue will think it is just a common parameter, named event.

3. Modifier

  • . stop - call event Stoppropagation(), that is, to prevent event bubbling.
  • . prevent - call event Preventdefault(), that is, the page will not be reloaded when submitting.
  • . capture - use the capture mode when adding an event listener, that is, when an element bubbles, the event of the element binding with this modifier is triggered first.
  • . self - the callback is triggered only when the event is triggered from the element bound by the listener itself, that is, the corresponding operation is performed only when the event is triggered from the element itself (not the child element).
  • . {keyCode | keyAlias} - the callback is triggered only when the event is triggered from a specific key.
  • . native - listens for native events of the component root element.
  • . once - only one callback is triggered.
  • . left - (2.2.0) triggered only when the left mouse button is clicked.
  • . right - (2.2.0) triggered only when the right mouse button is clicked.
  • . middle - (2.2.0) triggered only when the middle mouse button is clicked.
  • . passive - (2.3.0) add listener in {passive: true} mode
<div id="app">
<!--    sw-->
    <button v-on:click.stop="eventA()">A1</button>

For other people's blogs, the modifier is detailed here:

Tags: Javascript Vue

Posted by yellowepi on Fri, 13 May 2022 07:48:51 +0300