- 博客(72)
- 收藏
- 关注
RSS订阅原创 redux学习记录:简单记录一下redux的流程
整理一下redux的流程第一步定义数据第二步定义reducer纯函数,函数中定义你要对action操作的行为第三步使用redux.createStore()方法定义store,并将reducer纯函数传入edux.createStore(reducer)方法中第四步定义action第五步将action传入store.dispatch(action) 进行派发小结...
2021-06-04 15:48:35
411
原创 react修改state的坑,今天终于学到了...
今天在做了个评论的模块,贴下代码-太长了直接贴截图需求是点击删除,删除对应的评论然后我这边使用的是splice方法直接修改state的commentList数组,结果出现两个坑第一是splic方法返回的是被删除的值,同时splice() 方法会直接对数组进行修改。也就是说,我不能直接在变量后面+ splice() ,这样得到的值是被删除的值而是应该在原本的变量数组使用splice()方法后,再调用这个变量,因为这个变量的值已经改变了第二十react的state不能直接去修改直接修改
2021-05-31 15:50:32
982
原创 React 添加引用路径时,使用@符号作为src文件
在react引用组件时,我们经常会遇到下图的情况'…/…/…/'来指代文件所在文件夹的文职这种’…/'很不美观也很难读,看着就很复杂,很难读,不能一眼知道文件所在的位置情况在vue中,我们可以使用@来指代src文件夹那么在react中,怎么使用@符号指代src文件夹呢?因为我的项目有用到antd,所以直接使用craco来配置引入craco$ yarn add @craco/craco修改package.json文件,将craco作为执行文件/* package.json */
2021-05-29 16:21:35
2725
原创 解决使用uniapp的echarts,格式化文本formatter无效的问题.app中没变化,h5中有效果
在使用uniapp的echarts时,我们一般都是使用的randerjs就是下面这些代码<script module="echarts" lang="renderjs">let myChartexport default { mounted() { if (typeof window.echarts === 'function') { this.initEcharts() } else { // 动态引入较大类库避免影响页面展示 const script =
2021-05-21 13:11:06
4991
5
原创 关于 m1 mac 在bigsur下,安装brew出现‘‘zsh: command not found: brew‘‘的问题
我在stackoverflow上发现了答案,在此分享一下https://stackoverflow.com/questions/36657321/after-installing-brew-i-get-command-not-found-brew第一步输入vim ~/.zshrc第二步编辑.zshrc文件添加这个命令export PATH=/opt/homebrew/bin:$PATH最后输入source ~/.zshrc效果 ...
2021-04-30 12:33:07
4136
原创 只用一个div画一个小米logo
小米发布了新logo前段时间小米宣布了他们的新logo,但是细心的网友发现.小米的官网logo是这样实现的:挺有趣的,我自己也实现一个试试外边框使用border-box实现圆角(真logo是R角,即椭圆,border-box实现不了)添加伪元素实现三个边框 ,添加第二个伪元素实现M中间的那一点再给那一点添加距离自己比较远的相同颜色的阴影实现效果没还原,只是像,r角border-box实现不了.以下是代码<body> <div class="box">
2021-04-02 08:57:04
544
原创 vue3中消失的.sync去哪了呢?原来变成v-model了!!!
在vue2.x中,子传父是这样的父组件父组件监听自定义事件update:title<template> <div class='Father'> 这个是父组件 {{count}} <Son :title="count" @update:title="(e)=>count=e"/> </div></template>子组件子组件发射自定义事件update:title <div class
2021-03-30 16:04:46
2797
1
原创 使用react初步实现一个购物车小组件
使用react初步实现一个购物车小组件下面是完成的状态下面是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g
2021-03-03 18:01:49
332
原创 四种方法改变react组件中方法this的指向
改变react组件中方法的指向在react的class中(一般用class作为构造函数的语法糖),我们经常会遇到引用方法的情况,比如下面这个demo:他的效果是,当我点击按钮,控制台输出’这个是信息’ class App extends React.Component { constructor(){ super() this.state = { } } render(){ ret
2021-02-25 02:32:44
900
1
原创 jsx的属性绑定
jsx的state可绑定到html的属性上html的属性后面使用{}符号来绑定react组件中的值<script type="text/babel"> class App extends React.Component { constructor(){ super() this.state = { title:'这个是标题' } } render(){
2021-02-23 03:27:52
1140
原创 总结下关于使用React中的JSX的一些细节
jsx的细节最近在学react,而react的核心概念是万物皆js,而为了使用这个概念,react引入了jsx,将html的标签结合进js中jsx的书写规范JSX的顶层只能有一个根元素所以我们很多时候会在外层包裹一个div原生,我经常使用vue 的template,这点和template很像,最外层只能存在一个标签.(但是这点在vue3中改变了,vue3 的template我测试了下,可以放好几个标签,不用在最外层包裹一个)jsx可以使用括号()来换行下图中的return里放进去的是html标签
2021-02-22 23:19:32
309
原创 echarts 小技巧,当我需要点击echart图标标题或者其他内容时,如何设置事件呢?
以title为例第一步,设置title的triggerEvent为true这是你会发现,鼠标移到title上会变成小手指,相当于设置了cursor:pointer淦,不能截图,反正鼠标放上去样式就变了title: { x: "center", y: "center", textAlign: "center", text: "30%", top: "center", left: "3
2021-01-19 19:34:07
2134
原创 如何用纯css控制边框虚线的长度或者间隔
入职新单位啦~一直没时间写东西;这几天开发新页面,ui给的图上的虚线是css的dash线不能实现的css 上的效果是这样的而设计图上是这样子的经过查了一会儿发现可以用神奇的css背景颜色渐变来处理div { border: 1px solid transparent; background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.5
2021-01-06 08:48:26
7627
原创 如何在Vue3中使用router
如何在Vue3中使用router//在vue的js或ts文件中引入vue-router的方法import {createWebHashHistory,createRouter} from 'vue-router'官方提供 createWebHashHistory和 createRoutercreateWebHashHistorycreateWebHashHistory 指哈希模式createWebHistory指history模式无论哪一种都需要在路由实例中做出设置createRou
2020-12-19 02:54:53
1753
3
原创 使用create-vite-app搭建Vue3项目，顺便看看初始化的Vue3和Vue2有啥区别
先安装vitenpm i create-vite-app然后根据官方文档创建文件夹搭建完成查阅相关资料npm init vite-appyarn create vite- app等价于全局安装create-vite-app然后cva <项目名称>或者 create-vite- app <项目名称>...
2020-12-18 23:57:56
4246
原创 使用Travis CI进行持续化测试服务
Travis CI进行持续化测试服务最近学会用chai和kama做单元测试，但是每次测试都要手动开启，实在是太麻烦了，要是在我项目提交后有人帮我进行测试就好了，Travis CI就可以帮我做这个第一步 写好你自己的测试环境第二步同步github第三步 根据官方文档配置.travls.yml文件https://docs.travis-ci.com/user/tutorial/官方支持这几种语言我这运行的node环境官方支持最多三个版本进行测试第四步 提交到github然后他就会帮你测
2020-12-08 10:28:55
202
原创 brew安装node not found ？其实是 Homebrew /usr/local写入权限问题！
首先，安装brew 的node 遇到下面这个问题运行 brew doctor提示：好，我按照你说的运行好，哪找你说的都做一遍全是文件夹权限的问题！！！！，OSX11真有你的啊。解决办法网上使用了很多修改文件夹权限的问题，都不行？？？比如下面这个sudo chown -R $(whoami) /usr/local//不行不行不行那干脆直接手动修改权限吧！直接把根文件夹share还有其他报错的文件夹的权限给开咯最后选择应用到所有最后成功...
2020-12-02 14:28:13
886
原创 [手写系列]使用原生js造一个简易的React轮子
今天就手写一个简单的React造轮子能让我们更加深入理解React及其思想.JSX是JavaScript语法的扩展,用于形象的描述一段DOM结构众所周知,react使用jsx,大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，<div />会被编译成React.createElement('div')在 JSX 中你可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来。每一个 React 元素事实上都是一个 JavaScript 对象，你
2020-12-01 14:21:16
467
原创 [手写系列]使用axios封装一个天气预报的package,并发布至NPM
第一步先初始化然后安装依赖,我要用到axios处理异步请求,所以要安装axios//初始化项目npm init//安装axiosnpm install -g http-severnpm install -save axios建议大家如果不能科学冲浪,把国内npm源换成淘宝源或者使用yarn.(而且科学冲浪还得开全局,开了全局还会卡,安装缓慢,卡到一半出问题,说多了都是泪,因此建议直接更换源)//直接换npm config set registry https://registry.npm
2020-11-28 02:39:56
575
原创 [手写系列]手写一个JSONP
写一个JSONP好久没写了,现在觉得还挺简单的…原理就是服务器返回告诉浏览器运行预先设置好的函数啊,一个是你让浏览器执行函数,一个是你告诉服务器再告诉浏览器执行函数,没啥区别.思路因为浏览器不能跨域,但是不禁止script标签加载不同源的网站,script标签随便加载.那么就可以用script发送不同源的ajax请求测试先用node写一个服务器,端口8888监听请求写了肯定没人看,还是截图直观,一看就懂terminal node执行,测试成功开启好了现在随便找个能写script的页面测
2020-11-26 11:08:23
284
原创 遇到 TS2741: Property ‘0‘ is missing in type ‘[]‘ but required in type [{xxx:string；yy:number}] 咋办?
我打算设置一个数组,数组内包含一个或多个对象当我这么写时,ts报错:TS2741: Property ‘0’ is missing in type ‘[]’ but required in type ‘[{ name: string; value: number; }]’.type X = [{name: string; value: number }]const x: X = []最后通过stackoverflow上查询到,恍然大悟:上面说,这是一个数组包含一个对象的情况,而不单单是
2020-11-25 21:23:11
4529
原创 自己封装一个在Vue.js 和 ts 中使用 Echarts的组件
自己封装一个在Vue.js 和 ts 中使用 Echarts.先把echarts给装了npm install echarts --savenpm install --save @types/echarts然后根据官方文档来先引入echarts:最上面那步不装types/echarts会有报错提示import echarts from 'echarts'然后挂载在组件的DOM上:<template> <div class="Charts"> <
2020-11-25 11:21:00
550
原创 记录一下自己过于年轻犯下的过错(关于数组的find或filter)
今天写项目,想实现一个,点击链接,进入二级页面,二级页面的内容,通过链接的$route.params.id在本地缓存中寻找到.以下就是localStorage内的内容通过页面的id,就可以寻找到具体对象问题来了,这个数组里的对象中的id是number$route.params.id中的id是string然后我一时脑抽,忽略了这个问题,将this.recordList.find(((item: { id: number}) => item.id === id))改成了this.re
2020-11-23 15:27:31
213
原创 做了个一个简单的id计数器
最近项目里有个需求,新建项目,然后每个项目生成一个id,点击项目进入二级页面,这个二级页面的路径通过id来区分那么就这样写:设i初始值为0每次新建项目+1但问题是如果每次刷新页面,i会重新变为0,又会重新计数,id就不是唯一id那么将i存进localstorage中,每次生成先查找,没有缓存那就是0,有那就原有的基础是+1封装下导出用ts写的let id: number = parseInt(window.localStorage.getItem('_idMax') || '1') ||
2020-11-20 09:14:57
284
原创 [Typescript]如何在全局中定义类型
如何在全局中定义类型第一步:在src目录中新建一个名为 xxx.d.ts的文件必须以.d.ts结尾第二步: 在ts文件中定义类型,如:type RecordItem = { tags: string[]; notes: string; type: string; amount: number; createdAt?: Date;}```最后,就可以引用了...
2020-11-14 17:31:43
2499
原创 [Vue小技巧] 父组件只需向子组件传递一个参数,子组件即可动态绑定多个class
实际项目中,我们经常遇到父组件控制子组件的css问题具体思路这样的父组件在子组件的标签上传递一个属性,比如<子组件名称 class-prefix = xxx >子组件使用props:[ 'classPrefix']来获得 名为classPrefix的属性因此,子组件中就有个属性classPrefix,他的值是xxx现在,子组件拥有了父组件传递给他的值那么就可以动态绑定class,使子组件的标签上的class = ’ xxx’为了达到这个目的,需要使用动态绑定v-bind例如
2020-11-11 15:10:39
872
原创 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
Vue引入SVG Sprite Loader时出现问题在shims-vue.d.ts文件中做相关配置,下图是配置’,然后提交的时候webstorm就报错了解决办法直接关闭any类型的警告：在 .eslintrc.js文件中找到rules 添加一行代码即可"@typescript-eslint/no-explicit-any": ["off"]万恶的eslink,希望对你有帮助...
2020-11-11 02:01:41
1446
原创 如何在Vue/Cli 4 中引入 svg图片
使用SVG sprite loader 可以帮助我们在网页中引入svg图片我们可以参照SVG sprite loader官方文档中对于引入loder和plugins的描述以下在webpack.config的文件中配置// webpack 1 multiple loaders{ test: /\.svg$/, loaders: [ `svg-sprite-loader?${JSON.stringify({ ... })}`, 'svg-transform-loader',
2020-11-10 17:02:43
467
原创 Vue的路由
啥是Vue路由刚看到这个名字很迷惑,以为是路由器路由是一个网路工程的术语**路由(routing)**就是通过互联的网路把信息从原地址传输到目的地地址的活动—维基百科简单理解就是将信息从一个地方转到另外一个地方路由器提供两种机制:路由和传送路由是决定数据包从来源到目的地的路径转送将输入端的数据转移到合适的输出端一进一出,数据进来,给到路由器,路由器根据路由表,找到mac地址,然后根据mac地址绑定的内网ip,传送到终端路由好处都有啥?世界人民都用它?在前几年后端分离模式之后,现在
2020-11-05 02:15:11
774
原创 Vue报错:There are multiple modules with names that only differ in casing.
有多个模块的名称只是大小写不同。谨记,路径的大小写不要写错.例如PostList写错成Postlistimport Postlist from '../components/PostList.vue'//写错成import Postlist from '../components/Postlist.vue'
2020-11-04 09:57:15
349
原创 Failed to connect to raw.githubusercontent.com port 443: Connection refused咋办??
最近在使用curl的方式安装 oh-my-zsh,结果terminal直接报错,气死! ! !根据提示,是连接有问题看来是提示上的网址连接失败,百度说是DNS污染,我说你这种有什么好污染的?这不折磨人吗解决办法解决办法很简单,根据报错连接不上的网址,查询其ip,然后手动添加到本地hosts文件上去注意! ! ! 辣鸡mac hosts是只读文件,直接打开修改是不行的!所以需要使用命令行编辑hosts文件,而且还得是sudo命令//先转到etc目录cd /etc //使用管理员权限修改 h
2020-10-28 11:08:13
341
原创 Mac端Vue脚手架安装报错:ERR! code EEXIST； ERR! Refusing to delete xxx
Mac端vue脚手架安装的报错这几天安装Vue的脚手架,全局安装vue/cli. 但是安装时出现问题,以下是报错截图解决办法Mac用户前往npm的node_modules文件夹点击窗口-前往-下面这个地址/usr/local/lib/node_modules删除图中的@vue文件夹再次运行npm install -g @vue/cli然后成功...
2020-10-28 10:15:06
1533
2
原创 webpack 的命令配置
一般使用webpack命令打包时,会配置webpack.config.js文件来规定entry和output配置的代码如下,有使用到nodejs的模块const path = require('path') //加载path模块,本地没有就从nodejs全局安装路径寻找module.exports = { entry:'./src/main.js',//要打包的文件 output:{//打包成的文件路径 path: path.resolve(__dirname,'dist'),//自
2020-10-27 16:04:15
255
原创 Vue非父组件之间的通信
Vue非父组件之间的通信假设子组件A向子组件B传递信息现在Vue实例中的data中设置名为bus 的Vue实例中介.子组件A在设置监听事件,并设置方法,子组件A的方法为(假设点击事件),通过$root.bus.emit()提交当前的信息给子组件B的自定义事件子组件B通过声明周期钩子,通过created,在实例刚创建的时候,监听这个函数,通过$root.bus.$on('自定义事件',function(value){})接收一个子组件A的参数value通过公共的Vue实例bus总而言之子
2020-10-22 14:38:59
150
原创 Vue组件的使用方法
Vue组件的使用方法Vue组件化思想组件化是Vue中的重要思想他提供了一种抽象,让我们可以开发出一个个可复用的小组件来构造我们的应用任何应用都会被抽象成一颗组件树组件化思想的应用尽可能的将页面拆分成一个个可复用的小组件方便代码管理,可复用性强注册组件的基本步骤组件使用分为三个步骤1.调用Vue.extend创建构造器传入template代表我们自定义组件的模板,该模板就是使用到组件的地方,要显示的html代码2.Vue.component() 注册组件(全局注册和局部注册)
2020-10-22 11:30:44
340
原创 Vue中名称命名的大小写问题
在html中,字母是不区分的大小写的html中会把大写默认转换成小写因此,Vue组件的命名不能使用驼峰命名直接复制到html标签上否则在寻找组件名称时,小写名称和js中的驼峰命名组件名称不匹配所以会找不到那么咋办呢?用短横线命名啦在Vue组件中,父组件给子组件传递信息,必须使用短横线命名因为涉及html在template中,父组件给子组件传递信息,必须使用驼峰命名template只能用驼峰在组件的data函数中,传递父组件的数据,使用this.xxx时,只能使用驼峰命名
2020-10-21 23:35:31
1971
原创 Vue中的v-model的相关
v-modelVue提供了v-model指令,用于双向绑定事件v-model双向绑定data内的数据,当修改input表单内的内容时,data的数据也会发生变化,当data内的数据发生变化时,表单内容发生变化如果使用v-bind:value使表单绑定data数据,当data数据发生变化时,表单内容会变化当表单内容变化时,data数据不会改变因此,使用:value绑定表单,这是单向绑定可以使用绑定表单的内置事件 v-on:input 来改变data数据实现双向绑定(绑定当前点击事件的valu
2020-10-16 15:24:04
325
原创 Vue中的各种内置指令
Vue中的各种内置指令基本指令v-cloak网速特别慢或者遇到其他加载问题时,浏览器会先展示dom文本,然后再加载内容,给用户提供很差的体验.体验差,那还不如直接白屏,再出现渲染完的内容v-cloak可以解决画面闪动的问题因为v-cloak在Vue结束编译时,从HTML元素上移除.还未编译完成就一直存在所以让v-cloak的元素一直存在的时候,隐藏html元素.这样用户在页面还没加载完的时候看到的是空白v-once定义它的组件或元素只渲染一次所以后续再怎么改变都不会再重新渲染条
2020-10-15 23:14:10
477
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人