距离开始学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. how to use panda

    0.Introduce pandas.read_csv(filepath_or_buffer,sep=', ', dialect=None, compression='infer', doublequ ...

  2. 使用do{ } while(0)的好处

    经常看到好多程序,尤其是linux相关的,使用do{}while(0)的写法,很明显内部程序最多只能执行一次,这样写的原因是什么呢?个人认为主要的原因是,如果不使用do{}while(0),那么当一个 ...

  3. spring框架之javaconfig

    简介:随着java5的推出,加上当年基于纯java annotation的依赖注入框架Guice的出现,spring推出并持续完善了基于java代码和annotation元信息的依赖关系绑定描述方法, ...

  4. php mail 函数发送邮件

    当然你可以通过php ,在自己的站点制作一个反馈表单, 我这次的需求是用email 的形式发送数据报表,结构比较简单 // 收件人地址(此处只可以写一个地址,写多个地址,只有最后一个地址生效) $to ...

  5. Web测试介绍2一 安全测试

            安全测试是在IT软件产品的生命周期中,特别是产品开发基本完成到发布阶段,对产品进行检验以验证产品符合安全需求定义和产品质量标准的过程. 主要安全需求包括: (i) 认证 Authent ...

  6. 使用cmd打开java文件,报错:“错误,编码GBK的不可映射字符”

    今天使用EditPlus写了一个小程序,用cmd运行时报错--"错误,编码GBK的不可映射字符". 处理办法是用EditPlus另存为时,把编码格式由UTF-8改为ANSI. 然后 ...

  7. SQL中varchar和nvarchar的区别

    varchar(n)长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储大小为输入数据的字节的实际长度,而不是 n 个字节. nvar ...

  8. 解决NSTimer存在的内存泄漏的问题

    创建定时器会在一定的间隔后执行某些操作,一般大家会这样创建定时器,这样创建的定时,self对定时器有个引用,定时器对self也有个引用,造成了循环引用,最终造成了内存泄漏,如果定时器在做下载的操作就会 ...

  9. React Native windows搭建记录

    因为是window电脑上运行的,所以测试的是安卓 1: 安装jdk:jdk-8u45-windows-x64.exe 2: 配置JAVA的环境变量 在安卓的配置基础上添加一个变量ANDROID_HOM ...

  10. Bundle包的制作与使用

    一.清爽Bundle模式(在应用工程中创建Bundle的子文件夹,而非在Bundle项目中): 1.新建Bundle包 2.生成Bundle包,并拖入项目中,然后"右键显示包内容" ...