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" ...
随机推荐
- 【工具】VS2010常用调试技巧(1)
调试是一个程序员最基本的技能,其重要性不言自明.不会调试的程序员就意味着他即使会一门语言,却不能编制出好的软件.本文就本人在开发过程中常用的调试技巧作下简单呢介绍,希望对大家有所帮助,能力超群者请绕道 ...
- [修正] Firemonkey Android 显示 Emoji (颜文字)
问题:在 Android 平台下,显示 Emoji 文字,无法显示彩色(皆为黑色),例如 Edit 控件,即使将 Edit.ControlType = Platform 设为平台原生控件,还是没用(真 ...
- PHP 观察者模式
观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. [观察者模式中主要角色] 1.抽象主题(Subject)角色: 抽象主题提供了增加 ...
- 【原】EasyUI ComboGrid 集成分页、按键示例
需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...
- Cell右滑 多个编辑选项栏
简单粗暴,一看就能明白 关于右滑cell,能滑出来两个以上的选项栏,可以如下这么做,但是要注意下面的注意事项,就是关于iOS8前后的问题,注释写的很清楚了.可以直接复制到自己的代码里看的会更明白. / ...
- Splash页面跳转主页面,去掉主页面标题栏
requestWindowFeature(Window.FEATURE_NO_TITLE); // 去除标题,必须在setContentView之前调用
- iOS中多线程的实现方案
什么是主线程? 一个iOS程序运行后,默认会开启一条线程,称为“主线程”或“UI线程” 主线程的主要作用 1.显示/刷新UI界面 2.处理UI事件(比如点击事件,滚动事件,拖拽事件) 主线程的使用注意 ...
- IT技术风向标
2016 stackoverflow的统计 : http://stackoverflow.com/research/developer-survey-2016
- freeswitch嵌入python脚本
操作系统:debian8.5_x64 freeswitch 版本 : 1.6.8 python版本:2.7.9 开启python模块 安装python lib库 apt-get install pyt ...
- 基础拾遗------redis详解
基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...