Vue.js 入門 #3 – イベントハンドリングとライフサイクルフック

Vue.js を利用したWebアプリケーション開発の手法を紹介していきます。
第三回目は Vue.js の コンポーネントについて紹介していきます。

コンポーネント

Vue.js のイベント管理は、例えば クリックイベントの場合 @click ディレクティブを使用して記述することが出来ます。

メソドイベントハンドラ

@click には methods セクションで定義したメソド名を指定する事が出来ます。

<template>
  <div id="app">
    <a @click="add"> 追加 </a>
  </div>
</template>

<script>
export default { 
  methods{
    add(e){
      ....
    }
  }
}
</script>

インラインイベントハンドラ

@click には JavaScript の記述を直接記述することも出来ます。

<template>
  <div id="app">
    <a @click="items.push(task)"> 追加 </a>
  </div>
</template>

JavaScript の記述が利用可能ということは、引数を指定することも出来るということです。

<template>
  <div id="app">
    <p> {{message}} </p>
    <a @click="setMessage('おはよう')"> おはよう </a>
    <a @click="setMessage('こんにちは')"> こんにちは </a>
    <a @click="setMessage('こんばんは')"> こんばんは</a>
  </div>
</template>

<script>
export default { 
  data(){
    return {
      message: ""
    }
  }
  methods{
    setMessage(message){
      this.message = message
    }
  }
}
</script>

インラインイベントハンドラでは、 $event を用いて、イベントオブジェクトを参照することも出来ます。

イベント修飾子

input[type=submit] のような、デフォルトでページ遷移効果を持つDOMにイベントを設定し、
デフォルトの動作を阻止するには 通常 event.preventDefault() をコールします。

Vue.js ではコレを簡易に処理するための .prevent修飾子を利用することが出来ます。

<form @submit.prevent="onSubmit"></form>
  • .stop : イベントの伝播を停止します。
  • .prevent : DOM デフォルトの動作を停止します。
  • .once : イベントを一回だけ実行します。

様々なイベント

@xxxx の記述は 様々な ネイティブDOM イベントに対応しており、
jQuery の on 関数で利用可能な様々なイベントを利用することが出来ます。

  • @click : クリックされた時
  • @dblclick : ダブルクリックされた時
  • @input : フォーム要素の値が変更された時
  • @change : フォーム要素からフォーカスが外れた時
  • @submit : フォームが送信された時

https://developer.mozilla.org/ja/docs/Web/Reference/Events

他にも Vue.js にはキーイベントの処理を簡便にするための様々な修飾子が用意されており、以下の公式ページで確認することが出来ます。

https://jp.vuejs.org/v2/guide/events.html

ライフサイクルフック

DOM 上のイベントとは別に Vue.js には ライフサイクルフックと呼ばれる Vue.js 固有のイベントが存在します。

ライフサイクルフック mounted は Vue インスタンスがDOMとして画面に配置されたタイミングで呼び出されます。

<script>
export default { 
  mounted(){
    ....
  }
}
</script>

その他のVue.js のライフサイクルフックは、以下の公式ドキュメントに詳しくまとめられています。

https://jp.vuejs.org/v2/api/#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3-%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%95%E3%83%83%E3%82%AF

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です