Use of v-on instructions

v-on directive

I. usage

  1. Bind event listeners. The event type is specified by the parameter. An expression can be the name of a method or an inline statement, or it can be omitted without modifiers.
  2. When used on normal elements, you can only listen to native DOM events. When used on custom element components, you can also listen for custom events triggered by subcomponents.

2, v-on grammar sugar:@

3, v-on parameter

  • When defining methods in methods for @ click to call, you need to pay attention to the parameter issues:
  • If the method doesn't need extra parameters, the () after the method name can be omitted, but note that if the method itself has a parameter, the native event event parameter will be passed in by default
  • If you need to pass in a parameter at the same time and need event at the same time, you can pass in an event through $event
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
  <div id="app">
    <h2>{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="incrementAdd(5,$event)">+5</button>
  </div>
  <script type='text/javascript'>
    const app = new Vue({
      el:'#app',
      data:{
        counter:0
      },
      methods:{
        increment(event){
          console.log(event);
          this.counter++;
        },
        incrementAdd(count , event){
          console.log(event);
          this.counter += count
        }
      }
    })
  </script>
</body>
</html>

4, Common v-on modifiers

  • . stop - call event.stopPropagation(), which can be used to prevent the event from bubbling
  • . prevent - call event.preventDefault() to block the default behavior
  • {keyCode | keyAlias} ---- the callback is triggered only when the event is triggered from a specific key
  • . native ---- listen to the native events of the component root element
  • . once ----- only one callback is triggered
  • . left - (2.2.0) only triggered when the left mouse button is clicked
  • . right - (2.2.0) only triggered when the right mouse button is clicked
  • . middle - (2.2.0) only triggered when the middle mouse button is clicked
  • . passive - (2.3.0) add listener in {passive: true} mode
  • . capture -- use capture mode when adding event listeners
  • . self -- triggers the callback only if the event is triggered from the element itself bound by the listener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
<div id="app">
    <!--1 .stop Modifier -- Prevent events from bubbling -->
    <div @click="divClick"> 
      <button @click.stop="btnClick">Button</button>
    </div>
    <br>
    <!--2 .prevent Modifier -- Block default events -->
    <form action="baidu">
      <input type="text">
      <!-- click submit Auto submit form by default -->
      <input type="submit" value="Immediate submission">
      <!-- If you don't want to make it commit automatically -->
      <input type="submit" value="Will not submit immediately" @click.prevent="submitClick">
    </form>
    <br>
    <!--3 .{keyCode|keyAlias}To monitor the click of a key on a keyboard -->
    <!-- 1)Every time the key in the keyboard pops up, it will print once, and monitor all the keys -->
    <input type="text" @keyup="keyUp">
    <br>
    <!-- 2)Monitor a key individually,For example, monitoring alone enter,When clicking enter Print when -->
    <input type="text" @keyup.enter="enterClick">
    <br>
    <!--4 .once:Trigger callback only once  -->
    <button @click.once="btn2Click">Button 2</button>
</div>
<script type='text/javascript'>
  const app = new Vue({
    el:'#app',
    data:{

    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      },
      submitClick(){
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyup");
      },
      enterClick(){
        console.log("enter");
      },
      btn2Click(){
        console.log("button2click");
      }
    }
  })
</script>
</body>
</html>
Published 10 original articles, won praise 3, visited 378
Private letter follow

Keywords: Javascript Vue

Added by mark_kccs on Thu, 20 Feb 2020 14:20:06 +0200

Popular Keywords

©2024 Programming VIP