JavaScript

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

v-onの使い方
momeq
モー
モー

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

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

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

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

ニャー
ニャー

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

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

基本的な使い方

基本構文

基本的な使い方は、イベントの前に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>

プログラミングを学ぶならTechAcademy(テックアカデミー)がおすすめ!

TechAcademy [テックアカデミー]

モー
モー

独学で苦戦している人は、一度しっかりと基礎を学ぶと次のステップへ進めますよ。今のおすすめは、TechAcademy(テックアカデミー)ですね。

TechAcademyのおすすめポイント
  • オンラインで選抜された現役エンジニアから学ぶことができる
  • 自宅からWeb制作・プログラミング・アプリ開発など幅広い分野を学べる
  • 学ぶだけではなく、転職の支援、副業に活かせるスキルの習得、副業の仕事紹介まで行っている
ニャー
ニャー

無料体験や相談もあるから、一度試してみてもいいんだにゃ!

\無料体験、無料相談はこちらから/



記事URLをコピーしました