vue.jsの基礎勉強5-イベントハンドラーについて-

はじめに

今回はv-onを用いたイベントハンドラーの処理について勉強した。

See the Pen イベントハンドラ by KKZoo (@kkzoo) on CodePen.

修飾子について

修飾子を用いることで様々な制限やキー入力を行なった際の処理を追加することができる様になる。

onceについて

onceをつけることで、methodsの処理を最初の1回だけ行い以降の動作を制限することができる。

      <p>{{ randomNumber }}</p>
      <button v-on:click.once="clickRandomNumber">click</button>

  data: {
    randomNumber: ''
  },
  methods: {
    clickRandomNumber: function(){
      this.randomNumber = Math.random()
    }
  }

keyupについて

keyupをつけることで、キーコードを入力した時の処理を設定することができる。

      <!-- esc か space か ↑ ボタンを押すことで反応 -->
      <input type="text" v-on:keyup.27.space.up="clear" v-model="keyMessage"></input>
      <p>{{ keyMessage }}</p>

  data: {
    keyMessage: 'Hello Vue.js'
  },
  methods: {
    clear: function(){
      this.keyMessage = ''
    }
  }

• Vue.jsのkeyupのキーコード

システム修飾子について

以下の修飾子を指定することで、夫々のキー + 何かを押さないと反応しない様に設定できる

1. .ctrl
2. .alt
3. .shift
4. .meta

      <!-- ctrl + cで反応 -->
      <input type="text" v-on:keyup.ctrl.67="clear" v-model="keyMessage"></input>
      <p>{{ keyMessage }}</p>

      <!-- shift + clickで反応 -->
      <div type v-on:click.shift="clickAlert">Click Me!</div>

  methods: {
    clickAlert: function(){
      alert("shift" + "+" + "click")
    }
  }

• システム修飾子一覧

v-onの省略記法

v-onには省略記法がありv-on:click=""とするところを@click=""と書くことができる。

      <!-- 基本構文 -->
      <div type v-on:click.shift="clickAlert">Click Me! perfect</div>

      <!-- 省略構文 -->
      <div type @click.shift="clickAlert">Click Me! abbrev</div>

終わりに

v-onを<div>の様な入力タグ以外にも使えるという発想が無かったため新たな発見ができた。

また、keyupやシステム修飾子はウェブアプリを作る際に重要な知識になるのかなと感じた。