![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
爱吃西瓜的二花
这个作者很懒,什么都没留下…
展开
-
node npm
npm原创 2022-08-17 11:20:04 · 232 阅读 · 0 评论 -
react reducers两种返回形式
关于区别后期更新吧原创 2020-05-21 11:46:58 · 1539 阅读 · 0 评论 -
react 关于Object取值操作代替for循环取值
原创 2020-05-21 11:45:02 · 906 阅读 · 1 评论 -
react for循环重新构建数据
let resultData=请求回来的数据;let endData=[];for(let i in resultData){ let item={ "key":i, "id":resultData[i].id, "tab":resultData[i].tab, "title":resultData[i].title }; endData.push(item);}原创 2020-05-20 14:34:33 · 390 阅读 · 0 评论 -
react forEach实例
handleDelete = () => { const { dispatch } = this.props; const { selectedRows } = this.state; // 这是一个数据[{'id':1,'name':a},{'id':2,'name':b}] console.log('数据===========', selectedRows); const ids = []; selectedRows.forEach(item =..原创 2020-05-20 14:30:58 · 1534 阅读 · 0 评论 -
react modal格式报错
有些时候需要注意格式,在react中运算符的使用也很常见如图所示:原创 2020-05-20 11:35:35 · 227 阅读 · 0 评论 -
react 遍历生产form表单(FormItem)
import React, { PureComponent } from 'react';import { Form, Input } from 'antd';const FormItem = Form.Item;@Form.create()class Formany extends PureComponent { render() { const { form: { getFieldDecorator }, modalData, modalDataS原创 2020-05-20 11:29:00 · 4870 阅读 · 0 评论 -
react antd中Modal包裹Form组件用
运用场景:需要弹出对话框,对话框包含form表单,如何在对话框中,获取form表单中的数据库呢。网络案例 对话框: //有问题的modal<Modal title="开通城市" visible={this.state.isShowOpenCity} onCancel={()=>{ this.setState({ isShowOpenCity:false }) }} onOk={()原创 2020-05-12 11:14:03 · 3698 阅读 · 1 评论 -
dva.js reducers
如果全局都使用reducers,是不是也可以,所有的变量都用同一种方式。感觉是个好主意。1.在models模块中,可以创建文件,在里面定义自己的命名空间,reducers是处理数据的赋值等操作。2,在入口文件中,将modles引入到全局app中,全局关联。3.配置好完成以后,就可以到视图页面经行调用操作。...原创 2020-04-09 10:01:07 · 1544 阅读 · 0 评论 -
dva.js _mod_effects
effects异步处理:可以定义一个onclick点击事件{this.handleSetNameAsync},点击函数处罚props.dispatch,data可以说是携带的数据。异步函数找到命名的*setNamaAsync,put方法的作用是reducer,call方法是异步调用,payload方法就是截取携带参数。...原创 2020-04-08 23:14:24 · 287 阅读 · 0 评论 -
dva.js models_Api
models_Api前端代码如何调用接口onClick函数如何加载初始页面数据dva是如何封装react与redux的1.再webpack中配置全局代理:2.首先引入全局代理,在service中定义接口函数3.如果是加载初始页面数据,则在挂在时调用(情况一:视图中调用)4.首先定义一个点击事件testCnode,testCnode然后dispatch=》type.action...原创 2020-04-08 22:56:59 · 252 阅读 · 0 评论 -
dva.js subscriptions
subscriptions第一步本质上是订阅模式j,订阅或者是监听一个地址(url),如果变化就出发一个dispatch,激活一个type(testPath)第二步激活的或者派发的dispatch,testPath方法就会修改state的数据值,也可以在修改数据值前查询当前用户的角色或者权限,然后再经行操作。...原创 2020-04-08 22:10:07 · 521 阅读 · 0 评论 -
react redux
redux工作流程流程讲解:客观为你的组件,组件中调用了一个方法οnclick={this.deleteItem.bind(this,index)index为传递的数值action为触发函数 type为触发了哪一个dispatch为将action派发给reducers...原创 2020-03-31 17:04:59 · 112 阅读 · 0 评论 -
react 子组件向父组件传值
react 子组件向父组件传值react的传值与vue的方式一样。父组件向子组件传值,通过属性传递,子组件直接通过props接收。子组件向父组件传值:子组件调用父组件传递过来方法。方法在父组件中创建,子组件调用。父组件:父组件向子组件传递handleDelete方法,此方法的操作也在父组件。子组件:子组件调用父组件传递过来的handleDelete方法,子组件中再定义此方法,在方法中定...原创 2020-03-31 09:50:17 · 1231 阅读 · 0 评论 -
react 第一个应用
之前有过vue的经验 今天来学习一下react框架第一步安装node.js 配置完成后会 ,pm也自动安装好第二部:使用淘宝的cnpm,同时设置镜像地址 不配置也可以)npm install -g cnpm --registry=https://registry.npm.taobao.org第三步:npx create-react-app my-appcd my-appnpm sta...原创 2020-03-30 09:27:22 · 82 阅读 · 0 评论 -
vue 插槽(slot)使用
插槽使用场景:子组件的展示内容是由父组件传递过来的数据方案一:通过父子组件传值来解决问题,但是如果传递内容过多则代码繁杂。方案二:使用插槽01具名插槽02...原创 2020-02-18 13:52:06 · 255 阅读 · 0 评论 -
vue 列表与对象的操作
在list与obj中不能采用使用下标修改数据,可以改变引用数据源来重新赋值。如果使用就会发现数据变了,但是页面上的数据没有发生变化。列表的操作方式:push方法向数组添加一个数据vm.list.push({‘id’:‘1’,name:‘zhao’})splice(截取)方法:传入下标为‘1’的数据,然后删除(1,表示删除一个数据),再添加一个数据vm.list.splice(1,1,...原创 2020-02-17 15:23:51 · 1781 阅读 · 0 评论 -
vue v-if与v-show运用
v-if与v-show 不推荐使用v-if: v-if频繁操作dom元素,v-show只是display.使用v-if时,应该添加key值,标识唯一,不然会复用上一节点的元素。v-if原创 2020-02-16 20:41:34 · 87 阅读 · 0 评论 -
vue vue-cli操作
卸载vue-cli(2.x)npm uninstall vue-cli -g 或yarn global remove vue-cli 卸载旧版本卸载cli3npm uninstall -g @vue/cli 或 yarn global remove @vue/cli安装cli3安装命令:npm install -g @vue/cli 或 yarn global add @vue/cli...原创 2020-01-06 10:37:02 · 118 阅读 · 0 评论 -
vue 兄弟间传值bus(总线/订阅模式)
vue 兄弟间传值bus(总线/订阅模式)兄弟间传值除了vuex公用变量机制外还有bus总线在父组件中的多个子组件之间相互传值的原理:创建一个vue.prototype.bus,因为它是一个全局的vue,所以在任何地方都可以使用它。还有一点:在vue中子组件不能直接操作父组件传过来的数据,存在单向数据流问题。子组件需要将父组件中的变量独自复制一份,经行数据处理。兄弟组件中的数据也要拷贝在...原创 2019-12-28 20:55:00 · 794 阅读 · 0 评论 -
vue 使用ref节点属性
vue 使用ref节点属性01在vue中使用ref属性,能定位到相对应的节点,获取对应的模块,对数据经行操作02在父子传值中的使用子组件中定义一个点击方法handClick,操作子组件中的元素,同时触发一个事件this.$emit(change)。@change事件是父组件加在子组件身上的,父亲组件监听到数据的变化,通过refs定位数据,经行数据操作。...原创 2019-12-28 20:09:25 · 1101 阅读 · 0 评论 -
vue 将子组件作为list列表(下拉列表)在父组件中使用
vue 将子组件作为list列表在父组件中使用is标签的作用不仅在还可以在下拉列表中使用原创 2019-12-28 19:50:48 · 818 阅读 · 0 评论 -
vue 项目结构目录简介
#了解结构目录,是为了明白项目的执行机制先来看一下,然后讲解最重要的几部分#src文件该文件夹是整个项目的主文件夹 ,我们99%的操纵是在这里,其他1%可以忽略##assets该文件夹里面主要放置一些资源文件,比如js 、css,img 之类的文件##components该文件夹是vue组件存放位置 , 组件文件全部都可以放到这里面##router该文件夹是整个vue项目的路由...原创 2019-12-12 09:51:40 · 315 阅读 · 0 评论 -
vue mvvm模板定义与vue生命周期
#vue mvvm模板vue作为前端框架 肯定封装好了便捷的框架 接下来我们看看vue mvvm模板#vue生命周期从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期.钩子就是在某个阶段给你一个做某些处理的机会.在网上找了一个很完美的图示:beforeCreate( 创建前 ):创建前,基本没用created ( ...原创 2019-12-10 16:48:26 · 244 阅读 · 0 评论 -
vue 兄弟组件之间传值vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。是一个公共储存空间。#首先 确保环境中已经下载vuexcnpm install vuex --save#第二步,在main.js文件中引用vuex,并挂载到app中先看一下总结,有一个大概的认识#state,mutations,g...原创 2019-12-10 10:49:10 · 1257 阅读 · 0 评论 -
vue 父子组件传值
在Vue中,父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息。每个Vue实例都实现了事件接口:使用on(evntName)监听事件;使用on(evntName)监听事件;使用on(evntName)监听事件;使用emit(eventName,optionalPayload)触发事件。另外,父组件可以在使用子组件的地方直接...原创 2019-12-09 14:04:46 · 85 阅读 · 0 评论 -
vue 资料库
#基于各种UI组件UI组件原创 2019-12-09 10:42:18 · 132 阅读 · 0 评论 -
vue 环境搭建篇
#本博客基础vue环境搭建NodeJS说明:使用Vue不需要安装NodeJS,这里下载NodeJS只是为了使用其内置的NPM工具,所以不需要你有任何的NodeJS基础,只需要运行 npm install vue 命令,即可把 Vue 的最新版本下载至 node_modules 文件夹。npm是NodeJS下的一个包管理工具,它可以很方便的帮你管理(可以简单理解为下载)各类前端的框架或插件No...原创 2019-12-09 10:24:04 · 117 阅读 · 0 评论 -
vue 项目搭建篇
#本博客基于已经搭建好环境依赖进入cmdC:\Users\97231>md 命令 创建文件夹cd 命令 进入相关目录安装项目vue init webpack first_vue 控制台显示提示目录已存在,是否继续:Y Project name(工程名):回车 Project description(工程介绍):回车 Author:作者名 Vue buil...原创 2019-12-09 10:05:17 · 98 阅读 · 0 评论