v-on ディレクティブ
イベント処理を実装する -> イベントとは、ボタンを押したりURLをクリックなどのこと またイベント時に実行されるコード(メソッド)のことをイベントハンドラーと呼ぶ
イベントハンドラーはv-onディレクティブを使って設定する 下記はサンプルコード。 JSのコードと似ているが、onclick()ではなくメソッド名で呼び出している。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <!-- v-onは省略して@clickとも書ける --> <button v-on:click="onclick">クリック</button> <p>{{message}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
new Vue({ el: '#app', data: { message: '' }, methods: { // クリック時に現在日時を取得 onclick: function () { this.message = new Date().toLocaleString(); } } });