Tutorial und Codebeispiele zur Vue.JS-Ereignisbehandlung

In diesem Artikel stellen wir Ihnen die Ereignisverarbeitung in Vuejs vor.

Vuejs stellt uns eine Direktive namens v:on zur Verfügung, die uns hilft, das dom-Ereignis zu registrieren und abzuhören, sodass immer dann, wenn das Ereignis ausgelöst wird, die an das Ereignis übergebene Methode aufgerufen wird. Syntax der

<strong>v:on</strong>-Direktive

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

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

Im obigen Code hören wir auf das click-Ereignis auf der Schaltfläche, sodass jedes Mal, wenn der Benutzer auf die Schaltfläche klickt , Alles wird die Methode handleClick aufrufen.

<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>

Wie übergebe ich Parameter an den Event-Handler?

Manchmal können Event-Handler-Methoden auch Parameter akzeptieren.

<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>

Hier erstellen wir eine increment-Methode mit nur einem Parameterwert, um Parameter an die increment(10)-Methode zu übergeben.

Wie greife ich auf das Standardereignisobjekt zu?

Um auf das Standardereignisobjekt in der Methode vuejs zuzugreifen, müssen Sie eine Variable namens $event bereitstellen.

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

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

Hier greifen wir auf das Ereignisobjekt zu, indem wir die spezielle $event-Variable verwenden, die von Vuejs bereitgestellt wird.

Manchmal müssen wir gleichzeitig auf Ereignisobjekte und Parameter zugreifen.

<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>

Kurzschriftsyntax

vuejs bietet auch eine Kurzschriftsyntax zum Abhören des dom-Ereignisses.

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

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

Dieser Artikel ist eine Einführung in die Vue.JS-Ereignisverarbeitung. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonTutorial und Codebeispiele zur Vue.JS-Ereignisbehandlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!