Vue

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の基本的な記法は学んでおく必要がありそう。そちらも少し押さえておくことにする。

カテゴリー: Vue
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る