Vue.JS事件處理教學及程式碼範例

本篇文章我們將介紹vuejs中的事件處理給大家。

Vuejs向我們提供了一個名為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事件。

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

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

這篇文章就是關於Vue.JS事件處理的介紹，希望對需要的朋友有幫助！

以上是Vue.JS事件處理教學及程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！