【vue.js入門 #6】初心者でも理解できる！ディレクティブのイベントを解説

ディレクティブとはv-xxxx形式の属性でhtmlを操作するvue.jsの記述方法です。

前の記事でもディレクティブについては少し紹介しました。
→ https://liberty-dock.com/business_post/53184/

しかし、ディレクティブにはたくさんの機能があります。

大雑把に分けるとこの3つ。

• イベント処理のv-on
• 条件分岐のv-if
• ループ処理のv-for

今回はv-onのイベントについて解説していきます。

ディレクティブのイベント処理とは？

どんなものかといいますと、ユーザーの操作をトリガーになんかしたの処理を実行させることになります。

ボタンをクリックした、入力値を変更した時や、マウスを動かした時などなど。

このような、実行のきっかけになるものをイベントと言い、そのイベントをもとに実行される処理のことをイベントハンドラーと言います。

vue.jsではイベントハンドラーをディレクティブで設定することができるのです。

vue.jsで利用できる主なイベントはこちら。

これらはvue.jsというより、javascriptのイベントでよく使われつものです。

イベント処理の基本がわかるサンプルコード

今回のサンプルコードで利用するのはfocusとblurのイベントです。

inputタグのフォーカスした時（focus）、とフォーカスを外した時（blur）に、実行される処理を書いてみます。

html

<div id="app">
   <input type="text" v-on:focus="onfocus" v-on:blur="onblur">
   <p>{{text}}</p>
</div>

js

var app = new Vue({
   el: '#app',
   data: {
       text: '',
   },
   methods: {
       onfocus: function () {
           this.text = 'フォーカスされました！'
       },
       onblur: function() {
           this.text = 'フォーカスが外れました！'
       }
   }
})

フォーカスされた時onfocusのイベントハンドラーが実行され、フォーカスを外した時、onblurが実行され、表示されるテキストが変更されるようになっています。

イベントオブジェクトで処理にアクセス

イベントオブジェクトとはイベントに関する情報で、アクセスすることでイベント処理を操作することができます。

発生したイベントの種類や発生元を取得したり、特定の条件の場合、イベントの実行をキャンセルといった処理が可能になります。

イベントの発生元にアクセスして、表示させてみましょう。

html

<div id="app">
   <button class="test" v-on:click="onclick($event, 'クリックされました！')">クリック</button>
   <p>{{text}}</p>
</div>

js

var app = new Vue({
   el: '#app',
   data: {
       text: '',
   },
   methods: {
       onclick: function (e, msg) {
           this.text = 'class="' + e.target.className + '"の' + e.target.tagName + 'タグが' + msg
       }
   }
})

第一引数にイベントオブジェクトをを設定しています。

$eventはvue.jsで決められた名前で、$eventじゃないとイベントオブジェクトを取得することはできません。

イベントの発生元のタグ名とclass名を表示させています。

イベントオブジェクトの主な取得内容はこちら。

まとめ

イベント系の処理は、javascriptやjqueryを扱ったことである人なら、ほとんど同じと感じるでしょう。

それくらい、jsではよく使う部分です。

初心者プログラマーの方であれば、vue.jsをきかっけにjsのイベントについて理解できるようになったのではないでしょうか。