【Vue.js】v-onディレクティブについて解説します。

Vue.js Web制作

【Vue.js】v-onディレクティブについて解説します。

※本記事は広告が含まれる場合があります。

なやむくん
Vue.jsでv-onの使い方について初心者でもわかりやすく知りたい…。

などの疑問や悩みを解決してまいります。

この記事ではVue.jsで使用できるv-onについて解説していきます。

初心者向けの記事となっていますので予めご了承ください。

v-onディレクティブとは

v-onディレクティブは、Vue.jsでイベントの処理を行うためのディレクティブです。

例えばボタンをクリックしたときの処理だったり、フォームに入力した際に関数を実行させるなどの処理を行う事ができます。

実際にv-onディレクティブを使用してみよう

それでは実際に使用してみましょう。

今回2つのVueファイルを用意しました。ページに表示するApp.vueとコンポーネントファイルのLearnVue.vueです。

<script setup>
  import LearnVue from './components/LearnVue.vue';
</script>

<template>
  <LearnVue /> 
</template>

<style scoped></style>
<script setup>
  const author = 'みつた'
  const blogName ='30歳で異業種からIT企業に転職しました。'
  const url = 'https://mitsutano-oshiro.com/'
</script>

<template>
  <p>著者：{{ author }}</p>
  <p>ブログ名：{{ blogName }}</p>
  <button class="button">ブログを見に行く</button>
</template>

<style scoped>
.button {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  color: #fff;
  background-color: hsla(160, 100%, 37%, 1);
  border-radius: 50px;
  border: none;
  cursor: pointer;
}
p + p {
  margin-top: 10px;
}
</style>

現在ページに表示される内容は以下の通りになります。

ページの表示内容

注目してほしい箇所はボタン箇所です。

現在「ブログを見に行く」というボタンを設置していますが、このままではボタンがあるだけでクリックしても何も動作しません。

今回やりたいことは、ボタンをクリックされたら当ブログサイトに別タブで移動できるという処理と、移動の前には移動するか否かの選択できるダイアログボックスも表示できるようにしていきたいと思います。

みつた
動きが多くなってきていますが1つ1つ確認しましょう！

クリックしたときに実行する関数の作成

それではクリックしたときの関数をscriptタグ内に記述していきたいと思います。

以下のように記述しました。

<script setup>
  const author = 'みつた'
  const blogName ='30歳で異業種からIT企業に転職しました。'
  const url = 'https://mitsutano-oshiro.com/'
  const click = () => {
    if(confirm(blogName + 'へ移動しますか?')) {
      window.open(url)
    }
  }
</script>

関数名はわかりやすくclickとしています。

中身はif文なのですが、条件式にconfirmメソッドを指定しています。

confirmメソッドはブラウザ上でダイアログボックスを表示し、ユーザーに対して「OK」または「キャンセル」の選択をさせる機能です。

引数にはダイアログボックス内に表示させたい内容を記述します。

ダイアログボックスにはOKとキャンセルのボタンがあり、「OK」をクリックするとtrueを、「キャンセル」をクリックするとfalseを返します。

なのでif文を使用してtrueであればwindow.open(url)でリンク遷移するようにし、キャンセルがクリックされたら何もしないという処理になっています。

よろこびくん
便利な機能ですね！早く実装して試してみたいです！

イベントを発生させたいタグにv-onディレクティブを記述

発生させたい関数を作成出来たら、この関数を実行させるタグにv-onディレクティブを記述します。

今回はbuttonタグを用意していますのでここに設定します。

記述方法は以下になります。

<template>
  <p>著者：{{ author }}</p>
  <p>ブログ名：{{ blogName }}</p>
  <button v-on:click="click" class="button">ブログを見に行く</button>
</template>

このようにv-onディレクティブを設定する場合はv-on:イベント名="処理を指定"と記述します。

ボタンをクリックされたら処理を実行したいので、イベント名はclickとしています。

また処理を指定する箇所には先程作成したclick関数を使いたいので関数名のclickを指定しています。

クリックしてから処理の実行までの流れは以下のようになります。

よろこびくん
うまく実装できました！

またv-onディレクティブは省略形として以下のように記述することもできます。

<template>
  <p>著者：{{ author }}</p>
  <p>ブログ名：{{ blogName }}</p>
  <button @click="click" class="button">ブログを見に行く</button>
</template>

このようにv-on:の箇所を@に書き換えて省略させることもできますのでお試しください。

-Vue.js, Web制作