Vue.js入門 - コンポーネント

// カウンターコンポーネント
const CounterComponent = {
  template: `
    <div class="counter">
      <div class="counter-title">カウンター</div>
      <div class="counter-value">{{ count }}</div>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
    </div>
  `,
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}

// メッセージコンポーネント
const MessageComponent = {
  template: `
    <div class="counter">
      <div class="counter-title">メッセージ</div>
      <input v-model="message" placeholder="メッセージを入力">
      <div class="counter-value">{{ message }}</div>
    </div>
  `,
  data() {
    return {
      message: ''
    }
  }
}

// リストコンポーネント
const ListComponent = {
  template: `
    <div class="counter">
      <div class="counter-title">リスト</div>
      <ul>
        <li v-for="item in items" :key="item.id">
          {{ item.text }}
        </li>
      </ul>
      <button @click="addItem">アイテムを追加</button>
    </div>
  `,
  data() {
    return {
      items: [
        { id: 1, text: 'アイテム1' },
        { id: 2, text: 'アイテム2' }
      ]
    }
  },
  methods: {
    addItem() {
      const newId = this.items.length + 1
      this.items.push({ id: newId, text: `アイテム${newId}` })
    }
  }
}

// アプリケーションの作成
const app = Vue.createApp({
  components: {
    'counter-component': CounterComponent,
    'message-component': MessageComponent,
    'list-component': ListComponent
  }
})

// マウント
app.mount('#app')