1. イベントハンドラ
html
<!-- メソッドイベントハンドラ -->
<button v-on:click="handleClick">クリック</button>
<!-- 省略記述 -->
<button @click="handleClick">クリック</button>
<!-- インラインメソッドハンドラ -->
<button v-on:click="count++"></button>
<!-- 引数（元のイベントオブジェクトとスコープ内のitem） -->
<button v-on:click="handleClick($event, item)">クリック</button>
フォーム入力の取得
（v-modelを使用するとシンプルになるが、v-onを使用することで入力内容を確認してからデータに代入するといったフック処理ができる）
html
<input v-bind:value="message" v-on:change="handleInput">
Vue.js
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js',
},
methods: {
handleInput: function (event) {
//代入前に何か処理を行う…
this.message = event.target.value
}
}
})
イベント修飾子
| 修飾子 | 作用 |
|---|---|
| .stop | event.stopPropagation()を呼ぶ |
| .prevebt | event.preventDefault()を呼ぶ |
| .capture | キャプチャモードでDOMイベントをハンドルする |
| .self | イベントがこの要素から発火した時のみハンドラを呼び出す |
| .native | コンポーネントのルート要素上のネイティブイベントをハンドルする |
| .once | 最大1回ハンドラを呼び出す |
| .passive | {passive:ture}でDOMイベントをハンドルする |
クリックイベントの修飾子
| 修飾子 | 作用 |
|---|---|
| .left | マウスの左ボタンが押された時のみハンドラを呼び出す |
| .right | マウスの右ボタン… |
| .middle | マウスの中央ボタン… |
キー修飾子
html
<input v-on:keydown.13="handler">
<!-- よく使用されるキーコードはエイリアスとして登録されている -->
<input v-on:keydown.enter="handler">
使用可能なキーコードのエイリアス
| 修飾子 | 作用 |
|---|---|
| .enter | エンターキーが押された時 |
| .tab | Tabキーが押された時 |
| .delete | Deleteキーが押された時 |
| .esc | ESCキーが押された時 |
| .space | スペースキーが押された時 |
| .up | 矢印の上キーが押された時 |
| .down | 矢印の下キーが押された時 |
| .left | 矢印の左キーが押された時 |
| .right | 矢印の右キーが押された時 |
複数つけた場合、ORを意味する
html
<input v-on:keydown.up.down.left.right="handler">
システム修飾子
| 修飾子 | 作用 |
|---|---|
| .ctrl | Ctrlキーが押されている場合 |
| .alt | Altキーが押されている場合 |
| .shift | Shiftキーが押されている場合 |
| .meta | Metaキーが押されている場合 |
2. フォーム入力バインディング（v-model）
双方向データバインディング（フォームの入力値および選択値をデータと同期させる）
インプット
html
<input v-model="message">
<p>{{ message }}</p>
Vue.js
new Vue({
el: '#app',
data: {
message: 'Hello!'
}
})
テキストエリア
html
<textarea v-model="message"></textarea>
<pre>{{ message }}</pre>
Vue.js
new Vue({
el: '#app',
data: {
message: 'Hello!'
}
})
チェックボックス（単一要素）
html
<label>
<input type="checkbox" v-model="val"> {{ val }}
</label>
Vue.js
new Vue({
el: '#app',
data: {
val: true//値の型はBoolean
}
})
チェックボックス（複数要素）
html
<label><input type="checkbox" v-model="val" value="A"> A</label>
<label><input type="checkbox" v-model="val" value="B"> B</label>
<label><input type="checkbox" v-model="val" value="C"> C</label>
<p>{{ val }}</p>
Vue.js
new Vue({
el: '#app',
data: {
val: []//値の型は配列 チェックされている値が格納される
}
})
ラジオボタン
html
<label><input type="radio" value="a" v-model="val"> A</label>
<label><input type="radio" value="b" v-model="val"> B</label>
<label><input type="radio" value="c" v-model="val"> C</label>
<p>{{ val }}</p>
Vue.js
new Vue({
el: '#app',
data: {
val: ''//値の型は文字列
}
})
セレクトボックス（単一要素）
html
<select v-model="val">
<option disabled="disabled">選択してください</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<p>{{ val }}</p>
Vue.js
new Vue({
el: '#app',
data: {
val: ''//値の型は文字列
}
})
セレクトボックス（複数要素）
html
<select v-model="val" multiple>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<p>{{ val }}</p>
Vue.js
new Vue({
el: '#app',
data: {
val: []//値の型は配列
}
})
画像ファイル
html
<input type="file" v-on:change="handleChange">
<div v-if="preview"><img v-bind:src="preview"></div>
Vue.js
new Vue({
el: '#app',
data: {
preview: ''
},
methods: {
handleChange: function (event) {
var file = event.target.files[0]
if (file && file.type.match(/^image\/(png|jpeg)$/)) {
this.preview = window.URL.createObjectURL(file)
}
}
}
})
range
html
<input type="range" v-model.number="val"> {{ val }}
Vue.js
new Vue({
el: '#app',
data: {
val: 50
}
})
v-modelの修飾子
| 修飾子 | 作用 |
|---|---|
| .lazy | inputの代わりにchangeイベントをハンドルする |
| .number | 値を数値に変換する |
| .trim | 値の余分なスペースを削除する |
3. マウント要素外（window,body）のイベントと操作
スクロールイベントの取得
Vue.js
new Vue({
el: '#app',
data: {
scrollY: 0,
timer: null
},
created: function () {
//ハンドラを登録
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy: function () {
//ハンドラを解除（コンポーネントやSPAの場合忘れずに！）
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
//違和感のない程度に200ms間隔でscrollデータを更新する例
handleScroll: function () {
if (this.timer === null) {
this.timer = setTimeout(function () {
this.scrollY = window.scrollY
clearTimeout(this.timer)
this.timer = null
}.bind(this), 200)
}
}
}
})
ライブラリで実装
html
<script src="https:cdn.jsdelivr.net/npm/smooth-scroll@12.1.5"></script>
<div id="app">
<div class="content">...</div>
<div v-on:click="scrollTop">
ページ上部へ移動
</div>
</div>
Vue.js
var scroll = new SmoothScroll()
new Vue({
el: '#app',
methods: {
scrollTop: function () {
scroll.animateScroll(0)
}
}
})
Vue.js以外からのイベントの受け取り（dispatchEventを使用してイベントを検知）
html
<div id="app">
<input id="message" v-on:input="handleInput">
<button data-update="jQuery!">jQueryからの更新</button>
</div>
Vue.js
$(document).on('click', '[data-update]', function () {
$('#message').val($(this).attr('data-update'))
//入力値を更新したらイベントを発生させる
$('#message')[0].dispatchEvent(new Event('input'))
})
new Vue({
el: '#app',
methods: {
handleInput: function (event) {
console.log(event.target.value)
}
}
})