CSS-设置或消除边框外围轮廓线 outline 用于设置元素边框外围的轮廓线,是一个综合性的属性,可以设置边框线的颜色、样式和粗细属性:outline-color 设置轮廓线的颜色;属性可以是 颜色单词、十六进制颜色值、rgb 等outline-style 轮廓线的样式;属性值可以是 solid、dashed、dotted 等outline-width 轮廓线的粗细简写形式:outline: outline-co...
CSS3-border-radius 边框样式属性 CSS3 中的 border-radius 属性用来设置变工况的样式,可以将直角边框改为圆角边框,甚至可以将一个矩形设置成一个圆形,该属性与其他样式属性结合使用可以做出许多有趣的图案border-radius 属性主要是修改块级元素的四个角的弧度来改变元素的形状,该属性是一个综合属性,四个角的样式可以单独设置也可以综合设置;其属性值可以是 像素(px)、百分比(%)、em 等border-ra...
HTML+CSS面试题-用Flex写一个垂直水平居中示例?三栏布局如何实现? 垂直水平居中实例Html代码<div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> &...
Vue相关面试题-Vue的数据双向绑定原理?Vue全家桶有些什么?Vuex 的使用和五个核心? Vue 的数据双向绑定原理采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性 setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 get...
ES5 function 扩展:call()、apply()、bind()详解 Function.prototype.call()Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) 提供新的 this 值给当前调用的函数或方法。thisArg 在 fun 函数运行时指定的 this 值*。*需要注意的是,指定的 this 值并不一定是该函数执行时真正的 this 值,如果这个函数在非严格模式下运行,则指定...
Ajax-发送请求的五个步骤 概述Asynchronous Javascript And XML, AJAX 不是一门的新的语言,而是对现有技术的综合利用。ajax 是一种技术方案,依赖浏览器提供的 XMLHttpRequest 对象发出 HTTP 请求和接收 HTTP 响应;实现了在页面不刷新的情况下和服务器进行数据交互。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。同步和异步概念:同步是阻塞模式,异步...
CSS3-字体图标的使用 字体图标具有轻量、灵活、兼容性强的特点;比图片有较好的可编辑性,占用空间小、可复用性强,从而被广泛使用。下面详细介绍一下字体图标的下载:首先要到一些字体图标库网站去下载需要的字体图标,一般 阿里巴巴矢量图标库 中都能找到自己需要的图标进入网站后进行登录,没有账号注册后再登录即可登录完成后在搜索栏中搜索自己需要的图标或直接在图标库 中查找找到需要的图标后将其加入购物车...
CSS3-flex伸缩布局 概述CSS3 中在布局方面做了非常大的改进,新增了伸缩布局通过该布局方式开发人员对块级元素的布局排列会变得十分灵活,其强大的伸缩性,在响应式开中发挥极大的作用。将指定元素的 CSS 样式中的 display 属性设置为 flex,这个元素就是一个伸缩布局的容器,其内部的子元素会从左到右水平排列(效果很像浮动)。简单例子:.box { width: 800px; /* 设置父级盒子为...
CSS3-@keyframes动画 在 CSS3 中可以通过 @keyframes 来创建动画,由当前样式逐渐变为新样式的动画效果。创建动画的语法就像创建 JS 函数函数一样,动画需要指定动画的名称,使用时需要通过名称来调用。创建语法一:@keyframes 动画名称 { /* 从 from 指定的样式 */ from { css样式 } /* 过渡到 to 指定的样式 */ to { css样式 }}创...
React-高阶组件 高阶组件是 React 中复用组件逻辑的一种技巧,高阶组件是一个函数,接收需要包装的组件,返回值为增强后的组件。实现思路:高阶组件内部创建一个类组件,在这个类组件中去提供复用状态的逻辑代码,通过 prop 将复用的状态组件传递给被包装组件。创建高阶组件步骤:创建一个函数,名称约定以 with 开头给函数设置形参用于接收传过来的组件,参数以大写字母开头(作为参数组件使用)在函...
React-render props模式 React 中组件复用主要有两种模式,一种是高阶组件另一种就是 render props 模式这两种方式并不是新的 API ,而是利用 React 自身特点的编码技巧,演化而来的固定模式render props 模式是一种非常灵活并且复用性非常高的模式,可以将一些特定的行为或功能封装成一个组件供别的组件使用。主要实现思路:将要复用的 state 状态和操作 state 的方法封装到一个...
React-propTypes类型校验 有时在组件之间进行传递数据时需要对数据的类型进行校验,react 中提供了类型检查的模块 prop-types 通过该模块可以对传递的数据进行类型检测,出于性能方面的考虑,propTypes 仅在开发模式下进行检查。使用方法:使用时首先要导入该模块:import PropTypes from 'prop-types'导入完成后,为接收数据的组件设置类型检查:// myCompo...
React-defaultValue设置默认值 在 react 中给 input 添加了 value 属性这个表单控件就会成为受控组件,如果不想成为受控组件又想设置默认的 value 值,可以通过 react 提供的 defaultValue 属性来设置import React from 'react'import ReactDOM from 'react-dom'class CommentList extends React.Comp...
React-context上下文 非父子之间的通信可以通过状态提升的方式来解决,但是当组件嵌套太深时就比较麻烦了,这时可以使用 react 中的上下文来解决(实际开发中使用状态管理工具 redux)通过 react 的 createContent() 方法创建一个 context(上下文);这个上下文里面有两个组件 Provider 和 ConsumerProvider:提供者,用于提供数据Consumer:消费者,使用数...
React-非受控组件 没有受 React 控制,没有设置 value 属性的组件就是非受控组件;如果想要获取非受控组件中的值需要通过 DOM 操作,通过 ref 属性来获取。步骤:首先在 constructor 构造中创建一个引用let iptRef = React.createRef()在组件中通过 ref 将表单和引用绑定在一起<input ref={this.iptRef} />...
React-修改状态 在 React 中不能直接修改组件的状态,需要通过 setState() 来进行修改语法:setState(updater[, callback])updater 更新器callback 更新后执行的回调函数修改状态比如想要将 state 中的 content 值修改为 ‘香香’state = { content: '大熊'}通过直接修改的方式并不能触发视图的更新:...
React-特殊标签属性 在 React 中,标签的 class 属性要用 className 代替;行内的样式属性需要使用对象的形式书写,多个单词组成的属性使用驼峰式命名;最终要用 {} 在最外层对样式进行包裹;<able 标签的 for 属性要替换成 htmlFor。示例:main.css* { margin: 0; padding: 0;}.box { width: 200px; ...
React-受控组件 所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中,表单元素(如<input>、 <textarea> 和 <select>)之类的表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。...
React-注册事件 文章目录注册事件事件处理函数中 this 问题事件传参获取事件对象注册事件React 元素的事件处理与 DOM 元素有些不同,React 通过事件绑定属性的方式注册事件时要采用驼峰式命名,其对应的属性值为一个函数而不是字符串。示例:import React from 'react'import ReactDOM from 'react-dom'class Hello extends ...