【解説】Vue.jsのクリックイベントの使い方【v-on】

2024年5月18日

記事内に広告を含みます

パソ君

・Vue.jsでクリックイベントを使う方法は？

こんな疑問にお答えします。

「クリックしたら〜をする」みたいなイベントを、Vue.jsで実装したいときありますよね。

実は簡単に実装可能です。

今回、自分用のメモとして使い方をまとめてみました。

ジト

参考にどうぞ

ということで、この記事では「Vue.jsのクリックイベントの使い方」について解説していきます！

この記事でわかること

Vue.jsのクリックイベントの使い方

Vue.jsにてクリックイベントを使う方法は下記になります↓

①：「v-on」ディレクティブを使用

②：イベント処理を定義

順に見ていきましょう。

クリックイベントは下記のように「v-on:click」を記述して使います。

<button v-on:click="関数名">ボタン</button>

<!-- 省略した書き方 -->
<button @:click="関数名">ボタン</button>

「v-on:click=”関数名”」を、クリックする要素に記述します。

省略する書き方として「@:click=”関数名”」でもOKです。

続いてイベント処理を定義します。

「methods」オプションオブジェクトに対して、イベントの処理内容を記述。（Options APIの場合）

const app = Vue.createApp({
  methods: {
    handleClick() {
      // 処理内容を記述
    }
  }
}).mount('#app')

これでクリックしたときに起こるイベントが指定できます。

実際にサンプルを作ってみました！

<div id="app">
  <button v-on:click="handleClick">ボタン</button>
</div>

const app = Vue.createApp({
  methods: {
    handleClick() {
      alert('おはようございます')
    }
  }
}).mount('#app')

クリックしたら「おはようございます」というアラートが表示されます。

これでクリックイベントを作ることができました！

ちなみに関数を定義せずに、直接HTMLにて処理を書くやり方も可能です。

<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="count++">ボタン</button>
</div>

const app = Vue.createApp({
  data: () => ({
    count: 0
  }),
}).mount('#app')

ただ可読性が悪くなるのがデメリット。推奨はされていません。

そのためイベント処理は定義するのが良いかと。

【解説】Vue.jsのクリックイベントの使い方【v-on】：まとめ

ジト

Vue.jsでクリックイベントを使いたい時はためしてみてね！