【Vue.js】v-onについて

はじめに

こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はv-onについてアウトプットしていきます！

v-onとは

v-onとはボタンをクリックしたり、スクロールなどのユーザーによる一連の挙動を『イベント』と呼びます。そして、それら様々なイベントに対応して発動させる処理のこと（関数）を『イベントハンドラ』と呼びます。
Vue.jsにおいて、イベントによってイベントハンドラを実行させるには、v-onを使用します。

書き方

今回はボタンclick!を押したら、現在の日時が表示されるプログラムを実行していきます。

HTML

<button v-on:click="Onclick">
  Click!
</button>
<p>
 {{ now }}
</p>

Vue.js

var app = new Vue({
    el:'#app',
    data:{
      now=''
    }
    methods: {
        Onclick: function() {
          this.now = new Date().toLocaleString();
        }
    }
})

dataオプションにnowプロパティ（p要素と同じもの）を設置します。
イベントハンドラのメソッドmethodsを定義していきます。内容は、”ボタンをクリックしたらdataのnowに現在時刻を代入する”というふうにします。それが上記になります。
それをp要素 {{now}}とHTMLに記述すれば出力されます。
出力結果が画像のようになります。

ポイントまとめ

・<button v-on:〇〇="〇〇〇">を記述
・<p>{{〇}}</p>を記述
・メソッドmethodsを定義し関数の処理を書く。
・dataに{{〇}}と共通のプロパティを記述する

最後に

今回はv-onについてアウトプットしました。
今回の記事を読んで気になったこと、質問等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！