【Vue.js】クリックイベントをつくろう！【v-on】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Vue.jsの解説シリーズです。

今回はVueのクリックイベントv-onの使い方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

クリックイベントをつくろう！

クリックイベントとは、マウスのクリックをトリガーとして発火するイベントです。

methodsで関数を宣言しよう！

methodsとはVue.jsのコンストラクタのオプションオブジェクトの一つです。

いつも出てくるdataもオプションオブジェクトです。

関数の宣言方法はこうです。

  // Vueの宣言
Vue.createApp({
  data() {
    // データ
  },
  methods: {
      関数名:function(引数){
          // 処理
      }
  }
}).mount("#app"); //Vueで管理する要素

v-onディレクティブを使おう！

今回はVue.jsのイベントリスナーであるv-onディレクティブを使用します。

書き方はこうです。

<div v-on:click="関数名"></div>

<!-- 省略形 -->
<div @click="関数名"></div>

実際にクリックイベントを動かしてみよう！

See the Pen v-on:click by samehack (@samehack) on CodePen.

今回はクリックされると「こんにちは！」という
アラートを表示させる処理を作ってみましょう。

alert(this.message);

という部分に疑問を感じるかと思いますが、
自分自身のdata()を呼び出す際には

this.変数名

というように、thisをつけて呼び出す必要があります。

おまけ：問題

先程のクリックイベントをピュアなJavaScriptを使って記述してください。

ちょっと難しいので必要な処理のヒント！

実行環境が無い方は雛形を用意したので
EDIT ON CODEPENをクリックしてそこで挑戦してみてください。

See the Pen 問題 by samehack (@samehack) on CodePen.

まとめ

おまけの答え

完璧に一緒でなくても当然OKです。
ポイントはボタンをクリックした際にアラートが表示されているかどうかです。

See the Pen addEventListener by samehack (@samehack) on CodePen.

今回はすこし難しかったかもしれません。

ですが、これだけの処理をVue.jsを使うと簡単に書けることが
理解できたと思います。

フレームワークを使うと良くも悪くも処理を理解する必要が無いので
実際にどう動いているのかが分かりづらかったりするので、
余裕がある際に、Vue.js → ピュアなJavaScriptの変換を
考えると、とても勉強になると思います。

最後にピュアなJavaScriptのイベントリスナーの構文

要素名.addEventListener(イベント名, (引数) => {
  // 処理
}, false);

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram