“This is the 17th day of my participation in the Gwen Challenge.

Vue instruction V-ON: can be used with an event, followed by an event handler, such as :click event: V-ON :click=”clickFunction” mouse movement event: V-on :mousemove=”getPosition” If the function has no argument, you can leave the parentheses out and it will still be parsed as a function. If the argument is passed, you need to put the parentheses

V-on: event = event handler (parameter, $event)Copy the code

Two parameters Optional If no parameter is passed, the event parameter is passed by default. You do not need to manually pass the event parameter

The abbreviation of V-on: @, v-on:click can be shortened to @click

Event modifiers:.stop Cancel default events:.prevent Match carriage trigger:.Enter Alt + Carriage trigger:.alt.Enter match space trigger:.space etc. Event modifiers can be used in series, such as.stop. Prevent, function overlay

Small demo: involved: 1. Vue argument parameter pass and use/data field get and use 2. Prevent the use of bubbling: does not trigger the parent mouse movement event, no longer get mouse coordinate 3. Cancel the default event: click the A TAB to not jump

<div id="app">
    <button v-on:click="clickCount(10,$event)">Click here to</button>
    <p>{{count}}</p>
    <p v-on:mousemove="getPosition">Output mouse position: {{x}}/{{y}}<span v-on:mousemove.stop>No mouse position output</span>
    </p>
    <a v-on:click.prevent href="https://www.baidu.com">The baidu</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app".data: {count:0.x:0.y:0
        },
        methods: {clickCount:function(step, e){
                this.count += step;
                console.log(e);
            },
            getPosition:function(e){
                this.x = e.clientX;
                this.y = e.clientY;
                
            },
            // stop:function(e){
            // e.stopPropagation()
            // }}})</script>
Copy the code

Effect: 1. Click button, the number of the first P label is incremented by 10 steps, and output event E 2. Within the #app range, the coordinates of the mouse movement are displayed in the second P tag, except for the SPAN area 3. Click the A TAB, do not jump

Small demo2: involved: 1. Simple click event binding 2. The display content of the P label changes with the input box 3. The contents of the text box change the contents of the p tag only after the press enter is used.

<div id="app">
    <button v-on:click="btnClick">Click on the</button>
    <p>{{value}}</p>
    <p><input type="text" v-on:input="inputMethod" ref="input1">{{value1}}</p>
    <p><input type="text" v-on:keyUp.enter="inputMethod" ref="input2">{{value2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app".data: {value:"".value1:"".value2:""
        },
        methods: {btnClick: function(){
                this.value = 'Click the button to display'
            },
            inputMethod: function(e){
                this.value1 = this.$refs.input1.value;
                this.value2 = this.$refs.input2.value; }}})</script>
Copy the code

Effect: 1. Click the button to output text 2. Input content in the first text box. Enter the content in the second text box, and change \ to the right of the text box only when you press enter

$event $event $event $event $event $event $event