Vue.JS イベント処理のチュートリアルとコード例

この記事では、vuejs のイベント処理について紹介します。

Vuejs は、v:on というディレクティブを提供します。これは、dom イベントを登録してリッスンするのに役立ちます。これにより、イベントがトリガーされるたびに、メソッドがイベントに渡されたものが呼び出されます。

<strong>v:on</strong> ディレクティブの構文

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

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

上記のコードでは、## をリッスンします。 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>

ここでは、パラメータ値を 1 つだけ持つ

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 中国語 Web サイトの他の関連記事を参照してください。