2021年08月_南朝听月

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创组件通讯，组件的props

组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯组件的props组件是封闭的，要接收外部数据应该通过props 来实现props的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过参数props接收数据，类组件通过this

2021-08-31 18:18:22 110

原创 react组件基础综合练习

import React from "react";export class Zonghedemo extends React.Component { constructor() { super(); this.state = { comments: [ { id: 1, name: "jack", content: "沙发" }, { id: 2, name: "kate", content: "板凳" }, { id:.

2021-08-31 16:30:53 178

原创 a标签清除默认样式，清除默认样式

清除默认样式的思路：总想着有个api可以一键清除样式，其实是做不到的，只能看默认的样式是什么。然后老老实实的找到这个css属性，利用层叠性将他覆盖掉。<a href="#" style="text-decoration:none;color: black;">我是测试</a>...

2021-08-31 16:22:10 1424

原创 Promise.race()方法

Promise.race()方法Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。const p = Promise.race([p1, p2, p3]);上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resol

2021-08-31 16:06:43 18756 1

原创非受控组件

说明：借助ref，使用原生DOM方式来获取表单元素值ref的作用： == 获取DOM或者组件==import React from 'react'; export class Feishoukong extends React.Component { constructor () { super() // 1、调用React.createRef()方法创建一个ref对象 this.txtRef = React.createRef()

2021-08-30 23:08:28 56 1

原创修改video标签自带按钮的默认样式

这里所说的修改video标签中自带按钮的默认样式，指的是用css就可以控制视频播放按钮的大小等我们来看一下 video 的内部构造：chrome 下，开发者工具 setting Preferences Elements 勾选 “Show user agent shadow DOM”再回来看，已经可以看到 video 的内部结构了看一眼，有没有看到很熟悉的 -webkit-media-controls-fullscreen-button ？确实如此，其他的按钮，包括播放按钮、播放进度条、静

2021-08-30 14:54:31 2554

原创 css样式的书写顺序及其原理

上来先说口诀：定自文新。具体规则顺序如下：（1）定位属性：position display float left top right bottom overflow clear z-index（2）自身属性：width height padding border margin background（3）文字样式：font-family font-size font-style font-weight font-varient color（4）文

2021-08-30 14:32:45 164 2

原创 js返回上一页面

情景：页面从a跳转到b页面了（没有新开标签页），在b页面上进行操作，然后返回到a页面。function () { window.history.go(-1)}

2021-08-30 14:20:34 1830

原创属性名表达式

JavaScript 定义对象的属性，有两种方法。// 方法一obj.foo = true; // 方法二obj['a' + 'bc'] = 123;上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内。但是，如果使用字面量方式定义对象（使用大括号），在 ES5 中只能使用方法一（标识符）定义属性。var obj = { foo: true, abc: 123};ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即

2021-08-27 17:56:43 466

原创 form表单中的name属性

name属性如果给[ ]，在提交表单的时候会把多个name值自动组成数组提交size属性表现为两种属性，一种是type为text和password,size表现为可见内容的宽度，其他类型的input框表现为以像素为单位的输入字段宽度；常见用法：<p>PIN: <input type="text" name="pin" maxlength="2" size="2" /></p>用maxlength配合size属性进行直接布局注意size属性有兼容性问题，一般不要.

2021-08-27 15:53:21 1271

原创 react中受控组件

受控组件的由来HTML中的表单元素是可以输入的，也就是有自己的状态（当你在input框中进行输入的时候是可以看到值变化的，也就是有自己的状态）。而React中可变状态通常保存在state中，并且只能通过setState()方法修改。react将state与表单元素值value绑定到一起，由state的值来控制表单元素的值，这样就成了受控组件：HTML中的表单元素其值受到react控制的表单元素。state = {count：0};this.setState({count:this.state.cou

2021-08-26 10:48:20 369

原创 react中this的指向问题

export class Shijian extends React.Component { constructor() { super(); //es6里面规定的，构造函数里必须这个super函数 this.state = { count: 10 } } render() { return (<div> <h1>计数器:{this.state.co

2021-08-25 22:43:44 234

原创组件setState的使用

状态是可变的语法：this.setState({ 要修改的数据})注意：不要直接修改state 中的值，这是错误的！！！setState() 作用：1. 修改 state 2. 更新UI思想：数据驱动视图setState() 方法接受的是一个对象参数（直接键值对去写就行，内部react自己会进行一个处理）。export class Shijian extends React.Component { constructor() { super(); //es6里面规定的.

2021-08-25 22:09:59 144

原创组件中state的使用

状态（state）即数据，是组件内部的私有数据，只能在组件内部使用state 的值是对象，表示一个组件中可以有多个数据通过 this.state 来获取状态export class Shijian extends React.Component { constructor() { super(); //es6里面规定的，构造函数里必须这个super函数 this.state = { count: 10 } };.

2021-08-25 21:46:49 364

原创 this指向改变

call方法的作用是调用函数，并且改变函数的this指向，this指向为call方法的第一项，其余后面的都是参数。apply() 与call（）非常相似，不同之处在于提供参数的方式，apply（）使用参数数组，而不是参数列表。 var Person = { name: "zs", age: 22, }; function fn(x, y) { console.log(x + "," + y); console.log

2021-08-25 16:20:14 60

原创 this指向问题

<!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-08-25 15:48:31 58

原创有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件状态（state）即数据  函数组件没有自己的状态，只负责数据展示（静）类组件有自己的状态，负责更新UI，让页面“动”起来比如计数器案例中，点击按钮让数值加1 。0 和 1 就是不同时刻的状态，而由0 变为 1 就表示状态发生了变化。状态变化后，UI 也要相应的更新。React 中想要实现该功能，就要使用有状态组件来完成。...

2021-08-25 14:15:10 205

原创 react中事件对象

可以通过事件处理程序的参数获取到事件对象；react中的事件对象叫做：合成事件（对象）合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题export function App () { function handleClick (e) { console.log("点击了",e) }; return (<button onClick={handleClick}>点击</button>)}...

2021-08-25 11:29:19 413

原创 react中事件绑定

React中事件绑定与DOM比较类似：React----onClick Dom----onclick;语法：on + 事件名称 = {事件处理程序}，比如： onClick={ () => {} };注意：React事件采用驼峰命名法，比如：onMouseEnter、onFocus；与众不同：创建组件的时候直接就写好了方法demo：import React from "react";export class Shijian extends React.Component { h

2021-08-24 15:36:09 154

原创 react中组件都是独立抽离出来

组件：import React from 'react';class Nihao extends React.Component { render() { return (<div className="hello">将组件组合在一起</div>) }};export default Nihao;使用组件：import React from 'react';import ReactDOM from 'react-dom';import

2021-08-24 15:15:35 185

原创 DOM元素的特性和属性

1、特性每个DOM元素都有一或多个特性，特性用来给出相应元素或其内容的附加信息，特性名称不区分大小写。特性设置：通过在HTML文档标签中设置`attributeName='value'`，或者通过`element.setAttribute('attributeName','value')`设置；特性访问：通过`element.getAttribute(attributeName)`取得特性值；删除特性：通过方法`element.remo

2021-08-19 21:34:54 961

原创高德地图中画遮罩

1、搭配高德的DistrictSearch方法。 var map = new AMap.Map('container', { resizeEnable: true, zoom: 8, center:[116.44923,40.207714], layers:[ new AMap.TileLayer.RoadNet({ zIndex:20 }),

2021-08-19 14:36:16 1517

原创浏览器崩溃

开发过程中，出现了网页没有响应浏览器崩溃掉的情况浏览器转转转，半天加载不进来而且就算五六分钟加载进来之后，页面的交互是比较卡顿的，打个搜索的字就会卡的一顿一顿的。问题解决：看了控制台所有的请求，就看那个接口阻塞了，进行排查。但是并没有解决问题。最终问题解决：主屏上的列表没有做分页，直接请求所有的数据，进行渲染，导致数据量太大，浏览器处理不过来，导致浏览器的崩溃。浏览器处理的数据是有上限的，在这个上限以下都是非常得丝滑。对数据进行分页处理，加载也就三五秒就完成。...

2021-08-18 19:45:10 257

原创 TypeError: Cannot read property ‘length‘ of null

参考如下代码讲解：在请求回调里将请求返回的值进行一个赋值操作，如果我们的后台不规范，当数据为空的时候，给前端返回了一个null，而不是一个空数组。而且此时可以看到我们在代码中其实是用到了这个值进行了一个判断渲染，null上面怎么会有length属性呢。所以不妨看一看后台接口返回的是个什么鬼。<sn-container left="74.3" top="4.25" :show="Boolean(annunciator.data.length)"> <sn-figure

2021-08-14 14:39:07 2318

原创 vue3优势-----为什么学习vue3

优点：最火的框架，国内最火的前端框架之一。性能提升，运行速度是vue2的1.5倍。体积更小，按需编译体积vue2要更小。类型推断，更好的支持ts这个也是趋势。高级给予，暴露了更底层的API和提供更先进的内置组件。组合API，能够更好的组织逻辑，封装逻辑，复用逻辑vue3展望：技术就是越新越好，越来越多的企业都会升级vue3大型项目，由于对TS的友好越来越多的大型项目可以使用vue3总结：适应市场，提高自己的竞争力，为加薪提供空间...

2021-08-13 21:52:13 1294

原创 document、offsetWidth、clientWidth、scrollWidth

关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清，这里就来总结一下这些方法的用法和含义。注意：下面元素属性和元素方法都通过 elem.属性或 elem.方法的方式使用，window属性通过 window.属性的方式使用，document属性则通过document调用。/* ****** 元素视图属性 * offsetWidth 水平方向 width + 左右padding + 左右border-width * offse

2021-08-11 17:07:47 195

原创 arguments对象转换为数组

将函数里的arguments，转换成一个真正的数组的方法。arguments是个类数组，除了有实参所组成的类似数组以外，还有自己的属性，如callee，arguments.callee就是当前正在执行的这个函数的引用，它只在函数执行时才存在。因为在函数开始执行时，才会自动创建第一个变量arguments对象。一、arguments是个类数组它将实参以数组的形式保存着，还可以像数组一样访问实参，如：arguments[0]；它也有自己独特的属性，如：callee；它的长度是实参的个数。那argum

2021-08-06 10:40:26 492

原创 input:placeholder修改位置

.yjtj-day .el-input__inner::placeholder { text-align: left; font-size: 0.4687rem; font-family: Source Han Sans CN; font-weight: bold; color: #b1e8fd; line-height: 1.9rem; position:relative; top: -0.1rem;}使用： position:relative; top: -0.

2021-08-03 15:09:56 3004