これからはじめるVue.js実践入門
posted with ヨメレバ
山田 祥寛 SBクリエイティブ 2019年08月23日頃
ディレクティブ
v-modelを利用するとvalue属性は無視される
- テキストボックスの初期値はvalue属性ではなくv-modelで紐づいた変数の値となる。
- ラジオボタン、チェックボックス、選択ボックスも同様に、checked属性やselected属性は無視される。
value属性には、文字列ではなくオブジェクトを指定することもできる
- ラジオボタン、チェックボックス、選択ボックスはvalue属性にオブジェクトを指定することができる。
- チェックボックスの場合（単一の場合でも）、変数を配列にする必要がある。
<input type="radio" v-model="radio1" v-bind:value="{id: 1, num: 100}">{{ radio1 }}
<input type="checkbox" v-model="check1" v-bind:value="{id: 1, num: 100}">
<input type="checkbox" v-model="check1" v-bind:value="{id: 2, num: 200}">
{{ check1 }}
<script>
const app = new Vue({
el: '#app',
data: {
radio1: {},
check1: [],
},
})
</script>v-modelの修飾子
- .number: number型に変換
- .trim: 前後の空白を除去
- .lazy: inputイベント（入力時）ではなくchangeイベント（入力終了時）に変更
v-ifでの表示切り替えは要素が再利用されてしまう可能性がある
<p v-if="memo===''">
<input type="text" name="hoge1">
</p>
<p v-else>
<input type="text" name="hoge2">
</p>
<!--
とすると、1つのinput要素が再利用されてしまう。
以下のようにkey属性を指定する必要がある。
-->
<p v-if="memo===''">
<input type="text" name="hoge1" key="hoge1">
</p>
<p v-else>
<input type="text" name="hoge1" key="hoge2">
</p>イベント修飾子
v-on:イベント名.修飾子="..."- .prevent: preventDefault
- .stop: stopPropagation
- .once: 一度だけ実行
- v-on:contextmenu.preventとすると右クリックでのコンテキストメニューが無効化される。
- .capture: キャプチャモードで動作
イベントは発生すると上の要素から下の要素に伝播する。（キャプチャフェーズ）
イベントの発生元に辿り着くと、今度は反対に上位要素に向かってイベントが伝播する。（バブリングフェーズ）
.captureはキャプチャフェーズで処理されるため、処理の順番を切り替えることができる。（親要素のイベントハンドラが先に実行される） - .self: その要素だけ
キー修飾子
- keyup, keydown, keypressイベントでキーを識別するために使う。
- ex)
v-on:keyup.enter="hoge" - ex)
v-on:keyup.shift.space="hoge"