todos

首页 > TAG信息列表 > todos

【React】学习笔记（二）——组件的生命周期、React脚手架使用

原教程视频：ttps://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录一、组件的生命周期 1.1、生命周期概念 1.2、生命周期流程图（旧） 1.3、生命周期流程图（新） 1.3.1、getDerivedStateFromProps 1.3.2、getSnapshotBeforeUpdata 二、React 脚手架 2.1

重定向RedirectResponse

后台接口 from fastapi import FastAPI, Request, Form from fastapi.templating import Jinja2Templates from fastapi.responses import RedirectResponse import uvicorn app = FastAPI() todos = ["写日记", "看电影", "玩游戏"] template = Jinja2Te

在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=&quo

vue学习07——学习笔记

学习来源：https://vuejs.bootcss.com/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88 前置条件：要在我们的html文件中引入vue.js ,如下： <script src="https://unpkg.com/vue@next"></script> <!DOCTYPE html> <html lang="en"> <head> <

三新的代码组织方式 Composition Api + script setup [一]

1 一段来自作者的微博。归纳性描述: Composition Api 可以让我们更好的组织代码结构 . script setup 本质上是以一种更精简的方式来书写Compositino Api. 2 示例1 : 写个计数器 #在home.vue 加上todoList <template> <h1>这是首页</h1> <Todolist /> </template> <

vue CLI_Todo-List案例

src\App.vue <template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"/><!-- 父组件向子组件传递一个函数，然后子组件调用这个函数把需要的值用形参传递过去 --&

useEffect

useEffect 让我们能够在下面四种时机去执行一个回调函数产生副作用： 1.每次 render 后执行：不提供第二个依赖项参数。比如useEffect(() => {})。 2.仅第一次 render 后执行：提供一个空数组作为依赖项。比如useEffect(() => {}, [])。 3.第一次以及依赖项发生变化后执行：提供依赖项数组

用vue写一个todo的简单例子

要求：实现基本的增删查改第一步：新建一个项目成功创建的样子：项目目录如图所示：运行效果如下所示：(该有的功能都实现了，视频暂时传不上来 footer代码： <template> <div class="todo-footer"> <label> <input type="checkbox" v-model="isCheck"/>

vuex练习demo-todos

todos实例数据可以放在public中使用axios调用public中的json数据把axios中的数据在vuex中用Action调用（axios是异步处理，所以需要用Action） action通过调用mutations来操作date 添加事项通过点击添加事项按钮，调用添加方法在添加方法中，先判断输入文本是否为空，为空则提示。不为

vue todoList

main.js 点击查看代码 //引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm new Vue({ el:'#app', render: h => h(App) }) App.vue 点击查看代码 <template> &

react中数组中对象修改值

updata=(obj)=>{ let {id,done} = obj let {todos} = this.state let newTodos = todos.map(item=>{ if(item.id === id ){ return {...item,done} }else{ return item } }) this.setState({ todos:newTodos }) co

「后端小伙伴来学前端了」Vue中利用全局事件总线改造 TodoList 案例

前言上上篇写了：

vue-vue2脚手架7-组件的自定义事件

vue-vue2脚手架7-组件的自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件：第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"

Build a CRUD App with SQLAlchemy - Implementing Reads: The “R“ in CRUD

How to implement the read operations? Querying the database to return data-backend views, replacing our data with “real” data coming from our database. # app.py file from flask import Flask, render_template from flask_sqlalchemy import SQLAlchemy app

2021-11-05

一个ToolList案例上一个例子组件化抽取EditTodo <template> <input type="text" :value="modelValue" @input="onInputChange" v-bind="$attrs" /> </template> <script> export d

用vue实现todos，todos里面包含了增删改查功能，不会的看过来，保准你会！！！

一.先写静态页面，然后把静态页面分组件划分，最后再写效果，效果有增删改查。二.效果展示：三.代码展示： todos.css: *{ padding: 0; margin: 0; } ul,ol,li{ list-style: none; } body{ background-color: #F5F5F5; } #app{ width: 550px; margin: 10px auto; } .title{

React组件通信归纳

React组件通信 1.父子组件通信1.1父传子采用props的格式1.2 子传父 2.兄弟组件通信3.祖孙组件传值总结搭配方式 1.父子组件通信 1.1父传子采用props的格式父组件中 export default class Father extends Component { //数据状态 state = {todos:[ {id:'001'

vuex store 改造

state.ts export default { todos:[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'} ] } getters.ts export default { todosCount(state: { todos: string | any[]; }){ return state.todos.length; },

vue的todoList案例

myHeader.vue <template> <div class="todo-header"> <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keydown.enter="addHoby"/> </div> </template> <script> //引入nanoid 方

抄一个，还没明白用法和意思

<div id="app"> <todo-list></todo-list> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({}); app.component('todo-list', { data

vue第七大功能：v-for，循环

<!DOCTYPE html> <div id="list-rendering"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> </html> <script src="https://unpk

unserialize反序列化漏洞（小宇特详解）

unserialize反序列化漏洞（小宇特详解）通俗的解释一下序列化和反序列化咱们小时候都喜欢玩游戏，特别是一些单机游戏，这些单机游戏都会有存档这个功能。例如罪恶都市这种游戏都有完美存档，你在网上下载的时候会发现像这些存档都特别的小，大部分是几十kb，而游戏却很大。存档中都是一

【Express】起步 - 路由基础 - 请求对象request - 响应对象response - 增删改查API案例

文章目录 1. 起步1.1 文档1.2 安装1.3 Hello World 2. 路由基础demo 3. 请求和响应3.1 请求对象 request3.2 响应对象 response3.3 案例GET 查询任务列表GET 根据ID查询单个任务优化：将数据读取操作封装起来POST添加任务PATCH 修改任务DELETE 删除任务 1. 起步 1.1 文档

DvaJS的Effect使用介绍

很多朋友使用dvajs不知道这个Effect是用来干嘛的，今天我们就一起来使用一下：示例： app.model({ namespace: 'todos', effects: { *addRemote({ payload: todo }, { put, call }) { yield call(addTodo, todo); yield put({ type: 'add', payload: todo }); }, }, });

DvaJS的Reducer介绍与使用

在开发DvaJS构建的项目时，有五个要素是一定要掌握的。 namespace - - 命名空间 state - - 数据状态 reducer - - 修改状态 effect subscripition Reducer： reducer是一个函数，接收state 和 action，返回老的或新的state。即： (state, action) => state 增删改：以todos为例： app.model({