初识Vue-组件化开发（应用实例）

目录

一、任务管理应用

1.介绍

2.代码

1. 任务列表组件 (TaskList.vue)

2. 添加任务组件 (AddTask.vue)

3. 应用入口组件 (App.vue)

4. 主入口文件 (main.js)

 3.效果

4.总结

二、购物车

1.介绍

2.代码

1. 商品列表组件 (ProductList.vue)

2. 购物车组件 (Cart.vue)

3. 主应用组件 (App.vue)

3.总结

三、在线笔记开发应用

1.介绍

2.代码

1. 笔记列表组件 (NoteList.vue)

2. 添加/编辑笔记模态框组件 (NoteModal.vue)

3. 主应用组件 (App.vue)

3.总结

---

一、任务管理应用

1.介绍

开发一个简单的任务管理应用，其中包含任务列表和添加任务的功能。我们可以使用 Vue.js 来构建这个应用，并将其组件化。

2.代码

1. 任务列表组件 (TaskList.vue)

<template>
  <div>
    <h2>任务列表</h2>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">{
  { task }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tasks: Array // 接收任务数组
  }
}
</script>