VUE Getting Started Learning Event Handling

1. Function Binding

You can use v-on:click="methodName" or the shortcut @click="methodName" to bind the event handler function

@click="methodName()" is also OK. @click="methodName" is probably a shorthand.

  <div v-on:click="add">{{ count }}</div>
  <div @click="add">{{ count }}</div>

  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
  },

2. With parameters and $event

You can pass parameters and $event directly to the event binding function  

<div @click="set(0, $event)">{{ count }}</div>

  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

3. Binding multiple functions to one event

Multiple functions are separated by commas. Even if there is no parameter in the function, parentheses must be added, otherwise the function will not be executed.

For example, <div @click="set(0, $event), log">{{ count }}</div> will only execute set

<div @click="set(0, $event), log()">{{ count }}</div>

  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    log() {
      console.log("log---");
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

4. Event modifiers

When using modifiers, order is important; the corresponding code will be generated in the same order

<!-- Prevent the click event from propagating further -->
<a @click.stop="doThis"></a>

<!-- Submit event no longer reloads the page -->
<form @submit.prevent="onSubmit"></form>

<!-- Modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>

<!-- modifiers only -->
<form @submit.prevent></form>

<!-- Use event capture mode when adding event listeners -->
<!-- That is, the events triggered by the internal elements are processed here first, and then handed over to the internal elements for processing-->
<div @click.capture="doThis">...</div>

<!-- Trigger the handler only when event.target is the current element itself -->
<!-- That is, the event is not triggered from the internal element-->
<div @click.self="doThat">...</div>

<!-- Click event will only be triggered once and can be used for custom component events-->
<a @click.once="doThis"></a>

<!-- The default behavior of the scroll event (i.e. the scrolling behavior) will be triggered immediately -->
<!-- without waiting for `onScroll` to complete -->
<!-- This includes the case of `event.preventDefault()` -->
<!-- Especially improves performance on mobile devices -->
<div @scroll.passive="onScroll">...</div>

5. Key Modifiers

• .enter
• .tab
• .delete ( captures the "delete" and "backspace" keys)
• .esc
• .space
• .up
• .down
• .left
• .right

<!-- Call `vm.submit()` only if `key` is `Enter` -->
<input @keyup.enter="submit" />

<!-- Call `vm.onPageDown()` only if `key` is PageDown -->
<input @keyup.page-down="onPageDown" />

6. System modifier keys

The modifier key must be pressed when the event is triggered

• .ctrl
• .alt
• .shift
• .meta

<!-- Hold down Alt and press Enter -->
<input @keyup.alt.enter="clear" />

<!-- Press Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact Modifier

<!-- This will fire even if Alt or Shift is pressed together -->
<button @click.ctrl="onClick">A</button>

<!-- Triggered only when Ctrl is pressed-->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- Triggered only when no system modifier is pressed-->
<button @click.exact="onClick">A</button>

Mouse Button Modifiers

  <button @click.left="log('left cllilck')">Left click of the mouse</button>
  <button @click.right="log('right cllilck')">Right click</button>
  <button @click.middle="log('middle cllilck')">middle click</button>

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!