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。多趣味。詳細はこちら→[Profile]。サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

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