vue-todolist

1.开始前准备

1.1 把项目下载到本地

先在命令行窗口跳转到我们想存项目的路径，我的是
cd D:\Vue\vue
在哪个路径下git clone，项目就会下载到哪个路径下
git clone -b test https://github.com/goodmornight/vue-todolist.git

1.2 相关包下载

npm install

1.3 本地运行

npm run serve

1.4 运行效果

1.5 要求

• 操作要求：
  • 1.将 vue-todolist 项目中的 test 分支下载至本地
    • git clone -b test https://github.com/goodmornight/vue-todolist.git
    • 这一步下载下来的就是test分支
  • 2.以自己的名字拼音创建新的分支，并在新建分支下开发
    • git checkout -b lqy
    • 要是之前没有lqy这个分支的话它会自动创建这个分支并且自动跳转到这个分支下
  • 3.开发功能
    • 输入框内输入备忘，回车添加备忘
    • 删除备忘
    • 一键删除全部备忘
    • 显示剩余未完成备忘数
  • 4.开发完成后提交至本地仓库即可
  • 5.上面3个步骤完成后，将代码拷进负责人U盘中

2.要点

2.1.vue v-for 出来的元素添加点击事件 怎么控制被点击的当前元素，而不是全部

• 问题：一开始，点击任意一个左边的小圆圈，所有的小圆文字都会被渲染成中间有一道杠的样子
• 原因：因为用v-for创建出来的所有li标签下的label的class属性都被这个单击事件变成了相同的值
• 解决方案：在add函数执行的时候，给list数组中不单单传入一个value值，而是传入一个对象：

add:function(){
      this.list.push({
        value: this.inputValue,
        completedd: false
      });
      this.inputValue="" //在输入框输入完备忘事件，点击回车之后把输入框显示的文字清空
    }

• 这样的话我们在点击每一条单一备忘事件时，绑定的单击事件就可以只控制这个特定的事件item它独有的completedd的布尔值，并用这个布尔值来控制label的class属性值：
  • <label :class="{ 'completed' : item.completedd }">{{ item.value }}</label>
  • 注：若果item.completedd布尔值为true就把类名赋值成completed，是false就不用这个类
• 【注意】：一般建议不要用 index 作为key值，而是用这个元素唯一标识来作为key值。参考

2.2 文字中间画条杠是用这个指令渲染的：

text-decoration: line-through

3.具体代码操作

只修改了VueToDoList.vue这个文件，因为样式他都在/design/index.css里面写好了，而且写VueToDoList.vue的时候一定要参考它index.css里面用的类名
代码在这VueToDoList.vue