距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用。

使用vuex

纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下。

几天之后。。。

改造已完成,在这个仓库的todolist-vuex分支下面,现在你可以通过几个npm命令,然后看localhost:8080端口来查看应用了,蜜汁微笑:)

主要改变是通过单文件组件把应用的各组件的<template>,<script>,<style>放在一个单独的文件之中,将应用的状态放在vuex中。

这个应用的主要功能就是把一天要做的事情记录下来,还实现了:

  1. 标记完成事件
  2. 删除已完成事件
  3. 各种排序
  4. 仅显示未完成的项目
  5. 本地保存

截图看这里

用时一周,14次commits,把心中的构想基本实现了。详情请看:这里

整个过程下来,收获还是很多的,

1.对mvvm有了进一步的理解,

2.对css布局有了更多的了解。

3.更进一步理解了Vue的事件和组件机制。这些机制将应用解耦,每一部分都隔离出来。

4.在一步步优化代码的过程中,对模型这里是todos的优化,对模板的优化积累了经验。

5.学会使用git;

一旦你开始一个小项目,你的学习方式就变成了问题驱动的学习,之前感觉自己OK的或者忽略了的,会在这个过程中一点一点暴露出来。解决了一个问题或者优化了一个结构会收获一种满足,同时也巩固了自己的知识。

这里主要用到Vue指南里的基础篇的知识,涉及进阶篇中的过渡效果,适合初学者巩固基础知识,欢迎fork和拍砖;

Vue.js基础篇实战--一个ToDoList小应用的更多相关文章

  1. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  2. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  3. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  4. JS基础篇--sort()方法的用法,参数以及排序原理

    JS基础篇--sort()方法的用法,参数以及排序原理   sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点.语法:arrayObject.sort( ...

  5. Vue.js基础2

    声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div ...

  6. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  7. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

  8. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  9. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

随机推荐

  1. WPF绑定到集合

    什么是集合视图? 集合视图是位于绑定源集合顶部的一层,您可以通过它使用排序.筛选和分组查询来导航和显示源集合,而无需更改基础源集合本身.集合视图还维护着一个指向集合中的当前项的指针.如果源集合实现了 ...

  2. 【挖财工作笔记】idea使用指南

    一 安装破解 破解选择服务器,然后选择地址:http://www.iteblog.com/idea/key.php  http://idea.iteblog.com/key.php  http://i ...

  3. 每天一个设计模式-4 单例模式(Singleton)

    每天一个设计模式-4 单例模式(Singleton) 1.实际生活的例子 有一天,你的自行车的某个螺丝钉松了,修车铺离你家比较远,而附近的五金店有卖扳手:因此,你决定去五金店买一个扳手,自己把螺丝钉固 ...

  4. iOS之17个提升iOS开发效率的必用工具

    时间就是金钱.编码效率的提升意味着更多的收入.可是当我们的开发技巧已经到达一定高度时,如何让开发效率更上一层楼呢?答案就是使用开发工具!在这篇文章中,我会向你介绍一些帮助我提升编码速度和工作效率的工具 ...

  5. 在终端terminal运行ReactNative程序经常出现的问题

    各种问题汇总: 1.Unable to resolve modules lodash  (这里举例lodash,这个lodash也可以是别的.意思就是缺少当前模块,所以需要安装) npm instal ...

  6. Eclipse背景颜色设置(设置成豆沙绿色保护眼睛,码农保护色)

    菜单栏windows–>preferences–>general–>editors–>text editors中在Appearance color options下修改 bac ...

  7. iOS 性能调试

    性能调优的方式: 1.通过专门的性能调优工具 2.通过代码优化 1. 性能调优工具: 下面针对iOS的性能调优工具进行一个介绍: 1.1 静态分析工具–Analyze 相信iOS开发者在App进行Bu ...

  8. 运行Maven工程总是报错:No goals have been specified for this build

    Error info: No goals have been specified for this build. You must specify a valid lifecycle phase or ...

  9. 1-web应用之LAMP源码环境搭建

    目录 一.LAMP环境的介绍     1.LAMP环境的重要性     2.LAMP组件介绍 二.Apache源码安装     1.下载Apache以及相关依赖包     2.安装Apache以及相关 ...

  10. Spring MVC之@RequestMapping 详解

    (转自:http://blog.csdn.net/walkerjong/article/details/7994326) 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.P ...