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

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

ディレクティブ

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"

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。