v-on basic usage

Bind event listeners. Event type is specified by the parameters. Expression can be the name of a method or an inline statement, if no modifier can be omitted.

When used on ordinary elements, it can only monitor the native DOM events . When used in the assembly of custom elements, you can also listen custom events triggered by the subassembly.

Example:

<! - The processor -> 
< Button V-ON: the Click = "the doThis" > </ Button > 

<! - dynamic events (2.6.0+) -> 
< Button V-ON: [Event] = "doThis" > </ the Button > 

<-! acronym -> 
< the Button @click = "doThis" > </ the Button > 

<-! dynamic events abbreviation (2.6.0+) -> 
< the Button @ [ Event] = "the doThis" > </ Button >

 

v-on pass value

Case 1: The method of methods have parameters by value

<button @click="msg('lhs')">传值</button>

methods:{
    msg(event){
        console.log(event);//输出的lhs
    }
}

Note: @ = the Click "MSG ( 'LHS')" with an apostrophe must pass by value, to pass without data parameters within

Case 2: The method parameters are methods, but no traditional values

< Button @click = "MSG" > traditional values </ Button > 

Methods: { 
    MSG (Event) { 
        the console.log (Event); // Event outputted 
    } 
}

It is returned (event status Event object representing events, such as event occurs in which the position of an element of a state, the state of the keyboard, mouse, mouse button )

Case three: Methods methods have parameters, but also by value event

<button @click="msg('lhs',$event)">传值</button>

methods:{
    msg(name,event){
        console.log(naem);//lhs
        console.log(event);//event
    }
}

 

v-on event modifiers

(1) stop: stop bubbling

<div @click="upthis">
    aaa
    <!-- 阻止事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
</div>

(2) prevent: prevent the default behavior

< Form Action = 'baidu' > 
    <-! Submit incidents will not reload the page (do not jump page) -> 
    < the INPUT @ click.prevent = "dothat" > 
</ form >

（3）capture

<! - use when adding an event listener event capture mode -> 
<-! That event triggered the first internal element in this process, before it handed over to the internal processing elements -> 
< div v-ON: the Click. Capture = "the doThis" > ... </ div >

(4) once: only trigger once

<! - click event will only trigger once to prevent duplicate submission -> 
< A v-ON: click.once = "doThis" > </ A >

(5) monitor a keyboard key caps

<! - key modifier key alias -> 
< INPUT @ keyup.enter = "the onEnter" > 

<! - key modifier, key code -> 
< INPUT @ keyup.13 = "the onEnter" >

(6) can be connected in series modifier

<! - modifier in series -> 
< A V-ON: click.stop.prevent = "dothat" > </ A >