vue.js框架制作TodoList功能

提示：下面分享如何用vue.js构建一个TodoList的项目功能。虽然项目不大但是涵盖的知识点很丰富概括如下：
1、组件的使用
2、组件之间的通信（父向子、子向父、兄弟之间的通信）
3、插槽的使用
4、数据化本地存储
5、计算属性的运用 computed
6、深度监视的运用 watch:{deep:true,handler:function(){}}

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端界面？

示例：

主要功能：1、输入框可以添加需要添加的任务
2、点击删除可以删除本地数据，点击删除已完成的任务，可以删除当前已经over的任务
3、全选按钮选中全部。

二、小白鸽总结

总结

案例非常适合小白初学vue的练习Demo
1、计算属性和深度监听，刚开始用的时候，不是很熟，所以这过程中总是很多时候在调试

计算属性:字面上意思 计算得到的（属性）数据，即我们需要的有的数据需要通过计算得到一个值，这时可以用到计算属性。

例如：项目之中需要用到 已经完成的任务数量，当时忘记了计算属性，所以最终的bug是前端界面不能够实时的实现数据的更新。 即 我们的数据在内存中已经改变，但是前端界面还是旧的数据。

computed:{
//计算属性
	finshedThings:{
		get(){
			return  things.reduce((index,value)=>{
			return index=index+(value.done?1:0)
				})
			}
		}
}

当页面数据改变时，计算属性就会运行，所以能够实现数据的及时更新。这算是计算属性的特点吧。
上述到此结束。
讲一下，深度监视，再讲之前，先讲一下我遭遇的问题。

实现数据化本地存储所遇到的问题，要用监视 watch。我的这个案例好像不用深度监视也可以，深度监视，可以监听到对象的内部属性。

watch{
	things:{
			handler:localstrogeSave.saveData,
			deep:true
			
			
		}
}

上述监听things的数据，只要things的数据发生变化就会触发handler这个函数。deep为true时，表示监听到对象内部属性发生变化也可以监听的到。
例如 things:[
{thingName:“去健身”,done:false},
{thingName:“去唱个歌”,done:false}
]
当内部的属性发生变化也可以监听的到。

以上内容暂时就写这些。。。组件之间通信、以及插槽，自己看一下官方说明，易懂，这里就不说了。