Home >Web Front-end >JS Tutorial >Analysis of simple event binding of v-on directive in Vue (with code)

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

不言
不言Original
2018-07-27 13:21:003453browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn