Vueを勉強する

こんにちは！今日は、Vueの基礎について書いていきます
忘れないように備忘録です！

勉強したこと

• マスタッシュ構文（{{ }}）
• v-bind
• v-model
• Vue オプション（data / methods / computed / watch）

---

🔸 マスタッシュ構文 {{ }}

マスタッシュ構文は、Vue のテンプレート内で データを直接表示 したいときに使う基本の記法です。

✅ 使い方

<p>{{ message }}</p>

これは、data に定義された message の値が <p> に表示されます。

✅ 特徴

• 表示専用（変更不可）
• シンプルな式も使える

<p>{{ count + 1 }}</p>
<p>{{ isActive ? 'ON' : 'OFF' }}</p>

---

🔸 v-bind：属性バインディング

HTML の属性に Vue のデータを埋め込みたいときは v-bind を使います。

✅ 使い方

<img v-bind:src="imageUrl">
<!-- 短縮記法 -->
<img :src="imageUrl">

✅ よくある使い方

• クラスを動的に付与

<div :class="{ active: isActive }"></div>

• ボタンを条件付きで無効化

<button :disabled="password.length < 6">送信</button>

---

🔸 v-model：双方向データバインディング

v-model は、フォーム入力とデータをリアルタイムで同期したいときに使います。

✅ 使い方

<input v-model="username">
<p>こんにちは、{{ username }} さん！</p>

✅ 対応要素

• <input>
• <textarea>
• <select>
• カスタムコンポーネント（modelValue 経由）

---

🔸 Vue の主要オプション

Vue のコンポーネントでは以下のオプションが中核となります。

---

✅ data：データの定義

data() {
  return {
    message: 'こんにちは',
    count: 0
  };
}

---

✅ methods：関数（イベント処理など）

methods: {
  increment() {
    this.count++;
  }
}

<button @click="increment">+1</button>

---

✅ computed：算出プロパティ（キャッシュ付き）

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

methods より効率的な再計算がされるため、表示用のロジックに向いています。

---

✅ watch：変化の監視

watch: {
  count(newVal, oldVal) {
    console.log(\`countが \${oldVal} → \${newVal} に変化\`);
  }
}

---

✅ まとめ表

機能	役割・使いどころ
{{ }}	データの表示
v-bind	属性へのバインディング
v-model	入力との双方向同期
data	データの定義
methods	ユーザー操作に対するロジック
computed	再利用可能な算出値（キャッシュあり）
watch	値の変化を検知して副作用処理を行う