Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Vue.js 入門 vol.4 イベントハンドラ

参考サイト

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

イベントの購読(subscribe)

  • v-on ディレクティブ
<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

メソッドイベントハンドラ

  • v-onには、メソッド名の指定も可能。
<div id="example-2">
  <!-- `greet` は、あらかじめ定義したメソッドの名前 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  methods: {
    greet: function(event){
      alert('Hello ' + this.name + '!')
      if (event){ // eventは、ネイティブDOMイベント
        alert(event.target.tagName)
      }
    }
  }
})

example2.greet()

インラインメソッドハンドラ

  • inline javascript方式で、メソッドを指定可能。
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
  • オリジナルのDOMイベントを参照するときは、$eventを使うことで、参照できる。
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
methods: {
  warn: function (message, event) {
    // ネイティブイベントを参照しています
    if (event) event.preventDefault()
    alert(message)
  }
}

イベント修飾子

  • イベント修飾子の種類は以下の通り。
<!-- クリックイベントの伝搬が止まります -->
<a v-on:click.stop="doThis"></a>
<!-- submit イベントによってページがリロードされません -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾子は繋げることができます -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 値を指定せず、修飾子だけ利用することもできます -->
<form v-on:submit.prevent></form>
<!-- イベントリスナーを追加するときにキャプチャモードで使います -->
<!-- 言い換えれば、内部要素を対象とするイベントは、その要素によって処理される前にここで処理されます -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target が要素自身のときだけ、ハンドラが呼び出されます -->
<!-- 言い換えると子要素のときは呼び出されません -->
<div v-on:click.self="doThat">...</div>

<!-- 最大1回、クリックイベントはトリガーされます -->
<a v-on:click.once="doThis"></a>

キー修飾子

  • キーボードイベントのsubscribe
<!-- keyCode が13のときだけ、vm.submit() が呼ばれます  -->
<input v-on:keyup.13="submit">
<!-- 上記と同じです -->
<input v-on:keyup.enter="submit">
<!-- 省略記法も同様に動作します -->
<input @keyup.enter="submit">

.enter
.tab
.delete (“Delete” と “Backspace” キー両方をキャプチャします)
.esc
.space
.up
.down
.left
.right
  • カスタムキーも可能。
// v-on:keyup.f1 を可能にします
Vue.config.keyCodes.f1 = 112

修飾子キー

  • キーボードの修飾子
.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
  • マウスボタンの修飾子
.left
.right
.middle

まとめ

  • v-onでclick, キーボード操作、マウス操作などのeventをかなりカバーできるぞ。