Vue.js基础篇实战--一个ToDoList小应用
2016-12-11 22:30
579 查看
作者:imgss 出处:http://www.cnblogs.com/imgss 欢迎转载,也请保留这段声明。谢谢!
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用。
2017.2.25搬到个人主页上:=>
使用vuex
纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下。
几天之后。。。
改造已完成,在这个仓库的todolist-vuex分支下面,现在你可以通过几个npm命令,然后看localhost:8080端口来查看应用了,蜜汁微笑:)
主要改变是通过单文件组件把应用的各组件的<template>,<script>,<style>放在一个单独的文件之中,将应用的状态放在vuex中。
这个应用的主要功能就是把一天要做的事情记录下来,还实现了:
- 标记完成事件
- 删除已完成事件
- 各种排序
- 仅显示未完成的项目
- 本地保存
截图看这里
用时一周,14次commits,把心中的构想基本实现了。详情请看:这里
整个过程下来,收获还是很多的,
1.对mvvm有了进一步的理解,
2.对css布局有了更多的了解。
3.更进一步理解了Vue的事件和组件机制。这些机制将应用解耦,每一部分都隔离出来。
4.在一步步优化代码的过程中,对模型这里是todos的优化,对模板的优化积累了经验。
5.学会使用git;
一旦你开始一个小项目,你的学习方式就变成了问题驱动的学习,之前感觉自己OK的或者忽略了的,会在这个过程中一点一点暴露出来。解决了一个问题或者优化了一个结构会收获一种满足,同时也巩固了自己的知识。
这里主要用到Vue指南里的基础篇的知识,涉及进阶篇中的过渡效果,适合初学者巩固基础知识,欢迎fork和拍砖;
相关文章推荐
- vue2.0构建单页应用最佳实战案例 vue.js
- 用Go+Vue.js快速搭建一个Web应用(初级demo)
- webpack+Vue.js+vue-router的一个简单实例应用
- vue2.0构建单页应用最佳实战案例 vue.js
- 使用Vue.js创建一个时间跟踪的单页应用
- flask + vue.js 实现简单todolist应用
- Vue.js教程: 构建一个预渲染SEO友好的应用示例
- 【深入浅出Node.js系列八】一个基于Node.js完整的Web应用实战
- 使用Vue.js创建一个时间跟踪的单页应用
- Js对一个对象应用滤镜的几种方法【整理】
- js实战之-求一个字符串中最多出现的字符数
- js中的showModalDialog的实战应用
- JS实战应用 之 JS控制FileUpload控件上传的文件类型和清空控件选中的文件
- JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应
- 图书推荐——疯狂Ajax讲义(第3版)——jQueryExt JSPrototypeDWR企业应用前端开发实战
- 为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务
- JSSIP源码简介-关于SIP协议使用的一个JavaScript库/JS在通讯中的应用
- HTML+CSS+JS 开发 Firefox OS 应用编程实战
- 为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务
- js实现双向链表互联网机顶盒实战应用实现