ToDoList | 易学教程

基于react-app搭建react-router+redux项目

阅读更多关于基于react-app搭建react-router+redux项目

前言总括：本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。代码地址： React全家桶实现一个简易备忘录原文博客地址： React全家桶实现一个简易备忘录知乎专栏&&简书专题：前端进击者（知乎） && 前端进击者（简书）博主博客地址： Damonare的个人博客人生不失意，焉能暴己知。技术说明技术架构：本备忘录使用react+react-router+redux+less+ES6+webpack实现; 页面UI参照： TodoList官网实现; 在线演示地址： Damonare的备忘录 ; 功能说明支持回车添加新事项; 支持删除事项(点击X符号); 支持状态转换具体包括：新建事项->正在进行(点击checkbox选项) 正在进行->已完成(点击文字内容本身) 正在进行->新建事项(点击checkbox选项) 已完成->正在进行(点击文字本身) 支持判断输入空字符，过长字符(20个汉字以内); 支持搜索; 支持本地化存储; 支持状态的展开隐藏(点击标题) 兼容手机端(iPhone6及以上) 支持路由切换 1. React浅谈 1.1 组件化当谈到 React 的时候不能避免的会提到组件化思想

vue.js 实战 todo list

阅读更多关于 vue.js 实战 todo list

vue.js 起源 vue.js 的作者是尤雨溪，是一名中国人，之前在谷歌工作，现在在全职维护 vue 项目。 vue.js 是 2014 年推出来的。现在已经更新到 2.x 版本，3.0 版本会在 2020 年第 1 季度推出。 vue.js 借鉴了 mvvm 思想，采用单向数据流，使得数据流更加清晰易懂。小贴示：什么是 MVVM？ MVC 架构 MVVM 架构最常见的就是 mvc 架构，由模型、视图、控制器组成。mvvm 模式由模型、视图、视图模型组成。mvvm 模式的优点是便于复杂的逻辑解耦。开发者只需要关注业务逻辑，不需要手动操作 dom，不需要关注数据状态的同步问题，复数的数据状态维护全部交由 mvvm 统一管理即可。 vue.js 特性响应式 vue.js 渲染到 html 中的数据是响应式的。可以理解为 html 中展示的数据是 vue.js 定义的数据一个引用，而不是拷贝，当修改 vue.js 定义的数据时，html 自动响应更新显示。vue.js 框架给 js 和 html 页面建立起一座隐形的桥梁以响应并更新数据。组件化 vue.js 组件将要复用的通用性功能进行封装，便于大型项目的开发，也便于项目的功能性拆解。符合 D.R.Y. 原则。向下扩展 vue.js 和基于 jquery 的站点进行整合比较方便，只需要花一上午看下 [官方教程]( https

React组件拆分与传值

阅读更多关于 React组件拆分与传值

组件拆分与组件之间的传值父子组件的概念：父组件通过属性的方式，向自组件传值子组件通过this.props的属性，接收传递过来的值父组件 src/TodoList.js import React,{Component,Fragment} from 'react' ; import TodoItem from './TodoItem' ; import './style.css' ; class TodoList extends Component { constructor(props) { super(props); this .state = { inputVal: '' , list:[] }; this .changeVal= this .changeVal.bind( this ); this .addItem= this .addItem.bind( this ); this .deleteItem= this .deleteItem.bind( this ); } changeVal(e){ this .setState({ inputVal: e.target.value }); } addItem(e){ // 按下回车键 if (e.keyCode===13 && e.target.value!=="" ){ const list =[... this

我的时间管理

阅读更多关于我的时间管理

3 月，跳不动了？>>> 昨天有读者问到，你平时要上班，要更新文章，还有两个知识星球要花时间，且知识星球口碑还不错，之前还写过一本书，这么多事情，是怎么管理自己的时间的？当多个事情处理时，往往是按重点来的，比如，我写书时，没有开知识星球，写文章一般都是晚上，大概30-40分钟，如果是技术文，一般可能要耗费1-2天，涉及数据，图，还有要点概括。但是还是坚持输出，只有成了习惯，就没有那么容易忘，就如吃饭一样，到点了，就得去做什么事情。优先级高的事情先做。所以在这个上面，我舍弃了很多优先级低事情，比如很多人微信问我问题，可能我无法一一回答，一般建议来我的星球，以前好友人数不多时，我还非常乐意把我知道的回复你。现在精力有限，可能是选择性回复，如果你平时经常公号留言，打赏，分享转发，等混脸熟的，我还是非常乐意去和你一起产生交集，尽力回复你问题（无论是技术还是其他方面）。这也是相互的。举个简单例子：你经常和领导一起吃饭，还有和领导讨论某些问题和方案，领导在提升人时，自然会想到你。就算是做技术的，你帮领导解决了他棘手的问题，他不提升你，提升谁。所以不要小看了这些细节。这是题外话。所以你看起来，一个人在处理多个事情，实际上他在全力以赴那些重要的事情。都是一件一件来的。抓重点能力，是很久以前在公号就提到过。重点到位了，主要价值就有了，就算其他事情没有完成，也不影响。重点事情上

【MVVM】- Avalon 数组操作

阅读更多关于【MVVM】- Avalon 数组操作

avalon 对象、对象数组、数组基本操作界面 <body ms-controller="test"> <ul> <li ms-repeat="object">{{$key}}-->{{$val}}</li> </ul><br> <button ms-click="changeObject">改变对象</button><br> <ul> <li ms-repeat="array">{{el}}</li> </ul><br> <button ms-click="changeArray">改变数组</button><br> <ul> <li ms-repeat="objectArray"> {{el.aaa}}-->{{el.bbb}}-->{{el.ccc}} </li> </ul><br> <button ms-click="changeObjectArray">改变对象数组</button><br> </body> js操作逻辑 vm=avalon.define({ $id:"test", object:{aaa:1111,bbb:2222,ccc:3333}, array:["AA","BB","CC"], objectArray:[{aaa:1111,bbb:2222,ccc:3333},{aaa:4444,bbb:5555,ccc:6666},{aaa:7777,bbb

关于工作流引擎ccflow待办分类研究与技术实现

阅读更多关于关于工作流引擎ccflow待办分类研究与技术实现

关于工作流引擎待办分类研究与技术实现关键字：工作流引擎 BPM系统待办类型名词：待办概要介绍：待办就是当前的登录人员要处理的工作，在工作流程里面的节点类型不同，业务场景不同，我们把待办分为如下几种，分别是我的待办、会签主持人待办、加签人待办、协作待办、授权待办、工作委托待办、抄送、共享任务待办8中待办模式，如下图：我的待办：他是所有的待办的综合，就是等待我要解决的问题。我们可以通过调用 BP.WF.Dev2Interface.DB_GenerEmpWorksOfDataTable接口可以实现。可以构造自己的待办列表。对应的功能页面： /WF/Todolist.htm 会签主持人待办：在流程的节点上有如果启动了组长模式的会签当前主持人所可以看到的待办列表就可以从这里或得到。(什么是组长模式的会签，请baidu ccflow组长模式的会签)。对应的接口方法是：BP.WF. HttpHandler . WF HuiQianList_Init 对应的功能页面： /WF/ HuiQianList .htm 注意：所有被加签人都处理完毕后，该待办仍然存在这里面。该待办仍然会显示到todolist.htm里面，如果主持人处理完毕后，两个待办都会消失掉。加签人待办：主持人选择一个人执行加签，这个人就叫加签人，加签人的待办列表也会显示到常规的待办(Todolist

番茄闹钟四(todoList 模块搭建及封装)

阅读更多关于番茄闹钟四(todoList 模块搭建及封装)

一. 调试接口二.webstorm 最大化的增加代码区域 View-Enter Distraction Free Mode 三. 添加新建菜单 https://blog.csdn.net/asing1elife/article/details/82820628 四. 配置路径 https://blog.csdn.net/weixin_33804990/article/details/91368501 五. ToDoInput 和 ToDo 组件 // ToDoInput负责样式 // ToDo负责功能 // 放外面处理是为了后面引入redux,提交action都是做在外面的六. 制作 Item this.state.todos.map(t=><TodoItem key={t.id} {...t} />) // ...t把所有属性放到item里面七. 解决 TS2339 报错 // 在外面定义接口 interface ITodoItemProps { description: string } <span>{this.props.description}</span> 八. 将 todos 做成宽度一半 #Todos { padding: 16px; border: 1px solid #ddd; border-radius: 4px; width: calc(50% -

vue 实现todolist，包含添加，删除，统计，清空，隐藏功能

阅读更多关于 vue 实现todolist，包含添加，删除，统计，清空，隐藏功能

vue 实现todolist，包含添加，删除，统计，清空，隐藏功能添加：生成列表结构（v-for+数组）、获取用户输入（v-model）、通过回车新增数据（v-on+.enter）删除：点击删除指定内容（v-on+splice索引）统计：统计信息个数（v-text+length）清空：点击删除所有信息（v-on）隐藏：没有数据时，隐藏元素（v-show/v-if+数组非空） <template> <div id="app"> <div id="todolist"> <input type="text" v-model="inputVal" @keyup.enter="add" /> <ul> <li v-for="(value,index) in list"> <div> <span>{{index+1}}</span> <label>{{value}}</label> <button @click="del(index)">删除</button> </div> </li> </ul>  <footer v-show="list.length!=0"> <span>  <em>{{list.length}}</em> list </span>  <button @click="clear" >clear<

react 实现简单的todolist功能

阅读更多关于 react 实现简单的todolist功能

需求：利用react组件化实现todolist的功能首先要理解父子组件的传值方式，父组件通过属性在自组件绑定值或者方法，然后子组件利用 this.props.属性名获取父组件传来的方法或者属性值。首先在父组件中实现输入框和提交按钮 <div className="todolist"> <div className='todolisttop'> <input /> <button onClick={this.handleBtnClick}>提交</button> </div> </div> css样式 body{ display: flex; justify-content: center; align-items: center; } .todolist{ width: 300px; height: 400px; /* border: 1px solid black; */ } .todolisttop{ width: 280px; margin-left: 10px; margin-top: 10px; display: flex; justify-content: center; align-items: center; } .todolisttop input{ padding: 10px; width: 200px; border: 2px solid #ccc;

vue风格指南

阅读更多关于 vue风格指南

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> vue风格指南： 1. 组件名为多个单词： ``` Vue.component('todo-item',{ //... }) export default{ name:"TodoItem" //... } ``` 2. 组件的data必须是一个函数除了new Vue外的任何地方，它的值必须是一个返回函数。当 data 的值是一个对象时，它会在这个组件的所有实例之间共享，这样导致各个组件data会互相影响 3. Prop定义尽量详细至少指定类型。 ``` // 这样做只有开发原型系统时可以接受 props: ['status'] //只在开发原型系统时可以接受 //好例子 props:{ Status:{ type:String, required:true, validator:function(value){ return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !==-1 } } } ``` 4. 为v-for设置键值 ``` <li v-for="todo in todos" :key="todo.id">{{todo.text}}</li> ``` 5. 避免v-if和v-for用在一起 6.

订阅 ToDoList