About the use of Vue v-on directive

1. Listening for events

You can use v-on directive to listen for DOM events and run some JavaScript code when they are triggered. The event code can be placed directly after v-on or written as a function.

The sample code is as follows:

<div id="app">
  <p>{{counter}}</p>
  <button @click="counter += 1">+1</button>
  <button @click="subtract(10)">-10</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      subtract(value){
        this.counter -= value
      }
    }
  })
</script>
 

2. Pass in event parameters

If you want to get the native DOM event in the event handling function, you can pass a $event parameter when calling it in the html code.

The sample code is as follows:

<button v-on:click="subtract(10,$event)">Subtract 10</button>
...
<script>
...
methods: {
    subtract: function(value,event){
        this.count -= value;
        console.log(event);
    }
}
...
</script>
 

3. Event modifiers

It is a very common requirement to call event.preventDefault() or event.stopPropagation() in an event handler. Although we can easily do this in the method, it is better to have the method have pure data logic instead of handling DOM event details.

To solve this problem, Vue.js provides event modifiers for v-on . As mentioned before, modifiers are indicated by a dot at the beginning of the command suffix.

• .stop: event.stopPropagation , stops event bubbling.
• .prevent: event.preventDefault , prevent the default behavior
• .capture: event capture.
• .self: represents the currently clicked element itself.
• .once: This event is executed only once.
• .passive: Tells the browser not to prevent the default behavior when scrolling the page, making the scrolling smoother.

Case 1: Prevent click events from propagating further

<div id="app">
  <div @click="divClick">
    1111
    <button @click.stop="btnClick">Button</button>
  </div>
</div>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      count: 0
    },
    methods: {
      divClick(){
        console.log("divClick")
      },
      btnClick(){
        console.log("btnClick")
      }
    }
  });
</script>

Case 2: Submit event no longer reloads the page

<div id="app">
  <form action="">
    <label>
      <input type="text">
    </label>
    <label>
      <input type="submit" value="Submit">
    </label>
  </form>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
    }
  })
</script>

The above is the most standard code for submitting data. After submission, it will automatically jump to Baidu. However, there is a requirement now. We hope that after entering the data, it will not automatically jump to Baidu, but process the data by our own method first, and then jump to the specified page after processing.

The code is as follows:

<div id="app">
  <form action="https://www.baidu.com">
    <label>
      <input type="text">
    </label>
    <label>
      <input type="submit" value="Submit" @click.prevent="testClick">
    </label>
  </form>
</div>
<script>
  const app = new Vue({
    el: "#app",
    methods: {
      testClick(){
      }
    }
  })
</script>

Here we bind a click event to submit and use .prevent to prevent its default behavior.

This is the end of this article about the use of Vue v-on directive. For more relevant Vue v-on directive content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!