2020年05月_2b勿扰

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

以往的方式都是暴露配置文件来配置less，下面推荐一个craco，可以不需要暴露配置，进行配置。首先安装cracoyarn add @craco/craco在根目录下添加craco.config.js文件const CracoLessPlugin = require('craco-less');//配置lessmodule.exports = { plugins: [{ plugin: CracoLessPlugin, options: {

2020-05-31 10:50:41 16369

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

共用部分import React ,{useState} from 'react'import {connect} from 'react-redux'import {getIndexList} from '../store/index'const Index = (props) => { let [count,setCount] = useState(1) return ( <div> <h1>服务端渲染<

2020-05-31 07:30:10 16031

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

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

2020-05-28 23:00:37 14900

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

先上张图代码// partialState 部分stateReactComponent.prototype.setState = function (partialState, callback) { invariant( typeof partialState === 'object' || typeof partialState === 'function' || partialState == null, 'setState(...): takes an o

2020-05-27 23:38:26 15074

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

import React , {useReducer} from 'react'// (state,action)=>newStateconst UseReducer = ()=>{ const reducer = (state,action) =>{ if(action.type === 'add'){ return { ...state, count:state.coun

2020-05-27 23:10:07 14890

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

import React , {useEffect,useState} from 'react'const UseEffect = ()=>{ const [loading,setLoading] = useState(true) useEffect(()=>{ setTimeout(()=>{ setLoading(false) },2000) }) return ( loadin

2020-05-27 23:07:34 15668

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

import React , {useContext} from 'react'const UseContext = ()=>{ const UseContextCon = React.createContext({}) const Son = () =>{ const {name} = useContext(UseContextCon) return ( <p>我是son组件我的名字是{nam

2020-05-25 00:12:50 15277

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

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

2020-05-25 00:11:30 15763

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

redux的核心apicreateStore()创建包含指定reducer的store对象store对象redux库最核心的管理对象内部维护着 state reducer对象核心方法getState()dispatch(action)subscriberedux的三个核心概念action标识要执行行为的对象包含两个方面的属性type 标识属性值是字符串唯一必要的属性xxx 数据属性值类型是任意的可选属性const action ..

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

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

新版：跨级传参最主要是避免每层赋值，也避免用到dvaimport React from 'react'const {Provider,Consumer} = React.createContext('default')export default class ContextDemo extends React.Component { state={ newContext:'createContext' } render() { const {newCon

2020-05-24 11:48:22 15777

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

import React from 'react'export default class RefDemo extends React.Component { constructor() { super() this.objRef = React.createRef()//第一种 // { current: null } } componentDidMount() { // console.log(`span1: ${this.refs.ref1.text

2020-05-24 11:39:28 15031

原创 (精华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.css';import App from './App';import * as serviceWorker from './serviceWorker';import {HashRouter,BrowserRouter} from 'react-route

2020-05-24 10:11:05 15227

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

首先npm i workbox-webpack-plugin在到webpack配置文件中添加插件const WorkboxWebpackPlugin = require('workbox-webpack-plugin')plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), new WorkboxWebpackPlugin.GenerateSW({

2020-05-24 08:41:36 17743

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

import React from 'react';import logo from './logo.svg';import './App.css';class App extends React.Component{ constructor(props){ super(props) this.state = { msg:'第一次的消息' } } componentWillMount(){ console.log(this.state.msg);

2020-05-24 00:41:25 15137

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

2020-05-24 00:27:12 15791

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

app.jsimport React from 'react'import TodoMain from './components/TodoMain';import TodoHeader from './components/TodoHeader';import TodoFooter from './components/TodoFooter';class App extends React.Component{ constructor(props){ super(props)

2020-05-23 00:19:34 15009

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>todoList</title></head><body> <div id=

2020-05-22 23:04:01 15638

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>prop</title></head><body> <div id="app"&

2020-05-22 22:50:16 14861

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>this</title></head><body> <div id="app

2020-05-22 22:41:07 15438

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单组件</title></head><body> <div id="app

2020-05-22 22:40:15 14917

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</title></head><body> <div id="ap

2020-05-22 22:18:56 15684

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

import webSocket from '../webSocket.js';export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

2020-05-21 23:00:37 15934

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

页面缓存后，页面是不会变化的。要使缓存页面变化可以利用路由的钩子函数beforeRouteLeave。<template> <div </div></template><script>export default { methods: { }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console

2020-05-21 22:21:56 16051 1

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

MYvue.js 主要作用监听属性变化class MYvue { constructor(options) { this.$options = options; this.$data = options.data; //数据劫持 this.observe(this.$data); this.$el = options.el; //包含Watcher创建 new Complie(optio

2020-05-17 10:32:17 15314

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

插件开发以vue-router为例import Vue from 'vue'// import VueRouter from 'vue-router'import VueRouter from '../MYRouter/index.js'Vue.use(VueRouter)// 执行install方法const routes = [ { path:'/', redirect:'/goods' }, { path: '/goods', name: 'g

2020-05-16 22:12:47 15738

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

const state = { country: '中国'}const getters = { getCountry(state) { return state.country }}const mutations = { updateCountry(state, payload) { state.country = payload.country; }}//用来管理mutationsconst actions = { updateCountry({

2020-05-14 23:15:02 18579

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

vuex的基本使用store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);//定义属性var state = { count:6, country:'中国'};//定义gettersvar getters = { count(state){ return state.count }, isEvenOrOdd(state){ return

2020-05-14 22:56:36 15303

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

首先在template加如下代码<el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''"> <div class="calendar-day">

2020-05-14 08:50:57 18652

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

router.jsimport Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);import home from '../pages/home.vue';import news from '../pages/news.vue';var allRoutes = [{ path:'/login', name:'login', meta:{ title:'登陆'

2020-05-12 23:55:58 15434

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

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

2020-05-12 23:04:48 14938

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

新版vue脚手架中webpack已经封装好看不见，需要vue.config.js代替配置module.exports = { publicPath:'/wuhan', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致 outputDir:'dist3', //打包路径地址,Default: 'dist' ,代替 output.path assetsDir:'assets1', //放置生成的静态资源 (js、css、img、

2020-05-10 18:06:29 15483

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

package.json的启动"scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" }基本共用配置文件webpack.common.jsvar webpack = require('webpack');var path = r

2020-05-10 10:24:21 16012

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

首先先上脚手架目录webpack-demowebpack-demo|-index.html|- src---- |-main.js 入口文件------|-App.vue vue文件|-package.json 工程文件|-webpack.config.js webpack配置文件|-.babelrc Babel配置文件安装如下包npm install vue -Snpm install webpack -Dnpm install webpack-cli -D

2020-05-08 23:44:40 15550

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>权限控制- filters</title> <style> .active { font-size: 20px; color: #ff7300; text-decoration: none; } .main-menu a { display

2020-05-08 22:38:38 14678

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由基本用法</title> <style> /* .router-link-active{ font-size:20px; color:#ff7300;...

2020-05-06 23:54:36 14774

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot内容分发</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri...

2020-05-06 23:51:42 14844

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

第三个vue实例实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件间的通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&...

2020-05-06 23:48:53 15522

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传参组件&lt...

2020-05-06 23:33:38 15660

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用模板</t...

2020-05-06 23:21:50 15224

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义组件的方式&lt...

2020-05-06 23:18:33 15916

空空如也

空空如也