The event processing

Event processing mainly uses V-ON instructions

V – on command

Used for event binding of elements

<div id="app">
  <! -- Content = data -->
  <p>{{content}}</p>
  <button v-on:click="Content = new content">button</button>
  <! -- Short form -->
  <button @click="Content =' new content 2'">Button 2</button>
  <! If there is too much event code, you can set the function in Methods and set it to event handler.
  <button @click="fn">Button 3</button>
  <! $event = 'event'; $event = 'event';
  <button @click="fn2(100, $event)">Button 4</button>
</div>
<! -- CDN introduction of the latest stable version
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
  const vm = new Vue({
    el: '#app'.data: {
      content: 'Default content',},methods: {
      fn (event) {
        // After setting the event handler, you can also get the event object from the parameters
        console.log(event)
        this.content = 'New Content 3'
      },
      fn2 (value, event) {
        this.content = 'New Content 4'
        console.log(event)
        console.log(value)
      }
    }
  })
</script>
Copy the code

Form input binding

Form input binding mainly uses v-model directives

V – model instruction

Set bidirectional data binding for ,

Input box binding

<div id="app">
  <p>The input is: {{content}}</p>
  <! -- Input box binding -->
  <input type="text" v-model="content">
  <textarea v-model="content"></textarea>
</div>
Copy the code

Radio button binding

  <! -- Radio button binding -->
  <p>{{value}}</p>
  <input type="radio" id="one" value="1" v-model="value">
  <label for="one">Option 1</label>
  <input type="radio" id="two" value="2" v-model="value">
  <label for="two">Option 2</label>
Copy the code

Multi-box binding

  <! -- Single check box binding -->
  <p>Values for a single check box: {{cbValue}}</p>
  <input 
    type="checkbox" 
    value="Option content" 
    id="cb" 
    v-model="cbValue">
  <label for="cb">Option content</label>
  <! -- multiple checkbox bindings, cbValues are array type variables in the data option -->
  <p>Values for multiple checkboxes: {{cbValues}}</p>
  <input 
    type="checkbox"
    id="cb1"
    value="Option 1"
    v-model="cbValues"
    >
  <label for="cb1">Option 1</label>
  <input 
    type="checkbox"
    id="cb2"
    value="Option 2"
    v-model="cbValues"
    >
  <label for="cb2">Option 2</label>
  <input 
    type="checkbox"
    id="cb3"
    value="Option 3"
    v-model="cbValues"
    >
  <label for="cb3">Option 3</label>
Copy the code

Selection box binding

  <! -- Radio selection box -->
  <p>Contents of the radio selection box: {{sValue}}</p>
  <select v-model="sValue">
    <option value="">Please select a</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  
  <! -- Select select box, sValues is array variable, users feel less than check box -->
  <p>{{sValues}}</p>
  <select v-model="sValues" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
Copy the code

The modifier

Modifiers are instruction suffixes starting with dots that are used to set special actions for the current instruction.

It is mainly divided into the following categories:

  • Event modifier
  • Key modifier
  • System modifier
  • Mouse modifier
  • V – model modifier

Event modifier

Event decorators:.prevent decorator,.stop decorator,.once decorator

. Prevent modifier

PreventDefault event behavior, equivalent to event.preventdefault ().

<! -- fn is a function of methods. If you click fn, it will not default to jump.
<a @click.prevent="fn" href="https://cn.vuejs.org/">Vue official website link</a>
Copy the code

Stop the modifier

Used to prevent event propagation (bubbling), equivalent to event.stopPropagation().

<div @click="fn1">
  <! -- Prevented the click event from being passed up to div so that when a clicks it doesn't trigger fn1 -->
  <a @click.prevent.stop="fn2" href="https://cn.vuejs.org/">Vue official website link</a>
</div>
Copy the code

. Once the modifier

The setup event only fires once.

<button @click.once="fn">button</button>
Copy the code

Key modifier

Use the keycode as a modifier to identify the key.

<! Press any key to execute fn function -->
<input type="text" @keyup="fn">

<! -- Number key code, 49 represents number 1 key, not number 4 and 9 key -->
<input type="text" @keyup.49="fn">

<! -- Letter key code, A for A key -->
<input type="text" @keyup.a="fn">

<! -- Function key keycode, preferred built-in alias for compatibility, ESC stands for ESC key -->
<input type="text" @keyup.esc="fn">

<! -- Multi-key trigger, representing a single A, B, C key can trigger -->
<input type="text" @keyup.a.b.c="fn">
Copy the code

System modifier

System modifiers refer to the four commonly used system key modifiers: the. CTRL modifier, the. Alt modifier, the. Shift modifier, and the. Meta modifier. The feature is that they need to be used in combination with other buttons, individual buttons will not trigger.

<! -- Multi-key trigger, representing a single CTRL, Q key can trigger -->
<input type="text" @keyup.17.q="fn">

<! -- Key combination, which means CTRL and lowercase Q are pressed at the same time -->
<input type="text" @keyup.ctrl.q="fn">
Copy the code

.exactThe modifier

Allows you to control events triggered by the exact combination of system modifiers. This is a modifier added to vue2.5.0

<! Click event trigger even if Alt or Shift is pressed together -->
<button @click.ctrl="onClick">A</button>

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

<! Trigger the click event when no system modifier is pressed -->
<button @click.exact="onClick">A</button>
Copy the code

Mouse button modifier

Used to set which mouse button triggers the click event.

<! -- Left mouse button -->
<button @click.left="fn">Button 1</button>
<! - short - >
<button @click="fn">Button 1</button>

<! -- right mouse button -->
<button @click.right="fn">Button 2</button>

<! -- Middle mouse button -->
<button @click.middle="fn">Button 3</button>
Copy the code

V – model modifier

There are three main modifiers: the.trim modifier, the.lazy modifier, and the.number modifier.

<! --.trim modifier is used to automatically filter Spaces at the beginning and end of user input -->
<input type="text" v-model.trim="inputValue">
<p>{{ inputValue }}</p>
    
<! The --. Lazy modifier is used to change the v-model trigger from input to change -->
<input type="text" v-model.lazy="inputValue">
<p>{{ inputValue }}</p>

<! The --. Number modifier is used to automatically convert a user's input value to a numeric type or to a string if it cannot be converted -->
<input type="text" v-model.number="inputValue">
<p>{{ inputValue }}
Copy the code