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('You hitted me',$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!
