Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用。
使用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和拍砖;
Vue.js基础篇实战--一个ToDoList小应用的更多相关文章
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- 前端面试题目汇总摘录(JS 基础篇)
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- JS基础篇--sort()方法的用法,参数以及排序原理
JS基础篇--sort()方法的用法,参数以及排序原理 sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点.语法:arrayObject.sort( ...
- Vue.js基础2
声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
- vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
随机推荐
- ASP.net MVC 文件下载的几种方法(欢迎讨论)
在ASP.net MVC 中有几种下载文件的方法 前提:要下载的文件必须是在服务器目录中的,至于不在web项目server目录中的文件下载我不知道,但是还挺想了解的. 第一种:最简单的超链接方法,&l ...
- JDBC_part3_批处理_事务_元数据
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! JDBC_day03 String a = " ...
- 关于Linux下转换oracle字符集
前阵子给以同事导oracle数据库,但是发现导入后数据都是乱码,下面是自己解决这个问题的一些小整理. 比如: #su oralce $export ORACLE_SID=orcl $export OR ...
- [连载]《C#通讯(串口和网络)框架的设计与实现》- 0.前言
目 录 前言 前言 刚参加工作,使用过VB.VC开发软件,随着C#的崛起,听说是C++++,公司决定以后开发软件使用C#,凭借在 ...
- java接口调用——webservice就是一个RPC而已
很多新手一听到接口就蒙逼,不知道接口是什么!其实接口就是RPC,通过远程访问别的程序提供的方法,然后获得该方法执行的接口,而不需要在本地执行该方法.就是本地方法调用的升级版而已,我明天会上一篇如何通过 ...
- 关于docker
摘要: 最近很多阿里内部的同学和客户私信来咨询如何学习 Docker 技术.为此,我们列了一个路线图供大家学习Docker和阿里云容器服务.这个列表包含了一些社区的优秀资料和我们的原创文章.我们会随着 ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- MapFile生成WMS
MAP NAME "HBWMS" STATUS ON SIZE 800 600 EXTENT 107.795 28.559 116.977 33.627 UNITS ME ...
- Android开发学习—— Service 服务
Service运行于后台的一个组件,用来运行适合运行在后台的代码,服务是没有前台界面,可以视为没有界面的activity. 服务可以被手动关闭,不会重启,但是如果被自动关闭,内存充足就会重启. sta ...
- iOS 性能调试
性能调优的方式: 1.通过专门的性能调优工具 2.通过代码优化 1. 性能调优工具: 下面针对iOS的性能调优工具进行一个介绍: 1.1 静态分析工具–Analyze 相信iOS开发者在App进行Bu ...