文章目录
- 一、需求说明
- 二、思路分析
- 三、代码实现
一、需求说明
- 拆分基础组件
- 渲染待办任务
- 添加任务
- 删除任务
- 底部合计 和 清空功能
- 持久化存储
二、思路分析
拆分基础组件
咱们可以把小黑记事本原有的结构拆成三部分内容:头部(TodoHeader)、列表(TodoMain)、底部(TodoFooter)
列表渲染
思路分析:
- 提供数据:提供在公共的父组件 App.vue
- 通过父传子,将数据传递给TodoMain
- 利用v-for进行渲染
添加功能
思路分析:
- 收集表单数据 v-model
- 监听时间 (回车+点击 都要进行添加)
- 子传父,将任务名称传递给父组件App.vue
- 父组件接受到数据后 进行添加 unshift(自己的数据自己负责)
综合案例-删除功能
思路分析:
- 监听事件(监听删除的点击)携带id
- 子传父,将删除的id传递给父组件App.vue
- 进行删除 filter (自己的数据自己负责)
底部功能及持久化存储
思路分析:
- 底部合计:父组件传递list到底部组件 —>展示合计
- 清空功能:监听事件 —> 子组件通知父组件 —>父组件清空
- 持久化存储:watch监听数据变化,持久化到本地
三、代码实现
App.vue
<template><!-- 主体区域 --><section id="app"><TodoHeader @add="handleAdd"></TodoHeader><TodoMain :list="list" @del="handelDel"></TodoMain><TodoFooter :list="list" @clear="clear"></TodoFooter></section>
</template><script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";// 渲染功能:
// 1.提供数据: 提供在公共的父组件 App.vue(因为三个子组件都需要使用)
// 2.通过父传子,将数据传递给TodoMain
// 3.利用 v-for渲染// 添加功能:
// 1.手机表单数据 v-model
// 2.监听事件(回车+点击都要添加)
// 3.子传父,讲任务名称传递给父组件 App.vue
// 4.进行添加 unshift(自己的数据自己负责)
// 5.清空文本框输入的内容
// 6.对输入的空数据 进行判断// 删除功能
// 1.监听事件(监听删除的点击) 携带id
// 2.子传父,将删除的id传递给父组件的App.vue
// 3.进行删除filter(自己的数据 自己负责)// 底部合计:父传子 传list 渲染
// 清空功能:子传父 通知父组件 → 父组件进行更新
// 持久化存储:watch深度监视list的变化 -> 往本地存储 ->进入页面优先读取本地数据
export default {data() {return {list: JSON.parse(localStorage.getItem("list")) || [{ id: 1, name: "打篮球" },{ id: 2, name: "看电影" },{ id: 3, name: "逛街" },],};},components: {TodoHeader,TodoMain,TodoFooter,},watch: {list: {deep: true,handler(newVal) {localStorage.setItem("list", JSON.stringify(newVal));},},},methods: {handleAdd(todoName) {// console.log(todoName)this.list.unshift({id: +new Date(),name: todoName,});},handelDel(id) {// console.log(id);this.list = this.list.filter((item) => item.id !== id);},clear() {this.list = [];},},
};
</script><style>
</style>
TODOHead.vue
<template><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="todoName" @keyup.enter="handleAdd"/><button class="add" @click="handleAdd">添加任务</button></header>
</template><script>
export default {data(){return {todoName:''}},methods:{handleAdd(){// console.log(this.todoName)this.$emit('add',this.todoName)this.todoName = ''}}
}
</script><style></style>
TODOMain.vue
<template><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span><label>{{ item.name }}</label><button class="destroy" @click="handleDel(item.id)"></button></div></li></ul></section>
</template><script>
export default {props: {list: {type: Array,},},methods: {handleDel(id) {this.$emit('del', id)},},
}
</script><style>
</style>
TODOFooter.vue
<template><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><span class="todo-count">合 计:<strong> {{ list.length }} </strong></span><!-- 清空 --><button class="clear-completed" @click="clear">清空任务</button></footer>
</template><script>
export default {props: {list: {type: Array,},},methods: {clear() {// 如果不需要传参的话,第二个参数可以直接不写this.$emit("clear");},},
};
</script><style>
</style>