【Vue2】clickイベント @clickとv-on:clickどっちを使う？

2024年2月18日Vue2

ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

今回はvue.jsでclickイベントで発火のさせ方についてです。
vueでは「@click」と「v-on:click」の二つがクリックイベントがあります。
どちらの構文も同じ動作を持つため、使用するのは好みの問題です。
通常、@click の方が短くて直感的であり、一般的によく使用されます。

@clickイベント

<button @click="handleClick">Click me</button> は、ボタンがクリックされたときに handleClick メソッドを呼び出すことを示します。

<button @click="handleClick">Click me</button>

全体のサンプルコードです。
ボタンクリックでscriptタグ内のhandleClickが呼ばれます。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

v-on:clickイベント

<button v-on:click="handleClick">Click me</button> は、ボタンがクリックされたときに handleClick メソッドを呼び出すことを示します。

<button v-on:click="handleClick">Click me too</button>

全体のサンプルコードです。
ボタンクリックでscriptタグ内のhandleClickが呼ばれます。

<template>
  <div>
    <button v-on:click="handleClick">Click me too</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

Vue2

Posted by kami