Vue小小项目学习

项目任务添加任务

1. 在最上面的文本框中添加新的任务。
2. 不允许添加非空数据。
3. 按 Enter 键添加任务列表中，并清空文本框。
4. 当加载页面后文本框自动获得焦点，在 input 上使用 autofocus 属性可获得。
   

项目任务显示所有未完成任务数

1. 左下角要显示未完成的任务数量。确保数字是由 标签包装的。
2. 还要将 item 单词多元化( 1 没有 s , 其他数字均有 s )： 0 items , 1 item , 2 items
   

项目任务路由状态切换（过滤不同状态数据）

根据点击的不同状态（ All / Active / Completed ），进行过滤出对应的任务，并进行样式的切换。

项目任务数据持久化

将所有任务项数据持久化到 localStorage 中,它主要是用于本地存储数据。

下载todoMVC模板：

在 Github 下载 TodoMVC 模板在：https://github.com/tastejs/todomvc-app-template

下载vue的架包并在index.html中引入vue架包

npm install vue@2.6.10

开始写Vue的代码

效果如下

数据列表渲染

出来便是这样

使用V-show=“数组的长度”，这样当下面没有元素的时候就隐藏起来



如果不想使用Div则使用template元素与 v-if结合

实现文字的回车添加的功能

监听列表的条数

监听选中的条数，并显示出来，如果为一条则显示item,其他条数则显示items

功能实现采用计算属性computed处理，

下拉框的双向绑定的功能

这里使用计算属性completed的get,set双向绑定的功能

移除任务项

点击叉号移除任务项
悬停在某个任务项上显示 X 移除按钮，可点击移除当前任务项。
分析：
X 移除按钮处添加点击事件
通过数组函数 splice 移除任务项


点击Clear completed移除任务项集体移除

双击进入编辑状态

可以查看到console.log（itm）打印的数组参数

按esc，不输入退出（取消编辑）

按enter回车更新更改的下面的值，如果没有值则删除

获取焦点(自定义指令)

刷新页面后， 通过自定义全局指令 v-quanju ，内容输入框自动获取焦点
当进入编辑状态后，通过自定义局部指令 v-jubu ，编辑窗口自动获取焦点

通过下面的点击来控制列表显示

绑定class=selected这个样式属性

数据持久化存储

功能分析
将所有任务项数据持久化到 localStorage 中，它主要是用于本地存储数据。localStorage中一般浏览器支持的
是5M大小，这个在不同的浏览器中 localStorage 会有所不同。
分析 ：可以使用 Vue 中的 watch 监听器，监听任务数组 items 一旦有改变，则使用 window.localStorage 将
它就重新保存到 localStorage

watch:{}与Vue中的data:{}同级

打开谷歌浏览器，可以查看itemsStorage下面的save方法存在浏览器的内容


这样打开页面是这样的，但是他可以存储