「これからはじめるVue.js実践入門」の感想・備忘録2

これからはじめる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: その要素だけ