v-onでイベント情報を取得する ❏Vue.js❏

今回はある場所にマウスが乗ったら、そこのイベント情報を取得してX軸とY軸を表示させます。

開発環境はJSFiddle https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b

html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p @mousemove="changeMousePosition">マウスを乗せる</p>
  <p>x:{{ x }}</p>
  <p>y:{{ y }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    x:0,
    y:0
  },
  methods: {
    changeMousePosition(event) {
      this.x = event.clientX;
      this.y = event.clientY;
    }
  }
})

v-onは@に省略
mousemoveイベントにchangeMousePositionメソッド
メソッドの引数にeventを取るとイベントの情報が取得できます。

console.log(event)イベント情報を確認してみると...

この下にもズラーッと情報がありますが、今回はclientXとclientYを使いました。

ではまた！