【Vue】ディレクティブ（イベント）

Vueではhtmlに対してディレクティブと呼ばれる属性形式の命令を付与することで、ページに機能を付与している

<!-- v-で始まる属性 -->
<a v-bind: href="url">...</a>

ディレクティブは用途に応じて以下のように分類できる

分類	概要	主なディレクティブ
データバインド	式の値をページに反映	v-bind, v-htmlなど
イベント	イベント処理を実装	v-on
フォーム	フォームからの入力を取得	v-model
制御	条件分岐や繰り返し処理など	v-if, v-forなど

イベント関連のディレクティブ

以下のコートでは①のv-onディレクティブでイベントハンドラを設定し、クリックされたときに②を呼び出している

<div id="app">
  <button @click="onclick">クリック</button>  <!-- ① -->
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: '',
  },
  methods: {
    // クリック時に現在時刻を取得…②
    onclick: function () {
      this.message = new Date().toLocaleString()
    },
  },
})

また、v-onはよく利用することから省略構文が用意されている

<button @click="onclick">クリック</button>

イベントオブジェクト

イベントオブジェクトを利用することで、イベントに関する情報にアクセスしたり、イベントハンドラーの挙動を操作したり（キャンセルなど）といったことが可能になる

  <div id="app">
    <button v-on:click="onclick">クリック</button>
  </div>

new Vue({
  el: '#app',
  methods: {
    // クリック時にイベントオブジェクトをログに出力
    // テンプレートからの値とイベントオブジェクトを同時に受け取りたい場合は(arg, $event)と書く
    onclick: function (e) {
      console.log(e)
    },
  },
})