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

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

文章目录

• 前言
• 一、准备
• 二、创建
• 三、Vue 生命周期介绍
• 四、功能实现
• 总结
• 完整代码

前言

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

一、准备

在 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="" 传递 text --><TodoItem v-for="todo in todos" :key="todo.id"  :text=""/></ul></div>
</template><script>
import TodoItem from './TodoItem.vue'
import axios from 'axios' //
export default {data() {return {todos: []}},components: { TodoItem },async created (){// 数据 事件 ... 关联完成// 就可以修改 data了// 在组件实例处理完所有与状态相关的选项后调用// 获取数据库 方法一：// ('localhost:3008/todos').then( res => {//   console.log(res.data)// })// 方法二const res = ('localhost:3008/todos')dos = 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 {// 接输 textprops: ['text']
}
</script><style></style>

功能二：实现数据的删除

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

methods: {// 写的都是函数，不一定都是事件，也可能写功能// 删除功能del(id){dos = dos.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="" 传递 text --><TodoItem v-for="todo in todos" :key="todo.id"  :text="" :delTodo="del" :id="todo.id"/></ul>

TodoItem.vue

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