- 博客(37)
- 收藏
- 关注
RSS订阅原创 react-redux的使用
新建容器组件：containers->Count->Count.jsx。ui组件：components->count->index.jsx。app.js store向子组件传递的参数。redux文件下所有的文件不变。优化写法 index.js。之前写法 App.js。整合UI组件和容器组件。
2023-07-01 14:32:51
801
原创 4.react受控组件与非受控组件
（1）高阶函数如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等等（2）函数的柯里化通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。2、实现state = {username:'', //用户名password:'' //密码。
2023-06-21 13:58:41
1534
原创 2.react函数式组件传值
2）在子组件模板中使用props.自定义属性名可以获取父组件传递过来的数据，同时在子组件的函数中接受一个参数 props。<子组件标签 **自定义属性名a**={新的方法}></子组件标签>（这个两个 **自定义属性名** 要一致）1）在父组件中找对子标签，在子组件的标签上添加自定义属性，自定义属性名 = {要发送的数据}前提必须要有props，在函数组件的行參的位置，需要的是子组件的函数的props。2）在父组件中找到子组件标签，在子组件标签上面写 自定义属性={新的自定义方法}
2023-06-20 14:15:51
1231
原创 1.react脚手架创建
第一步，全局安装：npm i -g create-react-app 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react 第三步，进入项目文件夹：cd hello-react 第四步，启动项目：npm start
2023-06-19 17:48:58
55
原创 6.react路由传参
在函数式组件里面我们要借助hooks的useSearchParams来进行取参。在函数式组件里面我们要借助hooks的useLocation来进行取参。在函数式组件里面我们要借助hooks的useParams来进行取参。
2023-06-19 16:34:46
55
原创 React 组件生命周期
componentWillUnmount：组件在卸载阶段时执行。Updation会在组件发生改变的时候执行。Mounting阶段叫挂载阶段，伴随整个。
2023-06-18 19:45:57
1173
原创 5.react嵌套路由
首先在路由表里面新增一个children，children为一个数组。end：添加之后点击二级路由之后一级路由的高亮会消失。然后在二级路由页面引入Outlet组件。
2023-06-16 17:16:20
132
原创 4.react路由表
然后在app.js创建useRoutes模块用于创建路由表，在引入routes文件。首先在src目录下创建routes文件夹。然后引入Navigate模块和响应的页面。
2023-06-16 16:39:22
146
原创 js 判断数组中是否存在某个值的几种方法
从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。判断一个数组是否包含一个指定的值，如果存在返回 true，否则返回false。判断数组中是否存在某个值，如果存在返回。参数：searchElement。参数：thisArg（可选）的下标，否则返回-1。
2023-04-24 10:59:23
304
原创 简写技巧.
1.三元运算替代v-if优化前let num = 0if(num){ console.log('true')}else{ onsole.log('false')}优化后let num = 1num?console.log('true'):console.log('false')
2022-06-18 17:02:35
54
原创 uniapp 代码段
1.返回指定页面onBackPress(options) { let self = this; if (options.from === 'navigateBack') { return false; } console.log("要指定返回的页面"); uni.switchTab({ url: '/pages/index/index' }); return true;},2.禁用侧滑返回onLoad() { // #ifdef APP-PLUS var page
2022-06-18 17:01:27
358
原创 前端跨域解决方案
module.exports = { devServer: { proxy: { '/api': { // 此处的写法，我访问的是http://localhost:8080/api/dataHome.json设置代理后，axios请求不需要把域名带上，只需要把路径前面加上 /api 即可。 target: 'http://v.juhe.cn/joke/content/', ......
2021-05-27 22:00:56
215
原创 微信小程序的组件传值
说起微信小程序的传值我们就想起来了vue，其实大致分成了两种，一种是父传子，一种是子传父，这里我做了一下总结！引入组件1，首先在components注册咱们的组件。2，在父组件的.json写入"usingComponents": { "sear":"../../components/sear/sear" },3.然后就在咱们的xhtml页面写入<tabs></tabs>这样咱们一个最基础的组件就写完了父传子1，首先在咱们父组件的.js文
2021-05-24 13:28:27
1693
1
原创 vue v-slot 小结
在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性。使用组件中<template> <div class="header flex"> <div class="flex_1 flex flex_y_center"><span @click="returnBtn......
2020-01-08 11:40:19
519
原创 Vue keep-alive总结（缓存）
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。常见用法<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="...
2020-01-07 16:28:18
109
原创 vue 如何解决移动端Click事件300ms延迟的问题？
npm install fastclick -S//引入import fastClick from 'fastclick'//初始化FastClick实例。在页面的DOM文档加载完成后fastClick.attach(document.body)
2020-01-07 15:53:13
285
原创 vue封装tabbar组件
html<div class="tabbar flex"> <div v-for="(i, index) in tabbarArr" :key="index" class="tabbar-item" @click="switchTo(i.path)"> <img :src="i.path === $route.path ? i.selected : i...
2020-01-06 11:43:09
761
转载 vue自定义全局吐司toast
先看效果1，index全局组件import Vue from 'vue'import toast from './toast.vue'// 创建组件构造器const toastHonor = Vue.extend(toast); export default function ({text="要显示的内容",time=2000,type=undefined}={}) { ...
2019-11-21 11:21:45
489
原创 vue实现头像上传
<div class="item_bock flex flex_x_center"> <label> <img :src="userInfo.avatar" /> <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />...
2019-11-18 09:39:29
3221
原创 Vue 路由切换动画（进入和退出）
<transition :name="transitionName"> <router-view class="view"></router-view></transition><script> export default { name: 'App', data(){ retu...
2019-11-16 18:00:55
4589
原创 Vue 刷新局部页面（不闪烁）
首先在App.vue组件写入<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script> export default { name: 'App', p...
2019-11-06 13:27:15
2334
原创 公共导航a标签跳转添加样式
在开发公共导航页面时，大家可能会遇到这样一个问题，在a标签点击跳转页面后，被点击的a标签添加的样式刷新后消失。html<li id="nav" class="header-li-ml"> <a class="list" href="#">服务</a></li>css.selected_login{ backgro......
2019-10-31 11:18:48
462
原创 Vue 验证码点击倒计时
废话不说直接上代码html<div class="num" @click="yzmBtn"> <button :disabled="disabled">{{yzm}}</button></div>jsmethods: { yzmBtn() { let time = 5; let timer = setInter...
2019-10-27 21:10:54
336
原创 Vue Better-Scroll的基本使用
1.安装（1）better-scroll 托管在 Npm 上，执行如下命令安装：npm install better-scroll --save（2）接下来就可以在代码中引入了，webpack等构建工具都支持从 node_modules 里引入代码：import BScroll from 'better-scroll'2.better-scroll 支持很多参数配置，可............
2019-10-27 18:48:24
545
1
原创 Css flex布局
X轴方向的排列方式justify-content: flex-start; 从左到右justify-content: flex-end; 从右到左justify-content: center; 居中justify-content: space-around; 均匀分布（间距不一样）justify-content: space-evenly; 均匀分布...
2019-10-26 22:08:33
414
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人