format_list_bulleted
【Vue.js】v-onディレクティブの書き方・使い方について解説
最終更新日時:2020-05-03 12:49:41



VueではコンポーネントオブジェクトやVueオブジェクトを使った開発していきますが、それぞれのオブジェクトで用意された関数や変数を使いたくなると思います。Vueのv-onディレクティブはイベント名と変数または関数名を指定することによって簡単にそれらの値を使用することができます。

Vueのv-onディレクティブとは?

ボタンが押されたとき、Vueオブジェクトのmethodsプロパティないの関数やコンポーネントオブジェクトで用意されているある処理を実行する関数を呼び起こしたい場合などあると思います。ボタンを押すと文字の色や大きさを変えたり、要素の表示の切り替えをしたりなどさまざまな場合があると思いすが、v-onディレクティブに発火させたいタイミングのイベントと関数を書くだけでこのような処理を簡単に実装できます。

Vueのv-onディレクティブの使い方

それでは実際のv-onディレクティブの書き方について説明していきます。

Vueのv-onディレクティブの書き方

v-onディレクティブは次のように書きます。

(index.html)

<div v-on:イベント名="処理(関数)"></div>

イベント名にはclickやinputなどJavaScriptで用意されているイベントが利用でき、関数はVueのmethodsプロパティ内の関数で用意されているものなどが使えます。

methodsプロパティについて詳しく知りたい方は「Vueのmethodsプロパティの書き方・使い方について解説」を参照してみてください!

省略記法

v-onディレクティブの書き方は@を用いて以下のように省略して書くこともできます。

(index.html) 

<div @イベント名="処理(関数)"></div>

上記のようにv-on:の部分を@で表記しても構いません。積極的に使っていきましょう。ただしサイト内で省略記法の仕様の有無を統一させることはコードの可読性を高める上で重要です。

Vueのv-onディレクティブの実装例

クリックするとカウントが1ずつ増加するボタンを実装してみましょう。

(index.html)

<div id="app">
     <button v-on:click="plus"></button>
     <div>{{count}}</div>
</div>

<script>
var app = new Vue({
   el:'#app',
   data:{
      count:0,
   },
   methods:{
    plus:function(){
     this.count++
    }
   }
})

v-onディレクティブにはclickイベントを指定し、methodsプロパティ内で指定されたplus()という関数を発火されるように指定しています。

v-onディレクティブでは下記のように処理を直接指定することもできます。処理が今回のように簡単な場合はインラインで処理内容を記述した方が簡潔でいいでしょう。

(index.html)

<button v-on:click="count++"></button>

この記事のまとめ

本記事ではv-onディレクティブを、実際の実装例を元に説明しました!最後に記事の要点をまとめてみましょう。

  • v-onディレクティブを用いることで、イベントの読み取りとハンドラの実行関数を記述することができます。
  • @を用いる省略記法も便利です。

Vueのv-onディレクティブを是非活用してみましょう!