todos案例练习

todos案例

1 提供的数据和 HTML结构

• 引入todos的CSS样式 （HTML和 CSS 已经写好 我们需要改成Vue动态渲染的）

2 把数据渲染到页面上

• 根据completeed 的状态动态给li 绑定类名

  • 未完成状态：不需要样式 完成状态： 类名为 completed 编辑状态：类名为 editing

  • 如果completed 为 true 则给当前li 添加 completed
    $\ast$input type=“checkbox"中绑定v-model时=的参数为唯一（没有再绑定其他input checkbox）时，绑定input的checked属性返回布尔值，继而通过这个特性将其与v-bind:class=”{}"使用同一个参数且实现双向绑定

    点击复选框会切换双向绑定的值，该布尔值会影响所在li的class显示与否

3 把类名是 new-todo 按回车键的时候 把输入框中的数据展示到页面上

• 1.获取文本框中用户输入的数据
• 2.判断数据是否非空 如果是空的，则什么都不做 如果不是空的，则添加到数组中
• 3.添加到数组中 4. 清空文本框

4. 实现全选功能

• 4.1 当点击三角即类名为 toggle-all 的复选框的时候
  • 如果当前三角高亮 即 复选框为选中状态 让当前所有的li 为 完成状态
    • 通过双向绑定获取当前复选框的选中状态
  • 否则为未完成状态
• 4.2 当点击单个li 里面的复选框的时候 如果当前复选框选中 则当前的状态为完成状态
  • 通过双向绑定获取当前复选框选中状态 通过选中状态动态改变 completed 的值
• 4.3 如果当前所有的li 都处于完成状态 即 复选框都选中 则上面的 toggle-all 复选框选中 有一个没有选中则当前toggle-all 复选框 处于未选中状态
  $\ast$computed计算属性依赖的数据改变触发默认的get，计算属性本身改变时触发可选的get，函数中的参数val为计算属性的新值
  遍历数组，中有一个为false时返回fasle，全为true返回true

利用 $every()$简化代码

5 实现删除功能

• 给类名是 destroy 的按钮添加点击事件
• 点击当前按钮 删除当前按钮所在的 li

6 实现编辑功能

• 6.1 双击标题的时候 当前li 的类名添加 editing

  • 6.1.1 给当前标题添加双击事件
  • 6.1.2 给当前li 添加editing 添加editing后 当前隐藏的输入框会显示出来

• 6.2 输入框的默认值为当前标题

• 6.3 当用户没有编辑 的时候 按esc退出的时候 数据不发生变化

• 6.4 当用户输入内容按回车键的时候 把标题更新

• 6.5当用户失去焦点的 时候 把输入框中的标题更新
  
  $\ast$实现点击元素中子元素来控制该元素的核心是绑定点击事件后将相应数据赋值为index，判断得到对应索引号的元素
  $绑定事件时遇到两个问题$
  1.@keyon.esc在声明的函数中写逻辑 在input按esc键会失去焦点而不会触发事件 但是如图编写却可以实现 网上查找说是任务占位 具体解决方法还没找到
  2.change事件是在input中按enter键或失去焦点时触发，而change不能取代这两个事件，因为change触发还需要input里面的值发生变化

7 Clear completed

• 点击Clear completed 的时候删除所有的 已完成项

8 number item left

• 通过计算属性检测当前complete未完成的状态