07 2020 档案
伸缩布局复合属性
摘要：复合属性 flex，是 flex-grow、flex-shrink 和 flex-basis 的简写属性，用来指定 flex 子项如何分配空间。 例 子 三个子盒子在父盒子中的宽度比例为 1：2：3 <!DOCTYPE html> <html> <head> <meta charset="utf-8
阅读全文
伸缩布局常用属性
摘要：伸缩布局也叫 flex 布局。有 2 个属性比较重要： display: inline-flex 将对象作为弹性伸缩盒展示，用于行内元素 display: flex 将对象作为弹性伸缩盒展示，用于块级元素 一般都是用 display: flex 。基本都是针对块级元素布局。 常用属性 flex-di
阅读全文
用纯 CSS 创建一个三角形
摘要：参考自网络资料(原文第 4 点)： https://juejin.im/post/5cb92d9a5188254160581b87。 1. 实现方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet"
阅读全文
React 【State进阶】通过条件判断优化渲染、使用不可变数据、单一数据源、状态提升、使用无状态组件
摘要：目录： 1. 通过条件判断优化渲染 shouldComponentUpdate PureComponent（推荐使用） 2. 使用不可变数据 3. 单一数据源 4. 状态提升 5. 使用无状态组件 一、通过条件判断优化渲染 例 子 目前的页面表现如下，点击 “删除” 按钮之后在控制台会输出商品 id
阅读全文
React 【认识 State】定义state、修改state、state的不可变原则、state的props的区别
摘要：目录： 1. 如何定义 State 2. 如何修改 State 使用 setState setState 是异步的 State 的更新是一个浅合并的过程 3. State 的不可变原则 值类型 数组类型 对象类型 4. State 和 Props 的区别 state props state 和 pr
阅读全文
React 调试开发插件 React devtools 的使用
摘要：可以在谷歌扩展应用商店里获取这个插件。如果不能访问谷歌应用商店，可以在 npm 网站(www.npmjs.com)上搜索 react-devtools ，然后根据官网指导进行安装。 安装插件后，控制台出现 “Components” 跟 “Profiler” 菜单选项。 查看版本，步骤： 下面介绍 r
阅读全文
React 【事件处理】React事件和DOM事件、this关键字的处理、向事件处理程序传递参数、向父组件传递参数、React事件机制
摘要：目录： 1. React 事件和 DOM 事件 如何在 React 中添加事件 React 事件和传统 DOM 事件处理异同 2. 事件处理中 this 的注意事项 方法 1：在 JSX 中使用 bind 方法 方法 2：在构造函数中使用 bind 方法 方法 3：使用箭头函数 3. 事件处理如何传
阅读全文
React 行内样式、引入样式表、CSS Module、CSS管理进阶
摘要：目录： 1. 行内样式 2. 引入样式表 3. CSS Module 4. CSS 管理进阶 一、行内样式 在 React 元素中，使用行内样式的写法是这样的： 行内样式实际上就是 React 元素上的一个属性，属性的值是对象，所有对象的属性名均为 CSS 属性。唯一需要注意的是， CSS 属性写法
阅读全文
React Props、列表渲染、条件渲染
摘要：目录： 1. Props 概念 2. 不同类组件 Props 传递 3. 列表渲染 4. 条件渲染 一、Props 概念 什么是 props 当 React 元素作为自定义组件，将 JSX 所接受的属性转换为单个对象传递给组件，这个对象被称为“props”。 更简单的理解是，props 是父组件传递
阅读全文
React 【组件和 JSX 】编写React元素、创建组件、理解JSX、JSX规则、使用Fragments
摘要：目录： 1. 编写 React 元素 2. 创建组件 3. 理解 JSX 4. JSX 规则 5. 使用 Fragments 编写 React 元素 打开 index.js，创建一个叫做的 element 的元素，用 h1 标签将先要显示的文字包裹。React 通过 ReactDom.render
阅读全文
搭建 React 环境
摘要：目录： 1. 前期准备 2. Create React App 3. 工具及插件 安装第三方插件 安装 bootstrap 执行 eject 4. 在线 React 创建 前期准备 1. 安装 Node.js。同时建议安装 nvm，nvm 用于进行 Node 版本的控制。 2. 安装编辑器，比如 V
阅读全文
使用 display : flow-root 触发 BFC
摘要：（ 在高度塌陷的笔记中有 BFC 的内容： https://www.cnblogs.com/xiaoxuStudy/p/13222253.html#fourone ） 目录： 父子盒子 兄弟盒子 父子盒子 例子： <!DOCTYPE html> <html> <head> <meta charset
阅读全文
Vue 【事件&样式】事件
摘要：目录： v-on监听 DOM 事件 事件修饰符 v-on 监听 自定义事件 双向绑定 v-on 监听 DOM 事件 event 例子 Vue 中使用 v-on 来监听 DOM 事件，这里用 v-on 监听了 button 上的 click 事件，并接收一个 add 函数作为响应函数，响应函数写在 m
阅读全文
Vue【数据】数组操作
摘要：例 子 定义数据结构，通过函数 data 返回数组 classmates，假设 classmates 数组中的每一个元素是班上的每一个同学的信息，然后通过 v-for 将每个同学的信息在页面上输出，p 是当前值，index 是当前索引。 <template> <div class="hello">
阅读全文
Vue【数据】计算属性和侦听器
摘要：笔记内容：学习编写能够让模板产生响应式变化的数据。 目录： 计算属性 侦听器 众所周知，Vue是一个响应式的前端组件框架。响应式即是当业务逻辑中的数据发生改变的时候视图中的内容也会跟着改变。 计算属性和侦听器 计算属性 例子 假设班上有许一、许二、许三三位同学，在页面中，名字名字前面是序号，名字后面
阅读全文
Vue【数据】Prop&Data
摘要：笔记内容：学习在 Vue 的单文件组件中如何管理数据。 目录： data Prop Prop 属性校验 众所周知，Vue是一个响应式的前端组件框架。响应式即是当业务逻辑中的数据发生改变的时候视图中的内容也会跟着改变。 Prop&Data 一. data <script> export default
阅读全文
Vue【模板】模板语法、指令、条件渲染、列表渲染、ref、JSX
摘要：主要纪录练习，文字较少，准确的语法概念等参考 Vue 官网文档。 目录： 1. 模板语法 2. 指令 3. 条件渲染 4. 列表渲染 5. ref 6. JSX 模板语法 Vue.js 使用了基于 HTML 的模板语法，所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HT
阅读全文
解决高度塌陷问题
摘要：目录： 1. 产生原因 2. 造成后果 3. 高度塌陷的例子 4. 解决办法 方法 1 : 开启父元素的 BFC 方法 2 : 在塌陷的父元素的最后添加一个空白的 div, 然后对该 div 进行清除浮动 方法 3 ：使用 after 伪类，向父元素后添加一个块元素，并对其清除浮动 产生原因 父元素
阅读全文
浙公网安备 33010602011771号