3週目で学ぶべきこと
- 双方向データバインディング
- 修飾子
コンポーネント間バインディング
- 入力値を
$event.target.valueで受け取る -
props,$emitを使用してデータバインディングを行う
◆ 親コンポーネント
App.vue
<template>
<!-- v-modelで入力された値を"Child.vue"に"$event"として共有する -->
<Child v-model="sample"></Child>
</template>
<script>
export default {
data() {
return {
//sample：属性名 YES：初期値
sample: "YES"
}
}
};
</script>
◆ 子コンポーネント
Child.vue
<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は、入力欄の初期値を指定する
App.vue
<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型
App.vue
<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)は、
配列をセットする
App.vue
<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を設定することで、選択可能になる
App.vue
<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は複数選択を許容する
App.vue
<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イベント後に反映させる
App.vue
<template>
<div>
<!-- lazy修飾子によって、"changeイベント"後にデータ反映 -->
<input v-model.lazy="sample">
</div>
</template>
◆ number修飾子
- ユーザの入力を
number型に自動変換させる
App.vue
<template>
<div>
<!-- number修飾子によって、入力データを"number型"に変換 -->
<input v-model.number="sample" type="number">
</div>
</template>
◆ trim修飾子
- ユーザの入力から
空白を自動でカットする -
<pre>タグは空白や改行をそのまま表示する
App.vue
<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>