😎

【Vue】学習開始3週目で覚える内容

2021/01/16に公開

3週目で学ぶべきこと

  • 双方向データバインディング
  • 修飾子

コンポーネント間バインディング

  • 入力値を$event.target.valueで受け取る
  • props, $emitを使用してデータバインディングを行う

◆ 親コンポーネント

<template>
  <!-- v-modelで入力された値を"Child.vue"に"$event"として共有する -->
  <Child v-model="sample"></Child>
</template>

<script>
export default {
  data() {
    return {
      //sample:属性名 YES:初期値 
      sample: "YES"
    }
  }
};
</script>

◆ 子コンポーネント

<template>
  <!-- "親コンポーネントのv-model"で入力された値を受け取る -->
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
  <!-- "子コンポーネントの入力値を"$emit"を使用して、"親コンポーネント"と共有する -->
  <!-- input:属性値  $event.target.value:入力値 -->
</template>

<script>
export default {
  //"親コンポーネント"の"v-model"入力値
  props: ["value"]
}
<script>

テキストボックスバインディング

  • p style="white-space: pre-line;"を使って、空白・改行を反映する
  • textareaタグ + v-modelでテキストボックスを作成する
  • placeholderは、入力欄の初期値を指定する
<template>
  <div>
    <!-- "textarea" + "v-model"で、入力欄作成 -->
    <textarea v-model="sample" placeholder="入力欄"></textarea>
    <!-- p style="white-space: pre-line;"で空白・改行を反映する -->
   <p style="white-space: pre-line;">{{ sample }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //sample:属性名 
      sample: ""
    }
  }
};
</script>

単体チェックボックスバインディング

  • input type="checkbox"で、チェックボックス作成
  • v-modelで指定するプロパティは、string or numberを選択するboolean型
<template>
  <div>
     <!-- "checkbox"をセットする -->
   <input type="checkbox" id="sample" v-model="sample">
  </div>
</template>

<script>
export default {
  data() {
    return {
      //string or numberを選択するboolean型 
      sample: false
    }
  }
};
</script>

複数チェックボックスバインディング

  • labelタグ:label forの属性値と、inputタグのid属性値が同じ場合、紐付けられる
  • 複数選択のチェックボックスの場合、dataプロパティ値(sample)は、配列をセットする
<template>
  <div>
     <!-- "YES"を選ぶcheckboxをセットする -->
   <input type="checkbox" id="1" value="YES" v-model="sample">
    <label for="1">YES</label>
     <!-- "NO"を選ぶcheckboxをセットする -->
     <input type="checkbox" id="1" value="NO" v-model="sample">
    <label for="1">NO</label>
   <!-- "checkboxで選択した値"を出力する -->
    <p>{{sample}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //checkboxで選択した値を"配列"として受け取る
      sample: []
    }
  }
};
</script>

ラジオボタンバインディング

  • inputタグのid属性値label forの属性値は同じ値をセットすることで紐付ける
  • input type="radio"ラジオボタンを作成する
  • 各々の選択肢に同じv-modelを設定することで、選択可能になる
<template>
  <div>
     <!-- "YES"を選択するラジオボタンをセットする -->
    <input type="radio" id="1" value="YES" v-model="sample">
     <label for="1">YES</label>
   <!-- "NO"を選択するラジオボタンをセットする -->
     <input type="radio" id="2" value="NO" v-model="sample">
     <label for="2">NO</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //sample:属性名 YES:初期値 
      sample: "YES"
    }
  }
};
</script>

セレクトボックスバインディング

  • v-for="引数 in 配列"でレンダリングを実施する
  • multiple複数選択を許容する
<template>
  <div>
     <!-- セレクトボックスの入力値とdataプロパティ属性値を"v-model"で関連付ける -->
     <!-- "multiple"は、複数選択を許可する -->
  <select v-model="sample" multiple>
   <!-- v-forディレクティブで"リストレンダリング"を実施し、keyに"sample"をセットする -->
  <option v-for="sample in samples" :key="sample">{{sample}}</option>
  </select>
     <!-- セレクトボックスで選択した内容を出力する -->
   <p>{{sample}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //v-forディレクティブで使用する"配列"を作成する 
      samples: ["犬", "ネコ", "ウサギ"],
      //セレクトボックスの"初期値"を設定する
      sample: "犬"
    }
  }
};
</script>

修飾子

◆ lazy修飾子

  • changeイベント後に、データを反映させる
  • デフォルトでは、v-modelはinputイベント後に反映させる
<template>
  <div>
     <!-- lazy修飾子によって、"changeイベント"後にデータ反映 -->
    <input v-model.lazy="sample">
  </div>
</template>

◆ number修飾子

  • ユーザの入力をnumber型に自動変換させる
<template>
  <div>
     <!-- number修飾子によって、入力データを"number型"に変換 -->
    <input v-model.number="sample" type="number">
  </div>
</template>

◆ trim修飾子

  • ユーザの入力から空白を自動でカットする
  • <pre>タグは空白や改行をそのまま表示する
<template>
  <div>
     <!-- trim修飾子によって、入力データの空白を自動でカットする -->
    <input v-model.trim="sample" type="text">
     <!-- "preタグ"によって、trim修飾子の"空白カット"をそのまま表示する -->
   <pre>{{ sample }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //sample:属性名 default:値
      sample: "default"
    }
  }
};
</script>

同シリーズ

参考文献

Discussion