Vue.jsメモ

概要

Vue.jsに関する個人的メモ

v-model

1. テキスト入力（text / textarea）

文字列データとして双方向バインディングされます。

<!-- 単一行テキスト -->
<input v-model="username" type="text" placeholder="ユーザー名" />

<!-- 複数行テキスト -->
<textarea v-model="description" rows="4"></textarea>

<!-- パスワード -->
<input v-model="password" type="password" />

<!-- メール（HTML5バリデーション） -->
<input v-model="email" type="email" />

2. チェックボックス（checkbox）

単一チェックボックスはboolean、複数チェックボックスは配列にバインドされます。 

<!-- 単一チェックボックス（boolean） -->
<input v-model="agreed" type="checkbox" id="agree" />
<label for="agree">利用規約に同意する</label>
<!-- agreed: true or false -->

<!-- 複数チェックボックス（配列） -->
<div>
  <input v-model="selectedHobbies" type="checkbox" value="reading" id="reading" />
  <label for="reading">読書</label>

  <input v-model="selectedHobbies" type="checkbox" value="sports" id="sports" />
  <label for="sports">スポーツ</label>

  <input v-model="selectedHobbies" type="checkbox" value="music" id="music" />
  <label for="music">音楽</label>
</div>
<!-- selectedHobbies: ['reading', 'sports'] など -->

3. ラジオボタン（radio）

選択された値のvalue属性がバインドされます。 

<div>
  <input v-model="gender" type="radio" value="male" id="male" />
  <label for="male">男性</label>

  <input v-model="gender" type="radio" value="female" id="female" />
  <label for="female">女性</label>

  <input v-model="gender" type="radio" value="other" id="other" />
  <label for="other">その他</label>
</div>
<!-- gender: 'male', 'female', 'other' のいずれか -->

4. セレクトボックス（select）

単一選択は文字列、複数選択（multiple）は配列にバインドされます。 

<!-- 単一選択 -->
<select v-model="selectedCountry">
  <option disabled value="">国を選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

<!-- 複数選択 -->
<select v-model="selectedLanguages" multiple>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="go">Go</option>
</select>
<!-- selectedLanguages: ['js', 'py'] など -->

5. 修飾子（Modifiers）

v-modelには便利な修飾子が用意されています。

  • .lazy - inputイベントではなくchangeイベントで更新（入力完了時に同期）
  • .number - 入力を自動的に数値型に変換
  • .trim - 入力の前後の空白を自動的に削除 
<!-- .lazy: フォーカスが外れたときに更新 -->
<input v-model.lazy="message" type="text" />

<!-- .number: 数値型に自動変換 -->
<input v-model.number="age" type="number" />

<!-- .trim: 前後の空白を削除 -->
<input v-model.trim="username" type="text" />

<!-- 修飾子は複数併用可能 -->
<input v-model.lazy.trim="email" type="email" />

6. ベストプラクティス

  • 初期値の設定: data()で必ず初期値を設定（undefinedを避ける）
  • type属性の指定: HTML5のtype属性を活用してバリデーションを強化
  • アクセシビリティ: label要素とid属性を適切に紐付ける
  • number型の注意: .number修飾子はtype="number"と併用すると効果的
  • 配列の初期化: チェックボックス（複数）やセレクト（複数）は空配列[]で初期化

7. よくあるパターン

<!-- パターン1: 検索フォーム -->
<input v-model.trim="searchQuery" type="search" placeholder="検索..." />

<!-- パターン2: 年齢入力（数値、1-120の範囲） -->
<input v-model.number="age" type="number" min="1" max="120" />

<!-- パターン3: タグ選択（複数チェックボックス） -->
<label><input v-model="tags" type="checkbox" value="tech" /> Tech</label>
<label><input v-model="tags" type="checkbox" value="news" /> News</label>

<!-- パターン4: 優先度選択（ラジオボタン） -->
<label><input v-model="priority" type="radio" value="high" /> 高</label>
<label><input v-model="priority" type="radio" value="low" /> 低</label>