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をかなりカバーできるぞ。