Analysis of simple event binding of v-on directive in Vue (with code)

The content of this article is about the analysis of simple event binding of the v-on instruction in Vue (with code). It has a good reference value and I hope it can help friends in need.

Preface

In JavaScript, any DOM element has its own event object. The event object represents the status of the event, such as the element in which the event occurred, the keyboard key status, mouse position and mouse button status, etc. Events are often used in conjunction with functions, which are not executed until the event occurs. Common event handlers in JavaScript (Event Handlers) mainly include:

Attribute name	Description (corresponding to when the event occurred...)
onabort	The loading of the image was interrupted
onchange	The content of the field was changed
ondblclick	Event handler called when the user double-clicks an object
onfocus	The element gets focus
onkeypress	A keyboard key is pressed and released
onload	A page or image is loaded
onmousemove	The mouse was moved
onmouseover	The mouse moved over an element
onreset	The reset button was clicked
onselect	The text was selected
onunload	User exit page
onblur	Element loses focus
onclick	Event handler called when the user clicks an object
onerror	An error occurred while loading the document or image
onkeydown	A certain keyboard key was pressed
onkeyup	A certain keyboard key was released
onmousedown	The mouse button is pressed
onmouseout	The mouse is moved from an element
onmouseup	The mouse button is released
onsubmit	The submit button is clicked
onresize	The window or frame is resized

# #v-on directive

Function: Listen to DOM events and run some JavaScript code when triggered.

Usage: The event functions bound by v-on are generally written in the methods object. The usage steps are as follows: 1. Event binding, 2. Event implementation, 3. Event triggering.

Click event binding in the form of v-on instruction without parameters:

The full code is as follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  v-on:click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
    export default {
        name: &#39;v-on&#39;,
      data() {
          return {
            msg: &#39;点击我&#39;,
            title: &#39;v-on指令学习&#39;
          }
      },
      methods:{
        clickme:function(){
          alert("hello");
    }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

The abbreviated code is as follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(){
        alert("hello");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Example results are as follows

v-on instruction has parameter form click event binding: the number and form of parameters can be passed in according to the actual situation, simple code example As follows:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme(&#39;我是中文参数&#39;,&#39;woshiyingwencanshu&#39;,$event)" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(msg1,msg2,event){
       console.log(msg1);
       console.log(msg2);
       console.log(event);
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

The example results are as follows

Summary: v-on can bind many javascript events. This article only uses the click event as example.

Related recommendations:
Analysis of conditional rendering in Vue (with code)

v- in Vue Analysis of model instruction (with code)

The above is the detailed content of Analysis of simple event binding of v-on directive in Vue (with code). For more information, please follow other related articles on the PHP Chinese website!