はじめての Vue アプリの完成

以上で完成です。簡単ではありますが、リアクティビティの概念やデータバインディングについての基礎は学べたと思います。

<script setup>
import { ref } from 'vue'
const msg = ref("")
const todos = ref(["卵", "キャベツ", "にんじん"]);
const addedItem = () => {
  todos.value.push(msg.value)
  msg.value = ""
}
</script>

<template>
  <h1>買い物アプリ</h1>
  <ul>
    <li v-for="todo in todos">
    {{todo}}
    </li>
  </ul>
  <input v-model="msg" />
  <button :disabled="msg===''" @click="addedItem">追加</button>
</template>

<style scoped>
  ul {
    padding: 0;
  }
  li {
    list-style: none;
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 4px 0;
    font-size: 0.8rem;
    font-weight: bold;
    background-color: papayawhip;
  }
</style>

<style>要素で見た目を追加してみました。scoped属性は、このコンポーネントのみ有効であって、他のスタイルには影響を与えないようにしてくれます。 サンプルは以上です、色々と試してみてください。

実際のコード例です。