v-on ~イベントと処理を紐付ける~

Vue.js

特定のイベントが起こったときにメソッドを発火させる

<a v-on:DOMイベント="処理内容 or メソッド">　
<a @DOMイベント="処理内容 or メソッド "> // 省略形

メソッド内でイベントオブジェクト（$event）を取得する

<p @mousemove="changeMousePosition($event, number)" > 
// イベント引数以外の引数をとるときは$マークをつける

changeMousePosition(event, number) {
    this.x = event.clientX / number　　// イベントオブジェクトclientXを参照
    this.y = event.clientY / number
}

イベント修飾子

// stop v-onを無効化 stopPropagation
@mousemove.stop
// prevent タグのデフォルトの挙動を無効化　preventDefault
@mousemove.prevent　

キー修飾子

// 特定のキーに対しての処理
@keyup.enter="メソッド"