Vue.js

【Vue.js】v-on【要素にイベントリスナをアタッチ】

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

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

要素にイベントリスナをアタッチ

v-onとは、(公式では)要素にイベントリスナをアタッチすると説明されている。解らないでもないが…。

個人的に言い換えるなら、下記の表現の方が感覚的にはしっくりくる。

v-onとは、イベント処理に関連付けるときに使う。

対象は要素。

省略記法が用意されていて、”@”で表現することも可能。

クリックされたらメッセージを書き換える

下記に一例を示す。

HTML(test.html)

 

JavaScript(test.js)

 

省略記法

@

v-on: を記述せず @ を付けるだけで使える。

【例】下記2つは全く同じ。

HTML

 

公式

v-on

以上です。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です