原因:2017年5月5日 罗列计划 说明:长短期计划说明,优化时间利用率 Ceph 材料为Ceph-CookBook以及官方文档阅读 目的为熟悉ceph存储系统...
上节详细描述了小程序环境搭建,承诺了这节讲todolist,我猜大家都是学习过 vue 或者 react 之后才学习小程序的,对于todolist 的逻辑问题我暂不做详细描述,如果遇到些许问题,请及时留言或评论在下方...---- 上面是todolist 的效果图,功能介绍: 单击添加按钮新建任务清单,添加任务附带当前时间,左滑可以对任务清单进行操作,已完成任务不可以转换未完成 ,每次操作后自动刷新页面,更新任务清单...if (this.data.todoList[i].state == 1) { dtInfo.push(this.data.todoList[i]); }...} } else { for (var i = 0; i < this.data.todoList.length; i++) { if (this.data.todoList...[i].state == 2) { dtInfo.push(this.data.todoList[i]); } } } this.setData
综合案例: toDoList案例分析 1.1 案例:案例介绍 1. 文本框里面输入内容,按下回车,就可以生成待办事项。 2. 点击待办事项复选框,就可以把当前数据添加到已完成事项里面。 3....1.2 案例:toDoList 分析 1. 刷新页面不会丢失数据,因此需要用到本地存储 localStorage 2....存储的数据格式:var todolist = [{ title : ‘xxx’, done: false}] 4....1.3 案例:toDoList 按下回车把新数据添加到本地存储里面 1.切记: 页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。...1.5 案例:toDoList 删除操作 1.点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。
vue中的ToDolist案例 下面展示一些 内联代码片。... TODOlist <input type="text" placeholder="添加
/view/todolist/_index.js'; const reducer = combineReducers({ todo: todoReducer, }) export default createStore...(reducer); todolist/redux/reducer.js import * as todoTypes from '..../redux/todolist.js import * as todoType from '..../redux/todolist' import '..../todolist.css' const View = () => { let ipt = useRef(); const state = useSelector((state) => state
react-todolist.gif 一: 写在文章开头 今天我们就使用 react 来实现一个简易版的 todolist ,我们可以使用这个 demo 进行 list 的增删改差,实际效果如上图所示。...大家可以clone下来查看:react-todolist 这篇文章我们就不使用 redux,因为这个 demo 本身比较简单,不需要通过 redux 来管理我们的状态。...// readme文件 └── package.json // 当前整一个项目的依赖 ---- 三:前期准备,安装依赖 1,首先我们新建一个todolist...$ mkdir todolist $ cd todolist 2,建立package.json文件 npm init 3,安装相应的依赖,我先解释一下这些依赖的作用 首先安装Babel,Babel 是一个...DOCTYPE html> react-todolist <link
参考文档:https://blog.csdn.net/ll666888999/article/details/123789098 参考视频:https://w...
这一节我们用经典的案例redux-todoList来具体的说一下每一个部分作何解释。 todoList是什么 todolist是一个经典的案例,代办项的意思。...一般我们初学一门语言的时候基本都是会做一个todoList来验证自己所学的知识。我们这里用来理解redux也是一个不错的方法。 具体的功能可以查看http://www.todolist.cn/。...我们要完成todolist需要做一下什么呢?接下来看看具体的步骤。 入口 入口,即整个项目的入口文件。...那么在todolist里面有那几个状态呢? 所有的代办项,我们用一个数组表示,即todos todos的过滤,即我们当前所处一个状态,用visibilityFilter表示。...所以在TodoList文件中 import React from 'react' import { ListGroup } from 'react-bootstrap' const TodoList
第4章 TodoList 案例 上市产品: ToDoList 、奇妙清单 、滴答清单 学习练手项目 : TodoMVC 、 Vue官方示例 为什么选择这样的案例: 产品功能简洁,需求明确,所需知识点丰富...v.stat); }, TodoList案例暂时告一段落,我们并没有将产品做完,因为我们需要用到其他知识了;
中 秋 快 乐 前言 我是歌谣 最好的种树是十年前 其次是现在 原生+TS实现todolist效果 环境配置 npm init -y yarn add vite -D 修改page.json... Add <ul id="<em>todoList</em>...inputText') const oAddBtn = document.querySelector('#addBtn') const oTodoList = document.querySelector('#<em>todoList</em>
TodoList其实是一个很经典的案例,每次学vue的时候都会写一个,用来熟悉vue的使用,第一次写是在大一的时候浅学vue的时候,写了一个很简单的demo,但是最近又重新温习了一遍vue重新写了一个todolist
/Reducers/TodoList'; /** * 第一个参数是reducers 第二个参数是默认状态 * 所以还得建立reducers reducers主要是负责将新的状态返回到store...里面 store负责更新 */ export default createStore(combineReducers({ add, deleter })); todolist.js... todolist的reducer 注意 reducers不要直接返回修改的state 需要返回的一个新的对象 否则内存地址指向的都是同一处 const states = { list...state, name: action.payload }; } // 返回新的状态 return state; }; Todolist.js...store'; /** * 如果单独使用redux的话 直接安装redux的包 进行简单状态管理 * 使用store提供subscribe订阅状态更新 状态更新后使用更新组件 */ class TodoList
第8章 重构TodoList案例 8.1 启动API接口及数据 db.json: { "list_data": [ { "id": 1, "title": "吃饭",
通过 nmp 安装相关依赖,进入vs code ,找到文件,右键点击在集成终端中打开,输入命令npm i进行安装;并且安装npm i vue@2.6.10
indexdb来缓存历史数据等功能,写TODOList虽然是助手的二面任务,但是我此前也有使用todolist的习惯并且对微软的Microsoft To Do的使用逻辑觉得不太习惯,希望自己写一个demo...的时候能让自己满意,简单说我希望做一个比较简约风格的todolist。...TODOLIST 基础的增加、删除、编辑、完成任务功能 需求:todolist的基本功能增删改。...实现:通过给对象数组加个成员变量trashed来判断是否处于回收站 分组标签 需求:分组标签功能在我此前使用todolist的时候是我认为非常鸡肋的一个功能,虽然绝大多数的todolist都具有分组功能但是还是没有去做这个...,在我使用todolist时通常是希望通过todolist做一个短期规划而不是长期规划,来规划我接下来3h或者今天整天或者近几天我希望做的事情,我记录的事情也不会有7件8件那么多,长期规划是确实更需要一个分组标签功能
我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是原始typescript的讲解
2、toDoList 分析 刷新页面不会丢失数据,因此需要用到本地存储 localStorage 核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据...存储的数据格式:var todolist = [{ title : ‘xxx’, done: false}] 注意点1: 本地存储 localStorage 里面只能存储字符串格式 ,因此需要把对象转换为字符串... var todolist = [{ title: '复习本地存储", done: false }, { title :...'我今天学习jquery', done: false }, ]; // localStorage.setItem("todo", todolist); // 1....按下回车 把完整数据 存储到本地存储里面 // 存储的数据格式 var todolist = [{title: "xxx", done: false}] $("#title").on(
/todolist-create.dto'; import { UpdateTodoList } from '....这样,todolist 的 restful 版接口就完成了。...prismaService: PrismaService; @Query("todolist") async todolist() { return this.prismaService.todoItem.findMany...todolist?....todolist?.
DOCTYPE html> todoList功能
新建一个文件夹 demo 在改文件夹里新建两个组件 无状态组件 Index.jsx及状态组件TodoList.jsx 并再 Index.jsx 中引入 TodoList.jsx Index.jsx import...React from 'react'; import TodoList from '..../TodoList'; const Index = () => ; export default Index; ?...TodoList.jsx import React from 'react'; class TodoList extends React.Component { constructor(props...新建 app -> public -> css -> todoLIst.pcss .todoList { li { list-style-type: none; margin-top
领取专属 10元无门槛券
手把手带您无忧上云