Event Handling of VUE Getting Started

Directory 1. Function binding 2. With arguments and $event 3. Multiple function binding 1 event 4. Event modifier 5. Key modifier 6. System modifier key. exact modifier mouse button modifier summary

1. Function binding

Event handlers can be bound with v-on: click= "methodName" or the shortcut @ click= "methodName"

@ click= "methodName ()" is ok, @ click= "methodName" guess is abbreviation

  <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 into the function bound to the event

<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. Multiple functions bind one event

Multiple functions are separated directly by commas. Here, even functions without parameters should be parenthesized, otherwise that function will not be executed

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

<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 click events from continuing to propagate-- >
< a @click.stop="doThis" > < /a >

< ! --Submit events no longer overload pages-- >
< form @submit.prevent="onSubmit" > < /form >

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

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

< ! --Use event capture mode when adding event listeners-- >
< ! --that is, events triggered by internal elements are handled here before being handled by internal elements-- >
< div @click.capture="doThis" > ... < /div >

< ! --Triggers the handler only if event. target is the current element itself-- >
< ! --that is, the event is not triggered from an internal element-- >
< div @click.self="doThat" > ... < /div >

< ! --Clicking on an event will only trigger once on a component event that can be used for customization-- >
< a @click.once="doThis" > < /a >

< ! --The default behavior of the scroll event (that is, the scroll behavior) will be triggered immediately-- >
< ! --without waiting for ` onScroll ` to complete-- >
< ! --This includes the case of ` event. preventDefault () '-- >
< ! -especially to improve the performance of the mobile terminal- >
< div @scroll.passive="onScroll" > ... < /div >

5. Key modifiers

.enter .tab .delete ( Capture 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 modifiers

Modifier key must be pressed when event fires

.ctrl .tab 0 .shift .meta

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

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

. exact modifier

< ! --Triggered even if Alt or Shift is pressed with 1-- >
< button @click.ctrl="onClick" > A < /button >

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

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

Mouse button modifier

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

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!