自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 (精华2020年5月31日更新) react实战篇 react配置详解

以往的方式都是暴露配置文件来配置less,下面推荐一个craco,可以不需要暴露配置,进行配置。 首先安装craco yarn add @craco/craco 在根目录下添加 craco.config.js文件 const CracoLessPlugin = require('cra...

2020-05-31 10:50:41 15821 0

原创 (精华2020年5月31日更新) react基础篇 手写ssr服务端渲染

共用部分 import React ,{useState} from 'react' import {connect} from 'react-redux' import {getIndexList} from '../store/index�...

2020-05-31 07:30:10 15783 0

原创 (精华2020年5月28日更新) react基础篇 虚拟dom的渲染机制和性能调优

下面几种写法等同 //-------------------------1----------------------------- function Table ({rows}) { return ( <table> ...

2020-05-28 23:00:37 14648 0

原创 (精华2020年5月27日更新) react基础篇 setstate原理详解

先上张图 代码 // partialState 部分state ReactComponent.prototype.setState = function (partialState, callback) { invariant( typeof partialState === �...

2020-05-27 23:38:26 14751 0

原创 (精华2020年5月27日更新) react基础篇 react-hooks的useReducer的使用

import React , {useReducer} from 'react' // (state,action)=>newState const UseReducer = ()=>{ const reducer = (state,action) =>...

2020-05-27 23:10:07 14668 0

原创 (精华2020年5月27日更新) react基础篇 react-hooks的useEffect的使用

import React , {useEffect,useState} from 'react' const UseEffect = ()=>{ const [loading,setLoading] = useState(true) useEffect(...

2020-05-27 23:07:34 15479 0

原创 (精华2020年5月25日更新) react基础篇 react-hooks的useContext用法

import React , {useContext} from 'react' const UseContext = ()=>{ const UseContextCon = React.createContext({}) const Son ...

2020-05-25 00:12:50 14684 0

原创 (精华2020年5月25日更新) react基础篇 react-hooks的useState用法

import React , {useState} from 'react' const addCon = ()=>{ console.log(useState(0)); const [count,setCount] = useState(0)...

2020-05-25 00:11:30 15458 0

原创 (精华2020年5月24日更新) react基础篇 redux的使用和react-redux的使用

redux的核心api createStore() 创建包含指定reducer的store对象 store对象 redux库最核心的管理对象 内部维护着 state reducer对象 核心方法 getState() dispatch(action) subscribe r...

2020-05-24 19:48:05 15529 1

原创 (精华2020年5月24日更新) react基础篇 父组件到孙组件跨级传参

新版:跨级传参最主要是避免每层赋值,也避免用到dva import React from 'react' const {Provider,Consumer} = React.createContext('default') export default cl...

2020-05-24 11:48:22 15442 0

原创 (精华2020年5月24日更新) react基础篇 ref的三种方式

import React from 'react' export default class RefDemo extends React.Component { constructor() { super() this.objRef = React.cre...

2020-05-24 11:39:28 14719 0

原创 (精华2020年5月24日更新) react基础篇 react-router-dom的基本使用

首先安装 npm i react-router-dom 到index.js中加入如下代码 import React from 'react'; import ReactDOM from 'react-dom'; import './index....

2020-05-24 10:11:05 14793 0

原创 (精华2020年5月24日更新) react基础篇 pwa的配置

首先 npm i workbox-webpack-plugin 在到webpack配置文件中添加插件 const WorkboxWebpackPlugin = require('workbox-webpack-plugin') plugins: [ new M...

2020-05-24 08:41:36 15477 0

原创 (精华2020年5月24日更新) react基础篇 组件的生命周期

import React from 'react'; import logo from './logo.svg'; import './App.css'; class App extends React.Component{ cons...

2020-05-24 00:41:25 14863 0

原创 (精华2020年5月24日更新) react基础篇 脚手架配置详解

2020-05-24 00:27:12 15485 0

原创 (精华2020年5月23日更新) react基础篇 脚手架版todolist的实现

app.js import React from 'react' import TodoMain from './components/TodoMain'; import TodoHeader from './components/TodoHead...

2020-05-23 00:19:34 14688 0

原创 (精华2020年5月23日更新) react基础篇 html版 todolist的实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-22 23:04:01 15409 0

原创 (精华2020年5月22日更新) react基础篇 父组件传值到子组件prop的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-22 22:50:16 14617 0

原创 (精华2020年5月22日更新) react基础篇 this的指向问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-22 22:41:07 15294 0

原创 (精华2020年5月22日更新) react基础篇 组件的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-22 22:40:15 14715 0

原创 (精华2020年5月22日更新) react基础篇 html中使用react

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-22 22:18:56 15429 0

原创 (精华2020年5月21日更新) vue实战篇 实时通信websocket的封装结合vue的使用

import webSocket from '../webSocket.js'; export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf...

2020-05-21 23:00:37 15183 0

原创 (精华2020年5月21日更新) vue实战篇 缓存页面的强制更新

页面缓存后,页面是不会变化的。要使缓存页面变化可以利用路由的钩子函数beforeRouteLeave。 <template> <div </div> </template> <script> export default { met...

2020-05-21 22:21:56 15527 0

原创 (精华2020年5月17日更新) vue实战篇 手写vue底层源码

MYvue.js 主要作用监听属性变化 class MYvue { constructor(options) { this.$options = options; this.$data = options.data; //数据劫持 ...

2020-05-17 10:32:17 14953 0

原创 (精华2020年5月16日更新) vue实战篇 mixin插件开发

插件开发以vue-router为例 import Vue from 'vue' // import VueRouter from 'vue-router' import VueRouter from '../MYRouter/index.js�...

2020-05-16 22:12:47 15479 0

原创 (精华2020年5月16日更新) vue实战篇 vuex的多store仓库的使用

const state = { country: '中国' } const getters = { getCountry(state) { return state.country } } const mutations = { updateCount...

2020-05-14 23:15:02 15540 0

原创 (精华2020年5月14日更新) vue实战篇 vuex的使用和vuex辅助函数的使用

vuex的基本使用 store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); //定义属性 var state = { count:6, country:...

2020-05-14 22:56:36 14687 0

原创 (精华2020年5月14日更新) vue实战篇 element-ui日历实现日程安排和区间查询

首先在template加如下代码 <el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> ...

2020-05-14 08:50:57 16081 0

原创 (精华2020年5月14日更新) vue实战篇 vue-router动态路由的实现权限控制

router.js import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import home from '../pages/home.v...

2020-05-12 23:55:58 14697 0

原创 (精华2020年5月12日更新) vue实战篇 axio.js封装和环境配置

首先安装 npm i cross-env package.jsom "scripts": { "test":"cross-env scene=test webpack --config webpack.config.js", ...

2020-05-12 23:04:48 14533 0

原创 (精华2020年5月17日更新) vue实战篇 vue.config.js配置详解

新版vue脚手架中webpack已经封装好看不见,需要vue.config.js代替配置 module.exports = { publicPath:'/wuhan', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath...

2020-05-10 18:06:29 14940 0

原创 (精华2020年5月12日更新) vue教程篇 webpack配置详解

package.json的启动 "scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production",...

2020-05-10 10:24:21 15477 0

原创 (精华2020年5月8日更新) vue教程篇 手写脚手架vue-cli

首先先上脚手架目录webpack-demo webpack-demo |-index.html |- src ---- |-main.js 入口文件 ------|-App.vue vue文件 |-package.json 工程文件 |-webpack.config.js webp...

2020-05-08 23:44:40 15121 0

原创 (精华2020年5月8日更新) vue教程篇 vue-router路由的权限控制

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>权限控制- filters</title>...

2020-05-08 22:38:38 14279 0

原创 (精华2020年5月8日更新) vue教程篇 vue-router路由的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由基本用法</title> <s...

2020-05-06 23:54:36 14265 0

原创 (精华2020年5月6日更新) vue教程篇 slot插槽(内容分发)的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot内容分发</title> <...

2020-05-06 23:51:42 14662 0

原创 (精华2020年5月6日更新) vue教程篇 非父子组件相互传参(发布订阅)

第三个vue实例实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的通信</ti...

2020-05-06 23:48:53 15395 0

原创 (精华2020年5月20日更新) vue教程篇 父子组件相互传参

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-06 23:33:38 15437 0

原创 (精华2020年5月6日更新) vue教程篇 模板template的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-06 23:21:50 14723 0

原创 (精华2020年5月6日更新) vue教程篇 组件component的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2020-05-06 23:18:33 15452 0

提示
确定要删除当前文章?
取消 删除