vue event handling

click incident

V-on can be abbreviated as @, such as v-on:click = "count += 1" can be abbreviated as @click.
We can bind javaScript code directly to the click event of DOM through v-on. v-on:click means to listen for the click event of DOM, which is equivalent to nclick="... ".
But it's important to note that if we use native onclick, we can't get the count parameter we defined in Vue.

 
    <div>
        <button v-on:click="count1">count click Event</button>
    </div>

    <div>
        <button v-on:click="count2(1)">count click Event Involvement 1</button>
    </div>

    <div>
        <button @click="count3($event)">count click Event default parameter $event Obtain html text</button>
    </div>

    <div>
        <button v-on:click="count4(2,$event)">count click Event Involvement and Acquisition html text</button>
    </div>
    <br>

We can use the method name (parameter (). ) The way to pass in parameters directly, if we need the native event object,
Then we need to pass in $event. For example: onSumClick(1, 2, $event)

Event modifier

.stop
.prevent
.capture
.self
 once (2.1.4 added)
passive (2.3.0 added)

1. Prevent click events from continuing to propagate, where events will not continue to propagate to div

    <div @click="count1">
        div----------------------------------

        <button @click="onSumClickInDiv(1, 2)">button  Will pop up div click Event</button>

        <button @click.stop="onSumClickInDiv(1, 2)">button  Will not pop up div click Event</button>
    </div>

2. Prevent the default behavior of events, where a tag will not jump again

    <a href="http://www.baidu.com/" @click="onSumClick(1, 2)"> Click to jump http://www.baidu.com/</a>
    <a href="http://www.baidu.com/" @click.prevent="onSumClick(1, 2)">Click does not jump http://www.baidu.com/</a>

3. Indicates that an event can only be triggered once
<button @click.once="onSumClickInDiv(1, 2)">onSumClick

4. Key modifier
Press enter key

    <input @keyup.enter="enter" />

    <input @keyup.space="space" />

js

  var app = new Vue({
        el: '#app',
        data: {
            count1 (){
                alert('count-click');
            },
            count2 (value){
                alert(value);
            },
            count3 (event){
                alert(event.target.innerHTML);
            },
            count4 (value,event){
                alert(value +  " ----- " +event.target.innerHTML);
            },
            inputMsg: '',
            onSumClickInDiv(value1, value2){
                alert(value1 + value2)
              },
            enter(event){
                alert(event.keyCode==13)
            },

            space(event){
                alert(event.keyCode==32)
            }
        },

    });