todolist案例仿写

1.案例

在已经有html和css的基础上，通过vue来实现具体功能。

准备采用：vue + vuex +webpack + es6 + localstorge

官网上的例子是用了vue-router的，我们这里不准备使用。

1.1.分析
1.1.1.数据项
准备两个数据项。放在vuex中，供组件去使用。
todos：[{text:”运行一下vue-cli”,done:false},{text:”上传自己的npm包”,done:false}]
Visibilty:，筛选的条件 :all completed active

1.1.2.功能
显示todos数据
添加一条todos数据
删除todos数据
修改某一项的状态：完成，没有完成之间切换
批量修改状态:全部完成，全部未完成
统计没有完成的数量
批量删除已经完成的
三种状态的筛选
编辑todos的内容
本地存储

1.1.3.组件

在脚手架工具的基础上，额外设置两个组件。

1.2.通过脚手架创建项目
1.2.1.Vue create vuetodos初始化
通过命令vue create vuetodos创建一个项目。

设置一项选项：注意，不需要路由

1.2.2.安装vuex

1.2.3.运行起来

1.3.具体实现
1.3.1.把静态资源加入app.vue中

todo-mvc.css拷贝到 src/assets/目录下，

把app.vue中的template的内容用todo.html的内容来代替。

把app.vue中的样式去掉。
通过r