2023.01.22 2023.01.31

【Vue3】v-onを使ってイベントを受け取ろう。省略記法は@です。

momeq

モー

今回は、v-onについてみていきます。v-onを使うことで、イベントを使っていくことができるようになります。

JavaScriptではイベントリスナーを使い、ボタンを押されたり、要素が変わったりした状況を読み取って関数を動かすことができるようになっています。

その機能がVueでいうところの、v-onであり、バニラなJavaScriptよりも簡単に扱うことができます。

イベントはもともとJavaScriptで使える機能であれば、使うことができるので、詳しくはこちらのサイトなどを参考にしてもらえればと思います。

ニャー

今回は、v-onの使い方に焦点を置きたいと思うんだにゃ。

そのため、よく参考書などでも使われるclickなどを参考に使い方を見ていくことになるから、他のものを使いたい時は別に調べて欲しいんだにゃ。

Contents

基本的な使い方
実際のコード
- カウンター
- マウスの位置を表示
プログラミングを学ぶならTechAcademy（テックアカデミー）がおすすめ！

基本的な使い方

基本構文

基本的な使い方は、イベントの前にv-on:をつけるだけです。

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

上の例では、clickイベントの前にv-on:をつけるだけで、ボタンのクリックイベントを受け取ることで、関数が動きます。

ニャー

かなりシンプルに書くことができるのが便利なんだにゃ。

省略記法

v-bindと同じように、使用頻度が高いv-onでも省略記法が用意されています。「@」をつけるだけで簡単に書くことができますね。

<button @click=”関数名”>ボタンの名前</button>

モー

基本的には、私は@の省略記法を使っていますが、可読性の問題で使われないこともあるみたいなので、そのプロジェクトごとに使うか、使わないかを考えて欲しいと思います。

イベント引数

イベントを使う場合、イベント引数を取ることができます。単純にイベント引数を受け取る場合は、特にテンプレート側で何かをする必要はありません。

テンプレート

<button @click=”関数名”>ボタンの名前</button>

スクリプト

const 関数名 = (イベント引数) => { 関数の内容 }

モー

イベント引数の部分は受け取るための変数名を入れますが、なんでも構いません。

特段決まりがない場合、慣例的に「e」や「event」などが多いみたいですね。

任意の引数

引数はイベント引数だけでなく、任意の引数を指定することもできます。

その場合は、テンプレートの方にも引数を取る必要があります。

テンプレート

<button @click=”関数名(任意の引数)”>ボタンの名前</button>

スクリプト

const 関数名 = (任意の引数) => { 関数の内容 }

ニャー

イベント引数と任意の引数をどちらも使う場合は、$eventでイベント引数を受け取るようになるんだにゃ。

テンプレート

<button @click=”関数名(任意の引数, $event)”>ボタンの名前</button>

スクリプト

const 関数名 = (任意の引数, イベント引数) => { 関数の内容 }

使う場合は、任意なのか、イベント引数なのかを確認しておきましょう。

実際のコード

カウンター

ボタンを押すと数字が増えていくカウンターです。clickイベントを使っています。

<script setup lang="ts">
  import {ref} from "vue"
  const number = ref<Number>(0);　
  const handleClickAdd = () => number.value++;
</script>

<template>
  <div class="container"> 
    <p>{{number}}</p>
    <button @click="handleClickAdd">add+</button>
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    text-align: center;
  }
</style>

マウスの位置を表示

<script setup lang="ts">
  import {ref} from "vue"
  const mousemoveX = ref(0);
  const mousemoveY = ref(0);
  const onMousemove = (e: MouseEvent):void => {
    mousemoveX.value = e.offsetX;
    mousemoveY.value = e.offsetY;
  }
</script>

<template>
  <div class="container"> 
    <p>x : {{mousemoveX}}</p>
    <p>y : {{mousemoveY}}</p>
    <div class="box" @mousemove="onMousemove">
      <p>この緑の中でポインタが動きます</p>
    </div>
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
  }
  .box{
    width: 500px;
    height: 500px;
    background-color: #40b983;
    display: flex;
    justify-content: center;
    align-items: center;  
  }
</style>