2017年05月_天下1281

原创 overflow：auto的用法

在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用代码如下：<!DOCTYPE html><html><head>

2017-05-31 21:33:09 44674 3

原创 flex布局-理论与实践篇

首先回顾一下，之前是怎么布局的，一般我们用float比较常见吧！有的情况还用定位，但是浮动坑很多，有时要清楚浮动。今天介绍一种新的布局方法，即flex布局。在这里我们还记得主浏览的内核么，在下文中有点用处。五大浏览器及内核 IE：Trident firefox：Gecko chrome：Blink opera：Presto safari： Webkit 1.flex布局是什么？

2017-05-31 11:26:53 705

原创 React

1.ReactDOM.render()是react的最基本方法，用于将模板转化为HTML语言，并插入指定的DOM节点。render( <h1>hello world!</h1>, document.getElementById('root'))运行结果如下： 2.JSX语法上面的代码中，HTML标签直接写在javascript语言中，不加任何引号，这就是JSX的语法，它允许H

2017-05-29 21:39:37 2398

原创 JSX语法

提到JSX，我们肯定想知道什么是JSX，有什么特点？ JSX就是javascript和XML结合的一种格式，React发明了JSX，利用HTML语法来创建虚拟DOM，当遇到<,JSX就当做html解析，遇到{，就当做javascript解析。JSX的优点JSX执行更快，因为它在编译javascript后进行了优化。类型是安全的的使用JSX编写模板更加简单快速。使用JSX JSX看起来类

2017-05-29 18:47:02 994

原创 Warning: Each child in an array or iterator should have a unique "key" prop.

源代码是这样class Main extends Component{ render(){ return( <div> { arr.map((item,index)=>{ return(

2017-05-29 16:40:04 878

原创 js中的map()方法

map定义和方法 map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。 map()方法按照原始数组元素顺序依次处理元素。注意： map不会对空数组进行检测 map不会改变原始数组 arr.map(function(currentValue，index，arr),thisValue) 参数说明 function(currentValue,index,arr)

2017-05-29 01:53:53 92242

原创 CSS3 box-sizing属性

语法： box-sizing：content-box | box-border 取值： content-box: padding 和 border 不包括在 width 和 height 之内。对象的实际宽度等于设置的宽度值和 border、padding之和，即（Elementwidth = width + padding + border）此属性表现为标准模型下的盒模型。 bor

2017-05-25 01:21:40 432

原创 webpack-dev-server的使用

webpack-dev-server是一个独立的NPM包可以通过$ npm install webpack-dev-server来安装它基本目录 webpack-dev-server默认会以当前目录为基本目录，除非你制定它 webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中我们在基本目录下新建一个index.html文件,然后在浏览器中输入http

2017-05-14 18:44:44 1041

原创 webpack入门学习4-browser（浏览器自动运行）

目录和入口、出口、loader配置，之前已经学习过了现在我们学习一下，如果在webpack.config.js配置使得浏览器自动运行。要让浏览器自动运行起来，要用open-browser-webpack-plugin这个插件。然后在webpack.config.js进行配置，代码如下var webpack = require("webpack");var OpenBrowserPlug

2017-05-14 14:01:35 3608

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了…在我们正式讲解ES6语法之前

2017-05-11 21:53:15 670

原创 git: Why 'Everything up-to-date' when pushing

好久没有用git了，突然出现一个奇葩问题，每次$ git add *$ git commit -m '注释'$ git push -u origin master结束push时就会出现下面这个问题，检查文件时却发现实际上一个都没更新上去。 'Everything up-to-date'最后找度姐问了一下，她说一开始 git 服务器仓库是完全空的，不包含任何一个分支(branch)，因此刚

2017-05-11 00:12:33 763

原创 webpack入门学习3-loader的使用

babel-loader的用途是把ES6代码转化为ES5代码我们还是从零开始，首先看整个文件的目录介绍一下各个目录的作用 dist:文件打包输出的路径 src：文件的入口 package.json: 初始化的文件 webpack.config.js: 配置文件 app.js: 写ES6的js代码以上是对这个目录介绍下面开始从头搭建webpack 首先建一个文件夹，名字

2017-05-10 22:43:25 329

原创 webpack入门学习2

这篇文章主要是实现多个层级入口和出口，功能和webpack入门学习1一样，具体看目录便知 webpack.config.js稍微有改动module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'js/bundle.js'

2017-05-10 17:59:11 419

原创 webpack入门学习1

webpack是什么以及用途 webpack是一个前端打包工具，它可以把多个互相依赖的文件打包成一类文件。它有glup和grunt所有基本功能。 - 相比glup和grunt有以下优点： - 支持CommonJs和AMD模块 - 支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。 - 可以通过配置打

2017-05-10 12:43:53 452

原创 webpack-使用babel-loader转化ES6代码

整个文件目录：在webpack.config.js中需要配置以下代码：module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', option: { 'presets': [latest],

2017-05-09 13:24:40 20717 1

原创 webpack配置

声明：自己学习的笔记，可能说的过于简单，没看懂的可以绕道其行。文件目录：首先安装nodejs，webpack是基于nodejs搭建的其次，新建一个文件夹，比如为item 用window+R进入命令行，然后 cd desktop cd item 进入item文件夹 1.初始化产生一个package.json npm init 2.安装webpack npm instal

2017-05-07 21:51:43 217

原创微信小程序页面布局

在写之前，看一下文件的关系具体架构参考微信小程序开发文档首先要布局<view class="box"> <view class="current_city center"> <text class="center"> <text>当前城市:</text> <text>北京市</text> </text> <

2017-05-03 10:06:57 2617

boysky0015的博客