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" ...
随机推荐
- java多线程解读一(基础篇)
一.线程的定义 每个应用程序内部都是由一个或多个的进程组成,而每个进程内部都是由许多具体的线程执行,所以,线程是每个程序执行的最小单位. 二.线程的实现 1.通过继承java.lang.Thread类 ...
- 评《撸一段 SQL ? 还是撸一段代码? 》
最近看到一篇博客<撸一段 SQL ? 还是撸一段代码?>,文章举例说明了一个连表查询使用程序code来写可读性可维护性更好,但是回帖意见不一致,我想作者在理论层面没有做出更好的论述,而我今 ...
- 关于MySQL数据库优化的部分整理
在之前我写过一篇关于这个方面的文章 <[原创]为什么使用数据索引能提高效率?(本文针对mysql进行概述)(更新)> 这次,主要侧重点讲下两种常用存储引擎. 我们一般从两个方面进行MySQ ...
- HTML DOM总结
MDN的定义 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口.它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问,以改变文档的结构,样式和内容. ...
- JS+CSS3人物奔跑动画
查看效果:http://hovertree.com/texiao/jquery/58/ 效果图: 代码: <!DOCTYPE html> <html> <head> ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- Oracle Sales Cloud:管理沙盒(定制化)小细节1——利用公式创建字段并显示在前端页面
Oracle Sales Cloud(Oracle 销售云)是一套基于Oracle云端的CRM管理系统.由于 Oracle 销售云是基于 Oracle 云环境的,它与传统的管理系统相比,显著特点之一便 ...
- 图解ios程序生命周期
图解ios程序生命周期 应用程序启动后状态有Active.Inactive.Background.Suspended.Not running这5种状态,几种状态的转换见下图: 在AppDelegate ...
- oncopy="document.selection.empty()"跟oncopy="return false"什么区别?
实现效果一样,禁止复制. 区别: oncopy="document.selection.empty()" 没禁止,只是把它复制的内容,变成空了: oncopy="ret ...
- Django模板的继承
一.extend 1.extend继承模板 2.一个文件中只能继承一个模板 3.extend继承模板中的所有内容,模板的内容包括:html的head和body ,eg: