Vue todolist 笔记 代码

目标：实现待办事项的添加

1、收集数据----定义变量task-----v-model=“task” 实现数据收集与双向绑定

2、回车确认--@keydown.enter="事件名（回调函数名）"

3、实现回车后要做的事：将当前的数据传到App.vue

涉及到子传父的技术：父自定义事件和方法, 等待子组件触发事件给方法传值

父组件：@自定义事件名=“父组件methods函数名”

子组件:this.$emit("自定义事件名",传值)----->执行父组件methods里的函数代码

4、细节

如果输入框为空却触发了回车事件-----给提示

添加任务名完后-----要清除输入框

添加数据----push----id要处理

目标：点x, 实现删除任务功能

1、给x标签绑定点击事件 由于事件多 故传id加以区分

2、把id传给App.vue（子传父）---根据id删除list中的对象

子传父 先绑定自定义事件del 其事件对应的方法名为deleteFn(在App)

然后在子组件TodoMain.vue中用$emit触发自定义事件 并把获取的形参传回去

deleteFn(theId){} 这个theId用来接收子传过来的id，不能直接用此id

需要拿这个id去list中换出那个对象的下标才行（why）

let index = this.list.findIndex(遍历数组中每个obj对象 用对象的id和要找的id进行比较 )

相等就返回当前对象的索引 有了索引就可以从数组中splice（index,1）劈死该下标的一个元素

目标：显示现在任务的总数

1、 App.vue中 – 数组list – 传给TodoFooter.vue（父传子）

2、直接在标签上显示 / 定义计算属性用于显示都可以

目标： 点击底部切换 – 点谁谁有边框 对应切换不同数据显示

1、TodoFooter.vue – 定义isSel – 值为all, yes, no其中一种，用来区分用户点了哪个，控制动态类名的显示

2、用户点击要切换isSel里保存的值----@click="isSel='all'"

3、子传父, 把类型isSel传到App.vue-----this.$emit("changeType", this.isSel)把类型字符串传给APP.vue

什么时候传呢---触发事件---在哪触发----  <ul class="filters" @click="fn"> (这里运用了事件委托)

父组件：<TodoFooter :farr="showArr" @changeType="typeFn"></TodoFooter>

定义getSel:"all" 默认显示全部 用来中转接收的类型字符

   typeFn(str){ // 'all' 'yes' 'no' // 修改类型
              this.getSel = str
     },

4、 定义计算属性showArr（在app.vue）, 决定从list里显示哪些数据给TodoMain.vue和TodoFooter.vue(父传子)

<template>
    <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @create="createFn"></TodoHeader>
    <!-- <TodoMain  :zlist="list" @del="deleteFn"></TodoMain>
    <TodoFooter :surplus="list" @changeType="typeFn" ></TodoFooter> -->
    <!--点击底部切换对应切换不同数据显示  -->
     <TodoMain  :zlist="showArr" @del="deleteFn"></TodoMain>
    <TodoFooter :surplus="showArr" @changeType="typeFn" ></TodoFooter>
  </section>
</template>

computed: {
            showArr(){
              if (this.getSel === 'yes') { // 显示已完成
                return this.list.filter(obj => obj.isDone === true)
              } else if (this.getSel === 'no') { // 显示未完成
                return this.list.filter(obj => obj.isDone === false)
              } else {
                return this.list // 全部显示
              }
            }
          },

补充：vue指令-v-on

• v-on:事件名="要执行的==少量代码=="

• v-on:事件名="methods中的函数"

• v-on:事件名="methods中的函数(实参)"

简写: @事件名="methods中的函数"

<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
<button @click="subFn">减少</button>

 目标：清空已完成

1、清空标签 – 点击事件

2、子传父 – App.vue – 一个清空方法

3、过滤未完成的 覆盖list数组 

目标：数据缓存---- 无论如何变化都保证刷新后数据还在

1、 App.vue – 侦听list数组改变 – 深度

2、覆盖式存入到本地 – 注意本地只能存入JSON字符串

3、刷新页面 – list应该默认从本地取值 – 要考虑无数据情况空数组

目标：实现全选功能

 点击全选 – 小选框受到影响

 小选框都选中(手选) – 全选自动选中状态

1、TodoHeader.vue – 计算属性 - isAll

2、 App.vue – 传入数组list – 在isAll的set里影响小选框

3、 isAll的get里统计小选框最后状态, 影响isAll – 影响全选状态

4、考虑无数据情况空数组 – 全选不应该勾选

总之，就是遍历所有的对象, 修改他们的完成状态属性的值

完整代码

码云：https://gitee.com/coding-qq/todolist.git