Vue.js、Vue.jsのデータバインディングやテンプレート構文を解説

<div id="app">
  <p>{{ message }}</p>
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'こんにちは、Vue.js!'
    };
  }
});
app.mount('#app');

<div id="app">
  <a v-bind:href="url">リンク</a>
</div>

const app = Vue.createApp({
  data() {
    return {
      url: 'https://example.com'
    };
  }
});
app.mount('#app');

<a :href="url">リンク</a>

<div id="app">
  <button v-on:click="greet">クリックして挨拶</button>
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'こんにちは！'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});
app.mount('#app');

<button @click="greet">クリックして挨拶</button>

<form @submit.prevent="submitForm">
  <button type="submit">送信</button>
</form>

<div @click="parentClick">
  <button @click.stop="childClick">子要素をクリック</button>
</div>

<div id="app">
  <p v-if="status === 'loading'">読み込み中...</p>
  <p v-else-if="status === 'success'">データ取得成功！</p>
  <p v-else>エラーが発生しました。</p>
</div>

const app = Vue.createApp({
  data() {
    return {
      status: 'loading'
    };
  }
});
app.mount('#app');

<div id="app">
  <p v-show="isVisible">このテキストは表示されます。</p>
  <button @click="isVisible = !isVisible">表示/非表示を切り替える</button>
</div>

const app = Vue.createApp({
  data() {
    return {
      isVisible: true
    };
  }
});
app.mount('#app');

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'アイテム1' },
        { id: 2, name: 'アイテム2' },
        { id: 3, name: 'アイテム3' }
      ]
    };
  }
});
app.mount('#app');

<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>

<div id="app">
  <ul>
    <li v-for="category in categories" :key="category.id">
      {{ category.name }}
      <ul>
        <li v-for="subItem in category.items" :key="subItem.id">
          {{ subItem.name }}
        </li>
      </ul>
    </li>
  </ul>
</div>

const app = Vue.createApp({
  data() {
    return {
      categories: [
        {
          id: 1,
          name: 'カテゴリ1',
          items: [
            { id: 101, name: 'サブアイテム1-1' },
            { id: 102, name: 'サブアイテム1-2' }
          ]
        },
        {
          id: 2,
          name: 'カテゴリ2',
          items: [
            { id: 201, name: 'サブアイテム2-1' },
            { id: 202, name: 'サブアイテム2-2' }
          ]
        }
      ]
    };
  }
});
app.mount('#app');

<p>{{ message.toUpperCase() }}</p>

<p>{{ formatMessage(message) }}</p>

const app = Vue.createApp({
  data() {
    return {
      message: 'こんにちは、Vue.js!'
    };
  },
  methods: {
    formatMessage(msg) {
      return msg.toUpperCase();
    }
  }
});
app.mount('#app');

<p>{{ formattedMessage }}</p>

const app = Vue.createApp({
  data() {
    return {
      message: 'こんにちは、Vue.js!'
    };
  },
  computed: {
    formattedMessage() {
      return this.message.toUpperCase();
    }
  }
});
app.mount('#app');

<div id="app">
  <h1>商品リスト</h1>
  <ul>
    <li v-for="product in filteredProducts" :key="product.id">
      {{ product.name }} - {{ product.price }}円
    </li>
  </ul>
</div>

const app = Vue.createApp({
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 1000 },
        { id: 2, name: '商品B', price: 2000 },
        { id: 3, name: '商品C', price: 1500 }
      ],
      maxPrice: 1800
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => product.price <= this.maxPrice);
    }
  }
});
app.mount('#app');

<ul>
  <!-- ❌ 誤り: key属性が指定されていない -->
  <li v-for="item in items">{{ item.name }}</li>

  <!-- ✅ 正しいコード: key属性を設定 -->
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

<form>
  <!-- ❌ 誤り: prevent修飾子がないため、フォーム送信でページがリロードされる -->
  <button @submit="handleSubmit">送信</button>

  <!-- ✅ 正しいコード: prevent修飾子を使ってデフォルト動作を防ぐ -->
  <button @submit.prevent="handleSubmit">送信</button>
</form>

<div>
  <!-- ❌ 誤り: テンプレート内で複雑な式を記述 -->
  <p>{{ items.filter(item => item.price > 1000).map(item => item.name).join(', ') }}</p>

  <!-- ✅ 正しいコード: 算出プロパティを使用して簡潔に -->
  <p>{{ expensiveItemNames }}</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        items: [
          { id: 1, name: '商品A', price: 500 },
          { id: 2, name: '商品B', price: 1500 }
        ]
      };
    },
    computed: {
      expensiveItemNames() {
        return this.items.filter(item => item.price > 1000).map(item => item.name).join(', ');
      }
    }
  });
</script>

<ul>
  <!-- ❌ 誤り: v-ifとv-forを同時に使う -->
  <li v-for="item in items" v-if="item.visible">{{ item.name }}</li>

  <!-- ✅ 正しいコード: 算出プロパティで条件付きリストを用意 -->
  <li v-for="item in visibleItems" :key="item.id">{{ item.name }}</li>
</ul>

<script>
  const app = Vue.createApp({
    data() {
      return {
        items: [
          { id: 1, name: '商品A', visible: true },
          { id: 2, name: '商品B', visible: false }
        ]
      };
    },
    computed: {
      visibleItems() {
        return this.items.filter(item => item.visible);
      }
    }
  });
</script>