はじめに

この記事はVue.jsの基本は抑えられている程で、話を進めていきます。もしVue.jsを初めて触ると言う方は、こちらの記事を参照していただければと思います。

⬇️**【写真とコード付き】Vue.jsの構築から基本的な書き方まで1から解説【超初心者向け】**
https://qiita.com/yuki4839/items/62f40564e3f4c8dbfc51

では今回は、Vue.jsでイベントの発火によく使用されるであろう、v-on ディレクティブについて、詳しく解説していきます。

早速いきましょう。

実行環境

使用ツール、デバイスはこちら

Google chrome
Mac OS Catalina
Visual Studio Code

また今回使用するディレクトリ階層はこちら。

ディレクトリ階層

─ root(任意のディレクトリ)
│
├─ index.html
│
├─ css
│   └ style.css
│
└─ js
    └ main.js

各ファイルの初期値はこちら。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <div id="web">
    <p>
      {{ context }}
    </p>
  </div>

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

</html>

style.css

/* 出力結果を見やすくするためのスタイルです */
body {
  background-color: #add8e6;
}

# web {
  background-color: #fff;
  margin: 20px;
  padding: 20px;
  width: 300px;
}

main.js

const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})

現時点での出力結果はこちら。

v-on

まず v-on ディレクティブについて簡単に説明すると、ボタンなどがクリックされた時に、何らかのイベントを発生させる事ができるディレクティブになります。

クリック処理

最初は v-on ディレクティブで、最も基本的な処理についてです。文章で伝えるよりも、コードを見て理解してもらうのが早いと思いますので、まずは実際のコードをご覧ください。

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <button v-on:click="click">
      Click!
    </button>
    <p>
      {{ time }}
    </p>
  </div>

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

</body>

main.js

const web = new Vue({
  el: '#web',
  data: {
  	time: ''
  },
  methods: {
  	click: function() {
      this.time = new Date().toLocaleString();
    }
	}
})

ポイントは、buttonタグに v-on:click の属性がある事と、js側では属性値に対応した function() が定義されている点です。

動作内容としては、ボタンがクリックされると、click function() が動作し、中の処理が実行されます。(今回なら現在時刻を出力。)

では動作確認。
まずデフォルトの表示がこちら。
↓

次にボタンをクリックした結果がこちら。
↓

1度のみの処理

続いて v-on ディレクティブで、画面読み込み後に1度だけ発火させたいイベント処理の方法です。まずコードはこちら。

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <button v-on:click.once="click">
      Click!
    </button>
    <p>
    {{ time }}
    </p>
  </div>

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

</body>

main.js

const web = new Vue({
  el: '#web',
  data: {
    time: ''
  },
  methods: {
    click: function() {
      this.time = new Date().toLocaleTimeString()
    }
  }
})

ポイントは v-on:click の後に .once を記述している点です。これにより、画面読み込み後は1度イベントが発火すると、そのあとは発火しなくなります。

では動作確認。
まずデフォルトの表示がこちら。
↓

次にボタンをクリックした結果がこちら。
↓

一見通常のクリック処理と同じですが、このあとボタンを押しても、画面の読み込みを行わない限り更新はされません。(先ほどの .once なしの記述の場合は、何度も更新する事ができます。)

引数を利用した処理

続いて v-on ディレクティブを使用した属性値に、引数を渡した際の処理の方法です。まずはコードはこちら。

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <button v-on:click="clickHandler('Hello Vue.js!')">
      Click!
    </button>
    <p>
    {{ context }}
    </p>
  </div>

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

</body>

main.js

const web = new Vue({
  el: '#web',
  data: {
    context: ''
  },
  methods: {
    clickHandler: function(message) {
      this.context = message
    }
  }
})

ポイントは v-on:click属性 の属性値に、関数名と引数を設定。そしてボタンがクリックされたら、js側で用意されていたイベントが発火と言う仕組みです。

上記の場合は引数で受け取った値を、そのままcontextに代入しているので、出力結果は引数の値になります。

では動作確認です。まずデフォルトの表示がこちら。
↓

次にボタンをクリックした結果がこちら。
↓

省略記法

最後に v-on の省略した書き方についてです。まずコードはこちら。(jsは先程と同様です。)

index.html

<!-- headタグ省略 -->
<body>

  <div id="web">
    <button @click="clickHandler('Hello Vue.js!')">
      Click!
    </button>
    <p>
    {{ context }}
    </p>
  </div>

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

</body>

main.js

const web = new Vue({
  el: '#web',
  data: {
    context: ''
  },
  methods: {
    clickHandler: function(message) {
      this.context = message
    }
  }
})

ポイントは v-on: の部分が、@ に変わった点です。このように省略して書く事が可能です。もしプロジェクトで使用する際は、どちらかに統一しておくと、可読性が上がると思われます。

念のため動作確認。
まずデフォルトの表示がこちら。
↓

次にボタンをクリックした結果がこちら。
↓

先程と全く同じ結果が得られました。

まとめ

以上が v-on ディレクティブで良く使われるであろう、イベント処理の記述方法になります。もう一度まとめておくと、以下の通りです。

クリック処理
- v-on:click="click"
1度だけの処理
- v-on:click.once="click"
引数を利用した処理
- v-on:click="clickHandler('Hello Vue.js!')
省略記法
- @click="clickHandler('Hello Vue.js!')"

また補足として、v-on ディレクティブは他にも多数の使用方法があります。多くは「これいつ使う？」って感じだったので、今回は紹介しておりませんが、もし興味がある方は公式リファレンスをご参照ください。

イベントハンドリング(Vue.js公式リファレンス)
https://jp.vuejs.org/v2/guide/events.html

最後まで読んでいただき、ありがとうございました！

筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack