- 博客(41)
- 收藏
- 关注
RSS订阅原创 vue使用axios实现下载功能
downloadExcel(response) //then直接下载，方法在下边。responseType: 'blob', //返回是个文件，
2022-10-20 15:11:39
571
原创 Vue和React的区别
vue是由尤雨溪为主导,团队进行配合开发出来的一个项,react是由facebook团队打造出来的一个框架,二者的难易程度不太一样,vue是一个以.vue为一个组件,是一个双向数据流的,而react是以.js或者以.jsx为一个组件,是单项数据流的,只能使用,不能进行修改,而且他们本身的一个模板也不一样，react侧重于一个状态的管理,vue侧重于数据方面的管理,react使用的是状态,vue使用的直接是属性,属性是你修改就会发生变化,而状态是必须设置以后才会发生改变,react是以状态管理为核心的东西,而
2021-10-11 14:31:06
238
原创 js数据转换 -树形结构转平铺结构，平铺结构转树形结构
树形转平铺html部分var text = [ {name:"鹅鹅",redre:{ name:"滴滴" }}, {name:"问问",redre:{ name:"方法" }}, {name:"任天",redre:{ name:"树形" }}, {name:"鹅鹅",redre:{ name:"头条" }}]js的部分 function arrToTree(
2021-09-23 16:15:42
444
原创 git的操作流程
git提交步骤克隆：git clone 地址进入克隆文件：cd 项目名创建分支：git branch dev-wxh创建dev：git branch dev查看分支：git branch查看修改文件：git status选中所有文件提交到缓存区：git add .提交本地仓库并添加feat描述：git commit -m "feat:修改"push到分支上：git push 地址 当前分支名切换到dev：git checkout dev把线上dev拉下来：g...
2021-09-21 11:26:05
58
原创 react中通过状态控制元素显示隐藏的三种方法
React控制元素显示和隐藏的方法目前我知道的有三种方法：第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。第二种是通过style控制display属性，类似vue 中的v-show。第三种是通过动态切换className。第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。class Demo extends React.Component{ constructor(props){
2021-09-16 18:49:09
1266
原创 不确定行数文本上下左右居中并且超出省略号代替
动态获取数据的时候不确定文本行数并且要求文本居中和超出的用省略号来代替.son{ overflow: hidden;//超出隐藏 text-overflow: ellipsis;//溢出用省略号显示 display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。 // 控制行数 -webkit-line-clamp: 2;//超出两行隐藏 -webkit-box-orient: vertical; // 从上到下垂直排列子元素 //（设置伸缩
2021-09-16 18:44:36
72
原创 react+typescript（移动端）
这是js+html的代码import React, { Component, createRef } from "react";import './index.less'interface Props {}interface State {}class Drag2 extends Component<Props, State>{ startX: number = 0 startY: number = 0 X: number = 0 Y
2021-09-16 17:30:18
99
原创 react+typescript 写拖拽 （pc端)
这是js和html的代码import React, { Component,createRef } from "react";import './index.less'interface Props{}interface State{}class Drag extends Component<Props,State>{ disX:number = 0 disY:number = 0 X:number =0 Y:number =0 drag=c
2021-09-16 17:14:58
70
原创 解决react配置完antd-Moblie后less失效的问题
1.在项目根目录配置一个config-overrides.js2.在config-overrides.js文件内写入const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobi.
2021-09-16 11:00:29
322
原创 使用react-app-rewired启动react项目报错
使用react-app-rewired启动react项目报错报错内容如下：关键报错内容：The “injectBabelPlugin” helper has been deprecated as of v2.0翻译过来就是：自2.0版起，“injectbabelplugin”助手已被弃用react-app-rewired的新版本删除了injectBabelPlugin，这些方法被移动到一个名为’customize-cra’的新包中解决方法：把react-app-rewire.
2021-09-16 10:04:30
270
原创 Delete package-lock.json (not package.json!) and/or yarn.lock in your React的小技巧
相信大家和我的报错一样都是这个当你按照步骤来创建react，发现到了最后一步 npm start运行不了。 回去看提示答案在报错的上面会有提示的只要在根目录下创建一个以.env的文件然后在里面写入SKIP_PREFLIGHT_CHECK=true然后npm start 重启一下这样就ok了，大家去试一试吧...
2021-09-16 10:02:06
412
原创 created-react-app,配置Ant Design Mobile
1.Ant Design Mobile这是官方文档https://mobile.ant.design/index-cn2安装antd-mobilenpm install antd-mobile --save3.按需加载3.1引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。npm install react-a...
2021-09-16 09:19:46
190
原创 react的跳转保存记录浏览时的位置
1、下载相关依赖项npm install react-keeper -s2、app.js中相关配置原来我们app.js中设置路由import { Component } from 'react';import { Link } from 'react-router-dom'import { renderRoutes } from 'react-router-config';import routes from './Routers/router' render() {
2021-09-12 21:08:36
569
原创 react的左右联动
效果图这是css的代码body { margin: 0; } .linkage { width: 100vw; height: 100vh; display: flex; .linkage-button { width: 20vw; height: 100vh; background: rgb(10, 253, 233); text-align: c...
2021-09-08 20:34:11
445
原创 react的预加载，上拉加载，下拉刷新，延迟加载
复制就可以用这是css的代码.zhuye { position: relative; } .loading { width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 0; z-index: 999; img { position: absolute; width: 10
2021-09-07 17:30:54
426
原创 前端基础全面的面试题
2019精选面试题.notehttps://blog.csdn.net/weixin_34099526/article/details/914611531、Vue实现数据双向绑定的原理是什么？2、Vue-router中keep-alive的理解3、平时通过什么途径提升自己4、vue响应式原理5、prosy的优缺点6、怎样监听数组7、计算属性和watch的区别8、vueX简述9、vuex可以做什么10、在vue遍历数组时，请简述:key的作用?11、虚拟dom与真实
2021-09-02 21:30:29
1245
原创 vue解决ios橡皮筋回弹
通过监听 touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 // 禁止页面滚动 var forbidScroll = function (e) { e.preventDefault(); }; // 通过 $once 来监听生命周期 beforeDestroy 钩子 this.$once("hook:beforeDestroy", () => { bod
2021-09-02 21:26:09
165
原创 前端的常见的面试题
2019精选面试题.notehttps://blog.csdn.net/weixin_34099526/article/details/914611531、Vue实现数据双向绑定的原理是什么？2、Vue-router中keep-alive的理解3、平时通过什么途径提升自己4、vue响应式原理5、prosy的优缺点6、怎样监听数组7、计算属性和watch的区别8、vueX简述9、vuex可以做什么10、在vue遍历数组时，请简述:key的作用?11、虚拟dom与真实
2021-09-02 21:24:53
603
原创 react配置redux
第一步：下载 react-redux 和reduxnpm i react-redux redux -D第二步：src路径下新建store文件store文件下新建index.js文件 import { createStore } from "redux";//引入公用的方法import { SET_NSME } from './action' //传值 name:姓名 age: 年龄function user(state = { name: 'blue', ag.
2021-09-02 20:37:52
214
原创 react配置axios二次封装
1.src文件夹下新建api文件夹2.api文件文件夹中新建index.js文件和request.js文件3.在api里面的api.js文件里面配置上import axios from "axios"; export const Service = axios.create({ timeout: 3000, //延迟时间 method: 'POST', headers: { "content-Type": "app...
2021-09-02 19:04:10
277
原创 react配置router路由教程
1.先下载以下相关依赖项npm install react-router-domnpm install react-router-config2.找到index.js然后引入按下图操作3.创建一个views的文件夹用来放创建的路由4.创建的路由初始化4.1第二个路由和第一个的路由是一样的5.创建一个routes文件夹里面创建一个index.js6.然后在app.js里面配置router 按照下图操作7.然后npm start 重启...
2021-09-02 17:49:29
189
原创 react配置反向代理
1,下载相关依赖项cnpm i http-proxy-middleware --save -dev2.在src目录下新建setupProxy.js3、然后在setupProxy.js写如下代码（2020-6-23日下载的版本）const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function (app) { app.use(createProxyMidd..
2021-09-02 15:36:35
193
原创 react 配置ant-Mobile
1、Ant Design Mobile中文文档2、安装 npm install react-app-rewired customize-cra --save-dev3，打开 package.json ，找见scripts 直接全部替换/* package.json */"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test":...
2021-09-01 19:46:25
941
原创 react配置px转rem
第1步 安装依赖项第2步 引入 在项目入口文件index.js引入lib-flexible第3步修改webpack.config.js3.1 初始化配置这一步这里可能会报错的 这样解决 先 git init 然后 git add.最后 git commit -m “init”然后在重新初始化一下3.2 引入一下找到postcss-loader替换成以下代码{ loader: require....
2021-09-01 19:15:01
336
5
原创 react配置less
1、npm run eject 暴露webpack配置文件！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下git add .git commit -m '自定义名'npm run eject2、npm i less less-loader-s 安装相关依赖npm i less less-loader-s 3、修改 webpack 配置第一步：在webpack.config.js文件中找到如下代码...
2021-09-01 18:54:55
85
1
原创 vue的两个小球交互
这是html和css的代码<template> <div class="home"> <div class="dabox"> <div class="xian"></div> <div class="xian ac" ref="hoxian"></div> <div class="box" @touchstart.prevent="FnState"></
2021-08-30 20:47:47
78
原创 vue的两个小球互推
这是html和js的代码<template> <div class="home"> <div class="dabox"> <div class="xian"></div> <div class="xian ac" ref="hoxian"></div> <div class="box" @touchstart.prevent="FnState"></d
2021-08-30 20:45:01
67
原创 react的生命周期
react的生命周期：componentWillMount 在渲染前调用。componentDidMount 在第一次渲染后调用。componentWillReceiveProps 在组件接收到一个新的props时被调用。这个方法在第一次渲染时不会被调用。shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。componentWillUpdate 在组
2021-08-30 20:36:34
64
原创 react实现选项卡
代码如下：复制就可以用了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2021-08-30 20:33:21
203
原创 react写拖拽 移动端的
这是代码： 复制就可以用哦<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-08-30 19:04:25
116
原创 vue的跳转记录保存当前位置
第一步：在router文件里面的index.js写入{ path: '/carsList', name: 'CarsList', //汽车列表 component: () => import(/* webpackChunkName: "about" */ '../views/CarsList.vue'), meta: { keepAlive: true //需要缓存 }}上面是跳转路由，主要是把meta添加到里面第二步：还...
2021-08-29 18:55:17
499
1
原创 图片预加载
写之前先安装一个插件然后在项目中找到mian.js文件引入一下在mian.js里面写入 写入要预加载的图片的路径将主页面上的需要预加载的scr的图片前缀名换成 v-lazy 开头的这样就完成了 ...
2021-08-11 16:33:02
90
原创 仿优信的下拉刷新加小车动画
先创建一个路由然后在路由里面加上一些代码<template> <div class="weui-pull-refresh" ref="scrollBox" :style="style" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" > <div class="weui-pull-refreshing-bo.
2021-08-10 11:14:22
143
原创 vue中px转rem教程
1：下载插件安装px2rem-loader(devDependencies) npm install px2rem-loader -D移动端适配解决npm包 "lib-flexible" (dependencies)npm install lib-flexible -D 此时下载的插件其实可以用来，但是px2rem-loader这里只能仅限于css，并不能满足大多数开发需求，比如使用less,stylus,scss...这个时候就需要postcss--p...
2021-08-04 18:45:38
1201
原创 仿美团的小球抛物线
直接上代码在html部分的最大的盒子内放入 <!--小球--> <div v-for="(ball, index) in balls" :key="index"> <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop"
2021-07-20 14:49:36
153
3
原创 如何设置最小字体
使用 transform: scale(）直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca.
2021-07-20 14:34:20
549
原创 圣杯布局和双飞翼布局的区别，作用以及优缺点
作用：圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。优缺点：不需要添加dom节点缺点：如果将浏览器无线放大时，「圣杯」将会「破碎」掉。当middle部分的宽小于le
2021-07-20 14:32:31
817
原创 关于的BFC的详情
BFC是什么bfc是一个独立的容器，它里面的子元素不受外界的影响如何创建bfc1.float的值不是none2.position的值不是static或者relative3display的值是inline-block，table-cell，flex。table-caption或者inline-flex4.overflow的值不是visibleBFC的作用1.利用BFC避免margin重叠这是margin重叠的代码这是没有BFC的<!DOCTYPE html&
2021-07-20 14:26:37
56
原创 VUE中this的指向问题
普通函数默认调用 fn this指向 window方法 arr.fn this 当前的方法属于谁，this就是谁事件 document.onclick this 当前的方法属于谁， this就是谁/当前发生事件元素定时器 setTimeout this 指向 windownew ...
2021-07-01 19:25:55
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人