• Vue.js基础篇实战--一个ToDoList小应用


    作者:imgss 出处:http://www.cnblogs.com/imgss 欢迎转载,也请保留这段声明。谢谢!

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

    2017.2.25搬到个人主页上:=>

    使用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和拍砖;

  • 相关阅读:
    Android之帧动画2
    CSS之图片关闭
    JAVA之While语句、Do和For语句
    oracle 无效字符
    java 时间制
    mybatis jdbcType date没有时分秒
    log4j说明
    spy 日志说明
    linux更新系统时间
    linux常用命令2
  • 原文地址:https://www.cnblogs.com/imgss/p/6160861.html
Copyright © 2020-2023  润新知