在Vue3中，`todo-app-vue3`是一个基于Vue 3的Todo应用。它使用了一些组件API来构建用户界面。以下是一些详细的描述：

1. ``: 这是Vue 3中的模板标签，用于定义组件的HTML结构。在这个例子中，我们有一个包含标题、输入框和按钮的简单表单。

  

    {{ title }}

    

    Add Task

    

      {{ task.name }}

    

  

2. ``: 这是Vue 3中的脚本标签，用于编写组件的逻辑。在这个例子中，我们定义了一个名为`App`的组件，它包含了一个标题、一个输入框和一个添加任务的按钮。我们还定义了一个名为`tasks`的数据属性，用于存储任务列表。

import { ref } from 'vue'



export default {

  setup() {

    const title = ref('My Todo App')

    const inputValue = ref('')

    const tasks = ref([])



    function addTask() {

      if (inputValue.value) {

        tasks.push({ id: Date.now(), name: inputValue.value })

        inputValue.value = ''

      }

    }



    return {

      title,

      inputValue,

      tasks,

      addTask,

    }

  },

}

3. ``: 这是Vue 3中的样式标签，用于定义组件的CSS样式。在这个例子中，我们为组件添加了一些基本的样式。

.todo-app {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100vh;

}



.todo-app h1 {

  font-size: 24px;

  margin-bottom: 20px;

}



.todo-app input {

  width: 100;

  padding: 10px;

  border: 1px solid #ccc;

  margin-bottom: 10px;

}



.todo-app button {

  background-color: #007bff;

  color: white;

  padding: 10px 20px;

  border: none;

  cursor: pointer;

}



.todo-app button:hover {

  background-color: #0056b3;

}



.todo-app li {

  list-style: none;

  padding: 10px;

  border-bottom: 1px solid #ccc;

}

解锁component API