Vue.js イベントリスナーを使えるv-on

v-onディレクティブ

v-onディレクティブを使うと、イベントリスナーを使うことができるようになる。

イベントリスナーとは「ページが表示された」、「ボタンをクリックした」などの動作のことを表します。
JavaScriptにはあらかじめ様々なイベントが定義されており、それらのイベントが発生した際に動作するように対応付けておいた関数のことを「イベントリスナー」と呼びます。
イベントが発生する仕組みまでは JavaScript 側で用意するものの、イベントとイベントリスナーとの対応付けは開発者が行わなければなりません。 具体的にはaddEventListener()メソッドを使って対応付けを行います。

https://techacademy.jp/magazine/35994

実際にやってみる。

See the Pen v-on by git-cat-meow (@git-cat-meow) on CodePen.

最初にやった、変数に代入して出力した文字列を逆さまにするプログラム。

まずはHTML側の設定。下記の形式にする。

v-on:イベント名='処理（関数）'

イベント名はjavascriptが用意しているclickやinputなどが使用できる。今回の場合はクリックがトリガーになる。

処理（関数）はVueのmethodsで用意した関数を使用できる。今回は”reverseMessage”を指定する。thisとあるのはこのVueインスタンス自身を指す。thisについて少し調べてみたが、ちょっと理解に時間がかかりそうだったので今回はそういうものとして流しておく。

試しにthisをapp5に書き換えてみても稼働した。

See the Pen v-on by git-cat-meow (@git-cat-meow) on CodePen.

処理内容として、変数messageを分割して、逆さまにして、繫げたものを変数に再代入している。

Vueはjavascriptのフレームワークということだが、ある程度はjavascriptの基本的な記法は学んでおく必要がありそう。そちらも少し押さえておくことにする。