前言浮动float的渲染位置在行框与包含块之间，这样可以使得行框内文字与浮动元素不重叠，并且环绕它显示。在布局过程中经常使用它实现左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响后面的元素布局。 已知的清除浮动元素方法： 采用一个HTML标签，以及css的clear属性，手动清除浮动； 采用伪类:after动态建立一个块元素，设定clear属性，清除之前的浮动元素； 采用css overflow非visible值（overflow:auto/overflow:hidden）设定使父容器包含浮动元素； 采用display:table/display:table-cell等table系列属性将父元素变成table形式自动包含浮动元素； 使用table以及td标签作为浮动元素容器； 采用float:left/float:right方式将父元素同样浮动，就可以包含浮动内容； 在IE 6/7的标准文档模式中设置width/height/zoom等样式来自动清除浮动； 使用clear样式清除1.cl ...

插件 Beautify chinese Language open in browser Vetur minapp settings.json123456789101112131415161718192021222324{ "window.zoomLevel": 1, "markdown.preview.fontSize": 16, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[json]": { "editor.defaultFormatt ...

商品计价的千分位分隔符转换1return total.toString().replace(/\B(?=(\d{3})+$)/g, ',') 去除字符串的空格 字符串原生trim方法，只能去除两侧空格，返回新字符串 replace正则匹配 去除所有空格：str = str.replace(/\s*/g,"") 去除两侧空格：str = str.replace(/^\s*|\s*$]/g,"") 去除左侧空格：str = str.replace(/^\s*/,"") 去除右侧空格：str = str.replace(/\s*$/,"") 中文、英文、数字但不包括下划线等符号 中文：^[\u4e00-\u9fa5]{0,}$ 中文、英文、数字：^[\u4e00-\u9fa5A-Za-z0-9_]+$（包括下划线），[\u4e00-\u9fa5A-Za-z0-9]+$/[\u4e00-\u9fa5A-Za-z0-9]{ ...

在实际的业务中，经常有跨组件共享数据的需求，Vuex就是设计用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件的应用更高效。 引入Vuex之后统一对共享数据进行管理存放，在各个页面中可以利用commit方法提交mutation对共享数据进行修改。 123456789101112131415161718192021222324252627// store/index.jsexport default new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++, decrement: state => state.count-- }})// Component.vueexport default { computed: { count() { return this.$store.state.count;
...

key属性为了方便Vue实例跟踪每个节点的身份，从而重用和重新排列现有元素，需要为每项提供一个唯一的key属性。理想的key属性值是每项都有并且唯一的id。key的工作方式类似于一个属性，所以需要用v-bind来绑定动态值。 生命周期函数表 生命周期函数 含义 beforeCreate（创建前） 组件实例刚被创建，组件属性计算之前，比如data属性等 created（创建后） 组件实例刚创建完成，属性已经绑定，此时DOM还未完成，$el属性还不存在 beforeMount（载入前） 模板编译、挂载之前 mounted（载入后） 模板编译、挂载之后 beforeUpdate（更新前） 组件更新之前 updated（更新后） 组件更新之后 beforeDestroy（销毁前） 组件销毁前调用 destroyed（销毁后） 组件销毁后调用 单向数据流在Vue中通过props传递数据是单向的，也就是父组件数据会传递给子组件，但是反过来不成立。之所以这样设计，就是尽可能将父子组件解耦，避免子组件无意间修改父组件的状态。 业务中经常遇到两种需要改变pr ...

环境配置新建项目create-react-app redux-meme-generator 安装插件npm i -S redux react-redux redux-thunk react-bootstrap 文件结构运行项目npm run start，清空src下的文件，建立index.js，引入react和react-dom。并在src下新建component、actions、reducer文件夹。 src/index.js 1234567891011121314151617181920import React from 'react';import ReactDOM from 'react-dom';import App from './component/App';import {createStore, applyMiddleware} from 'redux';import rootReducer from './reducer';impor ...

React component lifecycle 生命周期React的生命周期是component在建立和渲染的过程，以component class出发，React会做以下的过程： 依照component被挂入DOM的过程分类，过程中会依序执行component的函数如下： Mounting：component被建立实体（即react element）后，渲染到DOM的过程： constructor() static getDerivedStateFromProps() render() componentDidMount() Updating：当component收到新的props时，更新状态（state），再重新渲染到DOM的过程： static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting：当component不被使用，从DOM移除的过程 componentWillUn ...

前端插件库DataTables官网：https://www.datatables.net/ DataTables是jQuery的JavaScript函数库，目的是强化表格操作（如搜索、排序），并自动加入组件引入表格中，使用非常灵活简便。 LazyLoad官网：Lazy Load延伸：Vanilla JavaScript Lazy Load Plugin Lazy Load帮助高度较长的网页进行延迟载入图片，尚未浏览到该部分时，不会载入视角外的图片，提高效率。 lightSlider官网：JQuery lightSliderGithub：sachinchoolur/lightslider JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片，附有缩图导览。另外还有相本功能、垂直跑马灯，应用层面广泛。 alertify.js官网：https://fabien-d.github.io/alertify.js/Github：alertify.js alertify.js是为了美化通知信息而生的JavaScript框架。 pickadate.js ...

本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。 差异比较 CSS3 差异 transition 在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。 常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发 需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。 只能定义开始状态和结束状态，不能定义中间状态。 animation 可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数。 网页加载时会直接执行，可以自行控制各阶段动画的变化 animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。 CSS3 简写顺序 transition [property名称][duration ...