Tutoriel de gestion des événements Vue.JS et exemples de code

Dans cet article, nous allons vous présenter le traitement des événements dans vuejs.

Vuejs nous fournit une directive appelée v:on, qui nous aide à enregistrer et à écouter l'événement dom, de sorte que chaque fois que l'événement est déclenché, la méthode transmise à l'événement sera appelée. Syntaxe de la directive

<strong>v:on</strong>

<!-- v:on:eventname="methodname" -->

<button v:on:click="handleClick">Click</button>

Dans le code ci-dessus, on écoute l'événement click sur le bouton pour qu'à chaque fois que l'utilisateur clique sur le bouton , il appellera la méthode handleClick.

<template>
   <div>
      <h1>{{num}}</h1>
      <button  v-on:click="increment">Increment</button>
   </div>
</template>

<script>
   export default{
       data:function(){
           return{
               num:0
           }
       },
       methods:{
           increment:function(){
               this.num=this.num+1
           }
       }
   }
</script>

Comment transmettre des paramètres au gestionnaire d'événements ?

Parfois, les méthodes du gestionnaire d'événements peuvent également accepter des paramètres.

<template>
   <div>
       <h1>{{num}}</h1>
       <!-- 参数10被传递给increment方法-->
      <button  v-on:click="increment(10)">Increment By 10</button>
   </div>
</template>

<script>
   export default{
       data:function(){
           return{
               num:0
           }
       },
       methods:{
           //参数`value`
           increment:function(value){
               this.num =this.num+value
           }
       }
   }
</script>

Ici, nous créons une méthode increment avec une seule valeur de paramètre pour transmettre des paramètres à la méthode increment(10).

Comment accéder à l'objet événement par défaut ?

Pour accéder à l'objet événement par défaut dans la méthode vuejs, vous devez fournir une variable nommée $event.

<template>
   <!-- 我们正在传递一个$event变量 -->
  <input placeholder="name" v-on:onchange="handleChange($event)" />
</template>

<script>
 export default{
     methods:{
         handleChange:function($event){
             console.log($event.target.value)
         }
     }
 }
</script>

Ici, nous accédons à l'objet événement en utilisant la variable spéciale $event fournie par Vuejs.

Parfois, nous devons accéder aux objets et aux paramètres de l'événement en même temps.

<template>
   <!-- 我们传递参数加上$event变量  -->
  <button v-on:click="hitMe(&#39;You hitted me&#39;,$event)">
    Hit me Hard
  </button>
</template>

<script>
 export default{
     methods:{
         handleChange:function(message,$event){
             $event.preventDefault()
             console.log(message)
         }
     }
 }
</script>

Syntaxe abrégée

vuejs fournit également une syntaxe abrégée pour écouter l'événement dom.

 <!--简写语法@eventname="method"-->
<button @click="handleClick"></button>

  <!-- 长语法 -->
<button v-on:click="handleClick"></button>

Cet article est une introduction au traitement des événements Vue.JS. J'espère qu'il sera utile aux amis dans le besoin !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!