卡比兽爱睡觉-CSDN博客

原创 React基础之组件复用

1.render props模式书写规范：在需要复用的组件render()里返回return this.props.render(this.state)或者return this.props.children(this.state);在使用组件时传入（）的值注：render和children传入的位置不一样class Mouse extends React.Component { state = { x: 0, y: 0, }; mouseMoveHandler(e) {

2021-04-09 20:42:28 273

原创 React基础之常见生命周期

1.constructor执行时机：初始化组件时执行作用：初始化state，为事件绑定this2.render执行时机：页面渲染时作用：渲染页面3.componentDidMount执行时机：页面渲染完毕作用：在页面渲染完毕时执行各种操作（例如请求固定数据）4.componentDidUpdate执行时机：组件更新时执行例如：setState，props，forceUpdate()5.componentWillUnmount执行时机：组件卸载时执行作用：执行清理工作(例如清除定时

2021-04-07 14:04:24 233

原创 React之Props研究

1.props.childrenconst App = (props) => { return <div>{props.children}</div>;};const Btn = (props) => { return <button>按钮</button>;};ReactDOM.render( <App> <p>我是Children</p> <Btn></

2021-04-06 22:24:13 256

原创 React基础之组件通信

1.父组件传子组件class Parent extends React.Component { state = { name: "zs", }; render() { return ( <div> <Child name={this.state.name} /> </div> ); }}class Child extends React.Compone

2021-04-06 21:10:08 127

原创 React基础之条件渲染

import React from "react";import ReactDOM from "react-dom";const isLoading = true;const loadData = () => {return isLoading?(<div>loadign...</div>):(<div>加载完成</div>)};const title = (<div>{loadData()}</div>)React

2021-04-06 19:51:42 93

原创 React基础之受控组件与非受控组件

1.受控组件概念：把html原有的状态管理托管给React的setState案例：class App extends React.Component{ state={ text:'', content:'', city:'', isChecked:'' } valueChange(e){ const target=e.target const name=target.name const value=target.ty

2021-04-06 14:45:52 87

原创 React基础之事件绑定this指向解决方法

class App extends React.Component { state = { count: 0, }; //箭头函数、bind对应的方法 // addOne(){ // this.setState({ // count: this.state.count + 1, // }); // } //class类对应的方法 addOne=()=>{ this.setState({ count: this.stat

2021-04-05 21:05:19 83

原创 React基础之组件

一.函数式组件const Hello=()=><div>hello</div>ReactDOM.render(<Hello />, document.getElementById("root"));约束条件：1.函数名必须大写开头2.函数必须有返回值二.类组件class Hello extends React.Component{ render(){ return( <div>hello</div>

2021-04-05 20:30:55 82

原创 React基础之样式

1.内嵌式const title=(<p style={{color:"skyblue"}}>这是一段文字</p>)2.className从外部引入css文件import './index.css'const title=(<p className="word" style={{color:"skyblue"}}>这是一段文字</p>)

2021-04-05 17:15:06 68

原创 React基础之循环渲染

let arr = [ { id: 1, name: "李狗蛋", }, { id: 2, name: "李大柱", }, { id: 3, name: "赵四", }, { id: 4, name: "王五", },];const loadData = () => { return ( <ul> {arr.map((i) => ( <li

2021-04-05 16:55:21 284

原创 vue实现打印功能

1.下载包npm i vue-print-nb2.全局注册在main.js中全局注册import Print from 'vue-print-nb'Vue.use(Print)3.使用全局注册后就可以给按钮绑定v-print指令，v-print绑定的内容就是我们打印的内容，例如我们可以在data()里定义我们需要打印的内容id='box’就可以把整个id为box的div盒子打印下来<template> <div id="box" class="home">

2021-04-04 21:19:45 329

原创基于canvas实现贪吃蛇游戏

<!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" /> <titl

2021-04-04 20:45:14 252 1

原创浅谈Element ui el-upload上传图片

一般图片上传的设置流程1.设置上传地址（action）2.如果需要token值的话需要设置headers因为组件的请求方式是独立的，所以即使我们设置了请求拦截器追加了token也需要设置这个值3.如果需要限制每次上传图片数量请设置limit的值4.file-list绑定的图片数组5.设置on-change在图片传入时触发这个方法fileList可以拿到改变后的数组6.设置on-remove删除图片后触发file和fileList分别对应删除前的数组和删除后的数组7.设置before-uploa

2021-04-01 21:24:56 865

原创如何在vue引入Echarts以及如何自适应大小

Echarts引入官方文档给出操作步骤如下第一步安装echartsnpm install echarts --save第二步引入var echarts = require('echarts');// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({ title: { text: 'ECharts

2021-04-01 11:59:11 470

原创浅谈Element Ui自定义日历

官方写法<el-calendar>  <template slot="dateCell" slot-scope="{date, data}"> <p :class="data.isSelected ? 'is-selected' : ''"> {{ data.day.split('-').slice(1).join('-'

2021-03-31 21:26:08 1654

原创关于vue-cli生成的vue项目如何使用sass

之前在网上搜的vue配置sass的方法好像有点旧了，现在脚手架在安装的时候会自动帮你配置sass勾选上就好了

2021-03-30 11:46:05 137

原创 vue实现点击不同盒子改变不同颜色（气泡选择框版）

<template> <div> <div v-for="(item, id) in boxList" :key="id">  <!-- <div :class="['box',Active===id?colorList[id]:'']" @click="change(item,id)"> {{ item.textValue }} <

2021-03-30 11:37:46 1682

原创 vue开发遇到的问题及解决方案汇总

1.需要在数组对象中响应式添加新的属性值，直接通过.或者[’’]的方式添加会导致数据没有及时更新解决办法：vue自带的响应式添加方法$set(item,'newParam','value')

2021-03-25 10:17:11 464

原创学习keepAlive

在我们切换组件的时候，组件内的值会消失，但是我们又想保存组件内原有的值，这个时候就可以使用keepAlive1.按需加载router-view <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" />2 在路由中选择需要缓存的组件const routes = [ { path: '/'

2021-03-23 10:19:04 155

原创 vue联动mockjs模拟请求获取数据

前言：在我们实际开发中，前端和后端是同时进行开发的，我们不可能在开发的初期就要求后端立即写好接口，所以这个时候我们使用mockjs来模拟接口获取数据，这也是现在流行的开发模式，前后端分离1.安装依赖npm i -D mockjsnpm i -D json5在vscode扩展中安装JSON5 syntax2.新建mock文件夹且在文件夹新建index.js和userInfo.json5 index.js内容const fs = require('fs')const path = req

2021-03-22 17:50:06 2432

原创 eslint自动修复配置

1.Eslint Setting.json配置"files.autoSave": "afterDelay", "debug.node.autoAttach": "off", "powermode.enabled": true, "powermode.enableShake": false, "git.path": "D:\\git\\Git\\cmd\\git.exe", "sync.gist": "d7e513a6eb5feb156f299914740ba96f", "edito

2021-03-22 15:14:18 470

原创 Uniapp开发中遇到的问题

1.使用富文本rich-text时，若图片间有间隙，则使用正则给图片样式加块元素replace(/<img /g,'<img style="display:block;"')2.ios图片格式不兼容时，替换图片格式replace(/webp/g,'jpg')3.防抖的使用在搜索的时候使用定时器延迟请求，且在每次调用前清空定时器4.节流的使用在滚动靠近bottom时刷调用方法时打开节流阀例如idloading=true,在方法里的请求发出且拿到返回的数据后，关闭节流阀...

2021-03-21 19:15:18 782

原创 vue打包页面空白

1.vue.config.js里的配置中加一句publicPath: './'2.路由模式转换成hash模式(默认模式就是hash模式）

2021-03-15 17:28:02 171

原创简单html打包,webpack.config.js配置

const path=require('path')const HtmlWebpackPlugin=require('html-webpack-plugin')const htmlPlguin=new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html'})module.exports={ mode:'development', entry:path.join(__dirname,

2021-03-15 15:35:59 132

原创 vue打包优化

自己写完vue移动端页面在打包是发现了有个vendor文件大的离谱，去网上查的时候发现是因为自己引入的包在打包的时候一起打包了，这个时候需要排除我们引入的大的包，先附上代码新建vue.config.js里面写如下代码const externals = { // 这里写需要忽略的包vant只是举一个例子 vant: 'vant'}const cdn = { css: ['https://unpkg.com/vant/lib/index.css'], //包的css js: ['https:

2021-03-12 23:11:19 120

weixin_49421056的博客