基础进阶使用 Vue 组件拆分 实现经典例子：TodoMV

---

前言

TodoMVC是一个示例项目，它使用目前流行的不同JavaScript框架的来实现同一个Demo，来帮助你熟悉和选择最合适的前端框架。学习框架最直接有效的方式就是上手练习，接下来我们将用Vue.js来完成TodoMVC的示例。
基础进阶：使用生命周期实现
官网地址：https://todomvc.com/

---

一、准备

在 Vscode 软件在打开集成终端

• 输入 vue cerate 项目名 创建项目
• 输入cd 项目名 进入创建好的项目内
• 输入 npm run serve启动项目
• 创建 TodoDemo.vue、TodoContent.vue、TodoFoot.vue、TodoHeader.vue、TodoItem.vue
• 将 TodoDemo.vue引入 App.vue
• 将TodoItem.vue引入 TodoContent.vue
• 将TodoContent.vue、TodoFoot.vue、TodoHeader.vue引入TodoDemo.vue

二、创建

• TodoDemo.vue :

<template>
  <div>
    <h1>Todos</h1>
    <!-- 将`TodoContent.vue`、`TodoFoot.vue`、`TodoHeader.vue`引入`TodoDemo.vue` -->
    <TodoHeader />
    <TodoContent />
    <TodoFoot />
  </div>
</template>

<script>
import TodoContent from './TodoContent.vue'
import TodoFoot from './TodoFoot.vue'
import TodoHeader from './TodoHeader.vue'
export default {
   
  components: {
    TodoHeader, TodoContent, TodoFoot },

}
</script>

<style>
</style>

• TodoHeader.vue :

<template>
  <div>
    <input type="checkbox">
    <input type="text">
    <button>添加</button>
  </div>
</template>

<script>
export default {
   
}
</script>
<style>
</style>

• TodoFoot.vue:

<template>
  <div>
    <span>1 item left</span>
    <div class="type-btns">
      <button>all</button>
      <button>active</button>
      <button>completed</button>
    </div>
    <button>clear completed</button>
  </div>
</template>

<script>
export default {
   
}
</script>
<style>
</style>

• TodoItem.vue

<template>
  <li>
    <template v-if="true">
      <input type="checkbox">
      <span></span>
      <span>×</span>
    </template>
    <input v-else type="text">
  </li>
</template>

<script>
export default {
   
}
</script>
<style>
</style>

• TodoContent.vue

<template>
  <div>
    <ul>
    <!--`TodoItem.vue`引入 `TodoContent.vue`-->
      <TodoItem />
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'
export default {
   
  components: {
    TodoItem },
}
</script>
<style>
</style>

• 在 vue 项目中创建一个 后端数据：
  • 1）文件夹：data
  • 2）文件名：data.json
  • 3）使用：json-server --watch data.json -p 3008 启动后端数据

{
   
  "todos":[
    {
   
      "id": "yht67h9",
      "text": "律师函警告",
      "done": false
    },
    {
   
      "id": "yh87sdy",
      "text": "喜欢唱，跳，rep，篮球",
      "done": true
    },
    {
   
      "id": "thy52dq",
      "text": "你干嘛，哎呀",
      "done": false
    }
  ]
}

三、Vue 生命周期介绍

Vue 组件生命周期：vue组件的生命周期（组件的一生：开始、经历、结束）：vue 组件提供的一些钩子函数，这写函数会在组件的不同阶段自动执行

• 组件初始渲染
  • beforeCreate
    • 在组件实例初始化完成之后立即调用。
    • 组件的数据 事件开始关联
  • created
    • 数据 事件 … 关联完成
    • 就可以修改 data了
    • 在组件实例处理完所有与状态相关的选项后调用
  • beforeMount
    • 开始渲染
    • 在组件被挂载之前调用。
  • mounted
    • 完成渲染 可以获取到真实 dom 节点了
    • 在组件被挂载之后调用。
• 组件页面更新
  • beforeUpdate
    • 开始修改
  • updated
    • 修改完毕
    • 获取更新之后的 data 已经更新之后的 真实 dom
• 组件销毁
  • beforeDestroy
    • 开始销毁
  • destroyed
    • 销毁完毕

四、功能实现

实现功能前需要：

• 1）首先 在项目中：导入 axios npm i axios
• 2）在TodoContent.vue 导入 axios

功能一：实现后端数据的导入

• 在 TodoContent.vue 导入数据
• 使用 v-for 进行数据的传递

<template>
  <div>
    <ul v-if="todos.length">
      <!-- `TodoItem.vue`引入 `TodoContent.vue` -->
      <!-- 组件的循环也可以使用 v-for -->
      <!-- :text="todo.text" 传递 text -->
      <TodoItem v-for="todo in todos" :key="todo.id"  :text="todo.text"/>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'
import axios from 'axios' //
export default {
   
  data() {
   
    return {
   
      todos: []
    }
  },
  components: {
    TodoItem },
  async created (){
   
    // 数据 事件 ... 关联完成
    // 就可以修改 data了
    // 在组件实例处理完所有与状态相关的选项后调用

    // 获取数据库 方法一：
    // axios.get('http://localhost:3008/todos').then( res => {
   
    //   console.log(res.data)
    // })
    // 方法二
    const res = await axios.get('http://localhost:3008/todos')
    this.todos = res.data
  },}
</script>

<style>

</style>

• 将 TodoContent.vue 获取的 text 传递给 TodoItem.vue

<template>
  <li>
    <template v-if="true">
      <input type="checkbox">
      <span>{
   {
   text}}</span>
      <span>×</span>
    </template>
    <input v-else type="text">
  </li>
</template>

<script>
export default {
   
  // 接输 text
  props: ['text']
}
</script>

<style>

</style>

---

功能二：实现数据的删除

• 1）父组件(TodoContent.vue)定义好删除的功能，给子组件(TodoItem.vue)去使用

methods: {
   
    // 写的都是函数，不一定都是事件，也可能写功能

    // 删除功能
    del(id){
   
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }

• 2）父组件(TodoContent.vue)将定义好的删除功能传递给 给子组件(TodoItem.vue)
• :delTodo=“del” :id=“todo.id”

TodoContent.vue

<ul v-if="todos.length">
      <!-- `TodoItem.vue`引入 `TodoContent.vue` -->
      <!-- 组件的循环也可以使用 v-for -->
      <!-- :text="todo.text" 传递 text -->
      <TodoItem v-for="todo in todos" :key="todo.id"  :text="todo.text" :delTodo="del" :id="todo.id"/>
    </ul>

TodoItem.vue

export default {
   
  // 接输 text
  props: ['text','delTodo','id'],
  methods: {