Vue.jsでイベント関連のディレクティブを使う

v-on:イベント名="..."の...にメソッドの名前を指定する。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <button v-on:click="onclick">クリック</button>
  <p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/event.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    onclick: function() {
      this.message = new Date().toLocaleString();
    }
  }
})

Vue.jsで利用できる主なイベント

focus
blur
change
select
submit
click
dbclick
mousedown
mouseover
mouseenter
mouseleave
mouseout
mousemove
mouseup
keydown
keyup
keypress
resize
scroll
error
contextmenu

マウスオーバーで画像を変更する

new Vue({
  el: "#app",
  data: {
    path: 'https://i.pinimg.com/originals/73/e2/ad/73e2adcd911310e65c3541a37b0c3c75.jpg'
  },
  methods: {
    onmouseenter: function() {
      this.path = 'https://i.pinimg.com/originals/63/c7/84/63c784e681cfdf0264620bb5c4dfda12.jpg';
    },

    onmouseleave: function() {
      this.path = 'https://i.pinimg.com/originals/a3/40/6a/a3406a38bbb13609cf11b05136b4c452.jpg';
    },
    singleclick: function() {
      this.path = 'https://i.pinimg.com/originals/55/fd/71/55fd71d32ee261707c982bdade706f6b.jpg';
    },
    doubleclick: function() {
      this.path = 'https://i.pinimg.com/564x/48/d0/08/48d008f888de940d9ac0a566e595d472.jpg'
    }
  }
});

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <img v-bind:src="path" alt="ロゴ画像"
  v-on:mouseenter="onmouseenter" v-on:mouseleave="onmouseleave"
  v-on:click="singleclick"
  v-on:dbclick="doubleclick"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/event_mouse.js"></script>
</body>
</html>

イベントハンドラに任意の引数を渡す

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <button v-on:click="onclick('ようこそ！')">クリック</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/event_args.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  methods: {
    onclick: function(message) {
      alert(message)
    }
  }
})

イベントオブジェクトを渡す場合

  <button v-on:click="onclick('ようこそ！', $event)">クリック</button>

new Vue({
  el: '#app',
  methods: {
    onclick: function(message, e) {
      console.log(e);
    }
  }
})