- 博客(14)
- 收藏
- 关注
原创 Vue 组件通信的方式
前言首先要了解的是,组件通信的几种情况:父子组件通信,隔代组件通信(父孙组件通信),兄弟组件通信。通信方式props 和 $emit适用于父子组件通信props 是从父组件向子组件传递数据,$emit 是从子组件向父组件传递数据,这是 Vue 组件通信的基础。<!-- Parent.vue --><template> <div> <child :value="text" @input="handleValue"></child&
2021-03-08 18:25:32
217
原创 ES6大合集
let 与 constvar 和 let 区别var 和 let 都是用来声明变量,但是两者有很大的区别let 变量不能被重复声明// 使用 letlet star;let star;报出:let star; ^SyntaxError: Identifier 'star' has already been declared // 语法错误// 使用 varvar star; var star;// 将不会报出语法错误let 拥有块级作用域,也称’暂时性死区
2021-03-08 18:20:55
3862
6
原创 繁杂的数组 API
JavaScript 数组的API在开发过程中尤为重要。数组的方法分为,改变自身的数组方法,不改变自身的数组方法,以及遍历数组的方法。创建数组的方法数组的构造器 Array// 对象字面量的写法const arr1 = []// Array 构造器方法const arr2 = Array(5) // [empty*5] 创建一个数组长度为5的数组const arr3 = Array(1, 2, 3) // [1, 2, 3]ES6 新增的构造方法:Array.of 和 Array.
2021-03-08 18:18:30
127
原创 TypeScript 面向对象编程(类 接口与泛型)
面向对象TypeScript 是面向对象类的编程。什么是面向对象呢?简而言之,就是程序中所有的操作,都是通过对象来完成的。计算机程序本质是对现实事物的抽象。一个人,一辆车,一只狗,这些都是对象,而这些对象发出的动作就是对象的方法,某些特征就是对象的属性。比如一个人,他的身高,长相,姓名,年龄等这些在对象中都是他的属性,而他发出的动作,走,跑,说话等这些在对象中都是他的方法。类类是什么?类其实就是对象的模型,通过类可以来创建对象。对象的属性和方法,要在类中明示的表示出来。下面定义一个简单的类:
2021-01-18 17:43:08
351
1
原创 TypeScript的类 接口与泛型
面向对象TypeScript 是面向对象类的编程。什么是面向对象呢?简而言之,就是程序中所有的操作,都是通过对象来完成的。计算机程序本质是对现实事物的抽象。一个人,一辆车,一只狗,这些都是对象,而这些对象发出的动作就是对象的方法,某些特征就是对象的属性。比如一个人,他的身高,长相,姓名,年龄等这些在对象中都是他的属性,而他发出的动作,走,跑,说话等这些在对象中都是他的方法。类类是什么?类其实就是对象的模型,通过类可以来创建对象。对象的属性和方法,要在类中明示的表示出来。下面定义一个简单的类:
2021-01-14 19:50:06
2937
1
原创 React 性能优化
React 性能优化React 应用也是前端应用,前端项目普适的性能优化手段,比如资源加载过程中的优化、减少重绘与回流、服务端渲染、启用 CDN 等,这些手段对于 React 来说也是同样奏效的。但是 React 区别于传统的前端项目特点就是 以组件的形式来组织代码,React 允许我们把一个大的 UI 界面,拆分出可复用的代码片段(也就是组件),可以对每一部分的代码片段进行独立构思。因此,React 组件有一些特色的性能优化思路。接下来,我们开始讲解 React 性能优化的思路!React 组件性能
2020-12-31 14:23:06
288
1
原创 移动端触摸事件 事件防误触 以及 1物理像素问题
移动端触摸事件 事件防误触 以及 1物理像素问题移动端的主要三个事件touchstart touchmove touchend 分别对用 PC 端事件的 mousedowm mousemove mouseup移动端中有很多的默认事件比如长按某个文本时,能够选中复制。这样对于很多业务是不符合逻辑的,因此我们先来阻止默认事件。<script> // 阻止移动端默认事件 window.onload = function () { document.add
2020-12-25 14:37:02
508
原创 移动端 viewport 适配
移动端 viewport 适配为什么要是用 viewport 做适配呢?目的就是为了,将所有设备布局视口的宽度调整为设计图的宽度先上完美 viewport 适配代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Docume
2020-12-22 18:00:48
1003
原创 移动端 Rem 适配
移动端 Rem 适配适配的概念:实现页面在不同设备上等比, 也就是说 改变了一个元素在不同设备上占据 css 像素的个数打个比方,比如说页面上有一个盒子,占移动端设备宽度的 50% ,在改变移动端设备的情况,把盒子由 iphone 6 的 375 px (css 像素)设备宽度的,放到 6 plus 414px(css 像素) 设备宽度的屏幕下,两个盒子仍然占据设备宽度的 50%先要明白两个单位 em 和 rem:在 PC 端浏览器下(以谷歌浏览器为主),字体的默认大小是16px,字体最小为12px
2020-12-22 17:57:29
839
2
原创 React 16.4 生命周期 (二)
React 生命周期(二)这里只说 React 16.4 之后的生命周期,查看之前的生命周期,请访问:https://blog.csdn.net/weixin_46107920/article/details/109742013static getDerivedStateFromProps(props, state) // 初始化/更新时都会调用getSnapshotBeforeUpdate(prevProps, prevState) // 组件更新时调用Mounting 阶段:组件的初
2020-11-17 15:52:03
198
原创 React 的生命周期(一)
React 的生命周期(一)React 15 中的生命周期,有一下几个:constructor() // 定义组件时,执行生命周期, 一般state会在里面初始化componentWillReceiveProps(nextProps) // 父组件修改组件的props时会调用(官方文档:父组件每次render时都会调用)shouldComponentUpdate(nextProps, nextState) // 组件更新时调用componentWillMo
2020-11-17 14:31:02
227
原创 React - Context API 维护全局状态,实现全局组件通信
Context API 维护全局状态,实现全局组件通信Context API 有 3 个关键的要素:React.createContext、Provider、Consumer。我们通过调用React.createContext,可以创建出一组 Provider。Provider 作为数据的提供方,可以将数据下发给自身组件树中任意层级的 Consumer。React.createContext: 作用是创建一个 context 对象。const AppContext = React.createC
2020-11-09 17:29:12
395
原创 React 发布-订阅者模式 实现组件之间的通信
React 发布-订阅者模式 实现组件之间的通信React在实现组件之间通信时,对于“父-孙”,以及兄弟组件之间的信息传递,如果再使用props实现将会非常复杂,因此使用 “发布-订阅者模式” 将会简化这些操作。原生JS中,dom事件中使用 target.addEventListener(type, listener, useCapture) 完成对事件的监听,也是最早的发布订阅者模式。使用发布-订阅模式的优点在于,监听事件的位置和触发事件的位置是不受限的,这个特性,太适合用来应对“任意组件通信”这种
2020-10-28 13:29:44
626
原创 React 父子组件传值的方式
父子组件传值的方式1. 父传子由于React是单向数据流,因此造成了当前组件的state以props形式流动时,只能流向组件树中比自己层级更低的组件。 比如在父-子组件这种嵌套关系中,只能由父组件传 props 给子组件,而不能反过来。子组件代码function Child(props) { return ( <div className="child"> <p>{`子组件接收父组件的文本内容是:[${props.fatherText}]`}</
2020-10-23 11:38:30
1085
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人