博客

§ 认识 ReduxWhat is store?store是应用状态state的管理者。那什么是state？state是React组件的状态，一般是一个普通对象。How to create store?import { createStore } from 'redux'...// reducer:// 负责接收action并更新state的函数// initialState:// 初始stateconst store = createStore(reducer, ini

Virtual Dom 即根据最终状态在内存中绘制出一棵 Virtual Dom Tree，使用 Diff 算法与现存的 Dom Tree 对比并更新。 Virtual Dom 并不能提升性能, 直接操作 Dom 理论上是最快的。 1. Snabbdom Example(官方实例)2. 深入浅出1.) Virtual Node/*...

原型属性 通过字面量创建的对象使用 Object.prototype 作为他们的原型 通过new创建的对象使用构造函数的prototype属性作为他们的原型 通过 Object.create 创建的对象使用第一个参数作为他们的原型 获取原型 对象的原型属性是用来继承属性的，通过 Object.getPrototypeOf() 可以查询一个对象的原型。 几乎所有对象都有原型

Tooltips（提示工具）组件一、简介此组件用到了Tether插件，Tether一般用于搞定两个元素的位置关系，如下代码:new Tether({ // 此为主动附着元素 element: blurEle, // 此为被依附元素 target: greenEle, // 主动依附和被动依附都可以选择位置，两者通过x，y确定一个点 // 最后呈现出来就是两个点重合 //

Dropdown（下拉框）组件一、简介此组件可以不指定 data-target 属性，不指定的话，必须按.dropdown-toggle 按钮和 dropdown-menu 列表放在同一个父元素下注意，如果想要指定 data-target 属性，那么不是指向 .drop-menu 元素，而是指向包含 .dropdown-toggle 按钮和 dropdown-menu 列表的父元素 .dropd

Modal（模态框）组件一、简介不支持多个模态框同时存在一般作为文档body元素的直接子元素存在(不要受到其他元素的影响，假如把模态框元素放在一个具有 transform 属性的父元素里，模态框的 position:fixed 属性就会被严重影响)autofocus 在模态框无作为二、样式此版本的Bootstrap大量使用了flex布局 * 在 .modal-content 中，使用了 f

Collapse（内容折叠）组件一、简介此组件可以将一篇区域收起、展开，类似折叠的效果。主要用于内容过多时，将部分内容折叠。二、样式分析了这几个组件，发现Bootstrap喜欢将transition的持续时间设置为600ms这个组件并没有什么特殊的样式，一共就几个： .collapse { display: none; &.show { display: block; }

Carousel（幻灯片）组件一、简介往往用于首页轮流展示不同的图片，电商网站常见；在IE8、9下没有图片滑动动画效果；二、样式 下面给出的样式类并不完整从下面可以看出图片切换动画消耗的时间：/*from _carousel.scss*/.carousel-item { /*...省略*/ @include transition($carousel-transitio

认识Bootstrap之前这里下载的是Bootstrap v4.0 dev 版本css预处理器使用了sassjs使用了es6Bootstrap是依赖于Jquery的，其所有javascript组件都是注册在jquery原型上的，即一般组件末尾会有如下代码： $.fn.xxx = Plugin，也即 jQuery.prototype.xxx = Plugin如果在jQuery中定义了与Boo

何时使用 is当使用DOM元素作为模板（即为el指定某个元素）时，会受到HTML的一些限制： 1. Vue只有在浏览器解析和标准化HTML后才能获取模板内容。 2. 某些标签元素限制了其所能包含的内容，比如 <ul>， <table>， select等，如下渲染可能出错 <select> <my-component></my-component></seelct>select 元素中规

待验证server端emit数据到浏览器，浏览器端收到数据，无法触发emit指定的回调函数。广播 Broadcasting 以下 socketio 为 SocketIO的一个实例 Broadcast是SocketIO中非常实用的特性，在 send() 或 emit() 中指定 broadcast = True 可以激活这个特性：@socketio.on('my event')def h

不同表单控件绑定 v-model 获得的值textarea： 略input[type=’text’]： 略单个input[type=’checkbox’]： 值为boolean类型，true或false多个input[type=’checkbox’]： 多个input的 v-model 绑定同一个属性多个input的value不能相同，否则相同value的box同时被选中绑定属性的

标签的Class属性 class是一个属性，可以用v-bind来指定，普通的方式要求使用者自己控制字符串，但字符串的拼接略显麻烦，所以有专门的处理方式。 传递一个对象 通过控制对象某个键对应的boolean类型值，来控制class是否被需要：<div class="static" v-bind:class="{ active: isActive, 'text-danger': h

属性和方法每个Vue实例会代理其data对象里所有的对象var app = new Vue({ data: { message : '' }})也就是说，可以直接通过:app.message = 'xxx'来改变data中出现的属性， 从而引发视图的变化。 2. 注意只有这些被代理的属性是响应的。 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

关于vertical-align属性的值inherit： 继承线类： 可选baseline （默认属性值），top，middle，bottom文本类： text-top，text-bottom （文本上下边缘）上标下标类： sub，super数值百分比类： 20px，2em，20% …（支持负值）vertical-align的数值百分比类型的值数值的含义：在baseline对齐基础上上

line-height，指的是两行文字【基线】之间的距离。基线：一般就是小写英文字母x的下划线行内框盒子模型（所有内联元素都有关，以下由内至外讲解）举例： 啦啦啦啦啦啦啦啦啦啦啦啦啦啦1、 内容区域（content area）大小与font-size相关（可理解为鼠标选中区域文字的背景）2、 内联盒子（inline boxes）内联盒子不会让内容成块显，而是排成

absolute与float:left类似：1. 包裹性两者可以让元素inline-block化比如一个div默认宽度占据100%，但加上position:absolute或float属性后，宽度就会自适应内部元素的宽度比如一个span原本是inline元素，无法设置width属性，但是加上上述属性后，width属性就生效了，不再需要设置display属性2. 破坏性flo

问题描述：某个div有id为signUpModal，其中有个图片我将其初始transform的rotateZ值设置为180deg，这个属性包含在male-picture的class中，因为我是用sass写的，所以是直接嵌套写的，最终被编译为 #signUpModal .male-picture {...}。之后我希望在click某个按钮后rotateZ值设置为360deg，为了浏览器的兼容性也