Vue.jsのv-onディレクティブについて説明します。
v-onディレクティブとは？
要素にイベントリスナをアタッチ
v-onとは、(公式では)要素にイベントリスナをアタッチすると説明されている。解らないでもないが…。
個人的に言い換えるなら、下記の表現の方が感覚的にはしっくりくる。
v-onとは、イベント処理に関連付けるときに使う。
対象は要素。
省略記法が用意されていて、”@”で表現することも可能。
クリックされたらメッセージを書き換える
下記に一例を示す。
HTML(test.html)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <title>Hello dice-record!!</title> </head> <body> <div id="application"> <p> {{ message }} </p> <p> {{ now }} </p> <p> <!-- onclickメソッドに関連付け --> <button v-on:click="onclick">Click Me!</button> </p> <p> <!-- 省略記法 --> <button @click="onclick">Click Me!(省略記法)</button> </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="test.js"></script> </body> </html> |
JavaScript(test.js)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
new Vue({ el: '#application', data: { message: 'ダイス記に！ようこそ！！', now: '' }, methods: { onclick: function() { this.message = 'clickしてくれて！ありがとう！！'; this.now = new Date().toLocaleString(); }, } }) |
省略記法
@
【例】下記2つは全く同じ。
HTML
|
1 |
v-on:click="onclick" |
|
1 |
@click="onclick" |
公式
以上です。
