Chapter 4: detailed explanation of event method, event monitoring, method value transfer, event object, multi event handler, event modifier and key modifier in vue3. X

Time:2021-4-9

1、 Vue3. X listening events

Listening events in Vue can usev-on:clickperhaps@click ,@clickbyv-on:clickFor example:

data() {
    return {
      counter: 1
    }
  }

Template template

div id="basic-event">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

2、 Vue3. X defines methods, executes methods, obtains data, and changes data

Business logic:

export default {
    data() {
        return {
            num: 1,
            MSG: "Hello Vue,",
        };
    },
    methods: {
        setMsg() {
            this.msg  ="I am the changed MSG in the method";
        },
        getMsg() {
            alert(this.msg);
        },
    },
};

Template template

<template>
<div>
    <h2>{{ msg }}</h2>

    < button @ Click = "setmsg()" > set MSG < / button >
    <br />
    <br>
    < button @ Click = "getmsg()" > get MSG < / button >

    <br>
    <br>
    <h2>Num:{{num}}</h2>

    <button @click="num += 1">Add 1</button>
</div>
</template>

3、 Vue3. X methods transfer values and call each other

Business logic:

export default {
    data() {
        return {
            MSG: "Hello Vue,",
        };
    },
    methods: {
        setMsg(msg) {
            this.msg = msg;
        },
        run() {
            this.getMsg()
        },
        getMsg() {
            alert(this.msg);
        }
    },
};

Template template

<template>
<div>
    {{msg}}
    <br>
    <br>

    < button @ Click = "setmsg ('This method only transfers values to change MSG ')" > method transfers values < / button >

    <br>
    <br>
    < button @ Click = "run()" > execute run method < / button >
</div>
</template>

4、 Event object

Sometimes we also need to access the original DOM events in the inline statement handler. You can use special$eventVariable to the method

1、 Single parameter

Business logic:

export default {
    data() {
        return {
            MSG: "Hello Vue,",
        };
    },
    methods: {
       eventFn(e){
          console.log(e);

          //E.srclelement DOM node

          e.srcElement.style.background='red';
          console.log (e. srcElement.dataset.aid ); / * gets the value of the custom property*/
        }
    },
};

Template template

< button data aid ='123 '@ Click = "eventfn ($event)" > event object < / button >

2、 Multiple parameters

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
methods: {
  warn(message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

5、 Vue3. X multi event handler

You can use commas in event handlers to separate multiple event handlers, as follows:

Business logic:

methods: {
  one(event) {
    // first handler logic...
  },
  two(event) {
    // second handler logic...
  }
}

Template template

<button @click="one($event), two($event)">
  Submit
</button>

6、 Event modifier

The default behavior of preventing bubbling in Vue can be prevented by event objectevent.preventDefault()orevent.stopPropagation()It can also be implemented by event modifiers.

There are many modifiers in Vue

.stop
.prevent
.capture
.self
.once
.passiv

stopPropagation:

<a @click.stop="doThis"></a>

preventDefault:

<a @click.prevent="doThat"></a>

stopPropagation And preventDefault

<a @click.stop.prevent="doThat"></a>

7、 Key modifier

When listening for keyboard events, we usually need to check for specific keys. Vue allows you tov-onor@Add key modifier when listening for key events:

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

Vue provides aliases for the most commonly used keys:

  • .enter
  • .tab
  • .delete(capture both delete and backspace keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]