Vue

【Vue.js 2.9】はじめてのVue.js イベントハンドリング

・onClickイベントの記法
・クリックイベント以外のイベント

はじめに

今回はクリックなどのイベント時のハンドリングについての紹介となります。

【Vue.js 2.9】はじめてのVue.js CSSのデータバインディング②(応用編)  ・classクラスオブジェクトを用意して呼ぶことも可能 ・条件式で適用を反映可能(三項演算子) ・複数クラスオブジェクトを使う場合は...

環境情報

名前詳細
Vue.js開発バージョン(https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
エディタJSFiddle(https://jsfiddle.net/

onClickイベントの書き方

ボタンを押したら現在日時を取得・表示する処理をサンプルとしています。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <button v-on:click='getNowDateTime'>
    現在日時取得
  </button>
  <p>
    取得結果:{{ now }}
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      now: ''
    },
    methods: {
    	getNowDateTime: function(){
      	  this.now = new Date().toLocaleString()
        }
    }
})

ボタンを押したら現在日時を取得する「getNowDateTime」メソッドを呼んでいます。
getNowDateTimeメソッドではnow変数に現在日時の文字列を格納しています。

メソッドイベントハンドラ取得方法

上記getNowDateTimeメソッドの中でイベントハンドラを取得したい場合は引数に「event」もしくは「$event」を設定することで取得出来ます。

イベントハンドラ以外の引数が無い場合は「event」で問題無く、イベントハンドラ以外の引数がある場合は「$event」を使います。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <button v-on:click='getNowDate'>
    現在日時取得
  </button>
  <p>
    取得結果:{{ now }}
  </p>
  <p>
    クリックタグ:{{ tag }}
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      now: '',
      tag: ''
    },
    methods: {
    	getNowDate: function(event){
      	  this.now = new Date().toLocaleString()
          this.tag = event.target.tagName
        }
    }
})

ボタンを押すと、クリックイベントが発生したタグ(ボタンなのでBUTTON)が表示されます。

イベントハンドリングを使えば、v-modelを使わずにテキストボックスの値のチェックも可能です。

クリックイベント以外のイベントについて

v-onのあとに設定出来るのは、クリック以外にも可能です。

スクロールイベントをハンドリングしたい場合は「v-on:scroll」
設定したタグのロードイベントをハンドリングする場合は「v-on:load」
値が変更した場合は「v-on:change」

などなど、クリックイベント以外のハンドリングも可能です。

参考記事

基礎からメモ: Vue.js CH3-p96 イベントハンドリング
https://marbles.hatenablog.com/entry/2019/10/26/230752

  • おすすめの投稿がありません