Vue怎么封装一个TodoList

这篇文章主要介绍Vue怎么封装一个TodoList，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联为企业级客户提高一站式互联网+设计服务，主要包括网站建设、成都做网站、app软件开发公司、微信小程序、宣传片制作、LOGO设计等，帮助客户快速提升营销能力和企业形象，创新互联各部门都有经验丰富的经验，可以确保每一个作品的质量和创作周期，同时每年都有很多新员工加入，为我们带来大量新的创意。 

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段.

浏览器本地缓冲:

• 前提： 一般我们定义的变量，或者用Vuex保存的数据， 当浏览器进行了一个刷新 那么这个数据就会丢失, 这样就做不出历史记录的效果了， 但是， 使用浏览器缓存就可以帮助我们解决这个问题…

• 浏览器缓存分为二种 sessionStorage 和 localStorage， 二种原型链分别如下:

可以看得出， 他们的原型链上基本都是一样的， 唯一的区别在于

• localStorage 作用于本地缓存， 时间是持久的，除非手动去删除， 或者清空， 不然一直都存在浏览器中

• sessionStorage 作用与会话缓存， 生命周期只存在于本次打开浏览器会话， 当完成的关闭浏览器，那么信息就会丢失， 而仅仅刷新页面， 数据仍然保存。

本次实例，使用的是 sessionStorage， 并对此进行了一次小封装.

const  storage = {
	set(key, value){
		window.sessionStorage.setItem(key, JSON.stringify(value));
	},
	get(key){
		return JSON.parse(window.sessionStorage.getItem(key));
	},
	remove(key){
		window.sessionStorage.removeItem(key);
	}}export default storage;

实例代码:

		
		
已经完成...{{dolist.length - dolistNumber}}
		
			
				
					
					{{item.title}}				
				X
			

		
	

以上是“Vue怎么封装一个TodoList”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！