进阶使用 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 节点了
- 在组件被挂载之后调用。
- beforeCreate
- 组件页面更新
- beforeUpdate
- 开始修改
- updated
- 修改完毕
- 获取更新之后的 data 已经更新之后的 真实 dom
- beforeUpdate
- 组件销毁
- beforeDestroy
- 开始销毁
- destroyed
- 销毁完毕
- beforeDestroy
四、功能实现
实现功能前需要:
- 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 {// 接输 textprops: ['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 {// 接输 textprops: ['text','delTodo','id'],methods: {//
更多推荐
基础进阶使用 Vue 组件拆分 实现经典例子:TodoMV
发布评论