Vue.JS 이벤트 처리 튜토리얼 및 코드 예제

이 글에서는 vuejs의 이벤트 처리에 대해 소개하겠습니다.

Vuejs는 v:on이라는 지시문을 제공합니다. 이 지시문은 dom 이벤트를 등록하고 수신하는 데 도움이 되어 이벤트가 트리거될 때마다 호출됩니다. 이 이벤트에 전달된 메서드입니다. v:on的指令，它可以帮助我们注册和侦听dom事件，这样无论何时触发事件，都会调用传递给该事件的方法。

<strong>v:on</strong>指令的语法

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

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

在上面的代码中，我们监听按钮上的click事件，以便每当用户单击按钮时，它都会调用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>

如何将参数传递给事件处理程序?

有时事件处理程序方法也可以接受参数。

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

这里，我们创建了一个只有一个参数值的increment方法，以便将参数传递给increment(10)方法。

如何访问默认事件对象?

要访问方法vuejs中的默认事件对象，需要提供一个名为$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>

在这里，我们通过使用Vuejs提供的特殊$event变量来访问事件对象。

有时我们需要同时访问事件对象和参数。

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

简写语法

vuejs还提供了一种简写语法来侦听dom

<strong>v:on</strong>지시문 구문

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

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

위 코드에서 버튼의 클릭을 수신합니다. > 이벤트를 사용하여 사용자가 버튼을 클릭할 때마다 handleClick 메서드를 호출합니다. 🎜rrreee🎜이벤트 핸들러에 매개변수를 전달하는 방법은 무엇입니까?🎜🎜때때로 이벤트 핸들러 메소드가 매개변수를 허용할 수도 있습니다. 🎜rrreee🎜여기에서는 매개변수 값이 하나만 있는 increment 메서드를 만들어 매개변수를 increment(10) 메서드에 전달합니다. 🎜🎜기본 이벤트 개체에 액세스하는 방법은 무엇입니까?🎜🎜vuejs 메서드에서 기본 이벤트 개체에 액세스하려면 $event라는 변수를 제공해야 합니다. 🎜rrreee🎜여기서는 Vuejs에서 제공하는 특수 $event 변수를 사용하여 이벤트 객체에 액세스합니다. 🎜🎜때로는 이벤트 객체와 매개변수에 동시에 액세스해야 하는 경우가 있습니다. 🎜rrreee🎜약식 구문🎜🎜vuejs는 dom 이벤트를 수신하기 위한 약식 구문도 제공합니다. 🎜rrreee🎜이 글은 Vue.JS 이벤트 처리에 대한 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다! 🎜

위 내용은 Vue.JS 이벤트 처리 튜토리얼 및 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!