前端学习笔记
文章平均质量分 74
奔跑的飞牛
热爱前端和算法的学者
展开
-
浅谈响应式开发与自适应布局!
谈到响应式,大家不自觉的会想到什么?首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢?2009时间段,互联网发生了一件天大的事情!那就是在北京时间2009年6月9日凌晨2:48分,在美国旧金山MosconeWest会议中心举行的WWDC2009(苹果全球开发者大会)上,苹果公司发布了iPhone第三代产品iPhone 3GS。而在此之前,手机端的网页...原创 2018-05-02 23:41:49 · 4130 阅读 · 2 评论 -
Webpack——CSS打包,CSS、SASS处理
处理style文件话说html都打包过去了,js也打包过去了,新的html文件和js产生,如果更换了存储文件夹(一般都会),那么这些打包生成的文件对于资源的引入就会产生错误,那么我们css文件也需要重新处理过,避免路径但不限于的错误;安装相关工具模块css-loader style-loader#-D = --save-dev 放在前面后面都无所谓npm i -D css-loa...原创 2018-10-15 18:41:14 · 2574 阅读 · 0 评论 -
React节点属性,列表渲染
节点属性渲染由于jsx语法是和js语法相包容的,所以,jsx里的语法会和js的语法相冲突,比如说,元素的属性值class和js里的关键字class重名,所以,html的元素在jsx的语法里,使用这些属性名的时候就要注意与js的关键字等冲突,这里的class被替换成了className:<script type="text/babel"> const element = ...原创 2018-10-22 10:22:02 · 992 阅读 · 0 评论 -
React事件、函数式声明组件、有状态组件
事件react的事件到底常不常用我也不清楚,因为js里是能不用行内事件就坚决不用行内事件,但是既然html里有事件这一属性,那么react实现其功能也是无可厚非的。事件触发调用函数利用好插值符号,因为插值符号里就是给你写js的地方;<script type="text/babel"> function alertThis() { alert("C...原创 2018-10-22 21:35:55 · 7641 阅读 · 0 评论 -
React简介,安装与使用
React框架 一. 插件或框架的好处从久远的时代到现在,我们的网页更加动态化与强大,大家在学习的过程中,发现或了解过很多很多的插件或框架,用过的都知道,方便、快速、简单上手快、重用性高、维护成本低、兼容性好、稳定性强这些插件或框架的出现,是因为JavaScript的越来越强大,都成为服务端语言了。在之前我们开发大型的项目,由于业务逻辑非常复杂,html结构累赘,css样式庞大,造成了资源...原创 2018-10-21 17:40:03 · 1476 阅读 · 0 评论 -
js面向对象,es5和es6的区别,构造继承
class——类?js是一个伪面向对象的语言,没有完整的面向对象的体系,至少es5及之前没有面向对象的体系,但是聪明的人自然有聪明的办法模拟其功能,到es6或以后,js的面向对象逐渐的展露头角。不是对象的对象,我用函数也能构造对象:js虽然开始没有对象,但是因为保留了new的功能,实际上也能做出面向对象的感觉来。<script> function Person(na...原创 2018-10-23 15:35:23 · 1950 阅读 · 0 评论 -
React基本语法,注释、插值
元素渲染ReactDOMrender接收两个参数,一个jsX语法的节点模板,一个是渲染到那个元素对象上(会成为其子节点)<script type="text/babel"> const element = ( <h1>hello React</h1> ); ReactDOM.render( el...原创 2018-10-21 20:56:48 · 3028 阅读 · 0 评论 -
强大的webpack-dev-server
万能本地运行环境webpack-dev-server是一个用来快速搭建本地运行环境的工具。命令简单webpack-dev-server或配置命令脚本快捷运行。使用情况:解决本地运行跨域很多框架使用时其实是用了ajax的请求的,在本地运行时会发生跨域请求(啊擦嘞,我只是在html里引入一个js文件还能跨域?没错,就是这么神奇!!!)模拟服务器运行情况,进行上线前调试等。环境...原创 2018-10-24 10:52:36 · 14560 阅读 · 0 评论 -
前端开发环境搭建和VSCode插件配置超详细图解一次配置完成(19年8月19日更新福利)
前端开发环境篇包管理器node包管理器请下载官网较新的稳定版!地址=》双击msi安装包安装,可以自定义安装目录;安装完成后检查全局环境:检查版本>node --versionv10.15.3 #2019年3月27日最新稳定版如果没有出现版本号,检查全局系统变量是否配置好(cmd、powershell和bash会通过系统环境变量到对应目录下找同名命令的exe并传入后...原创 2019-03-28 13:28:55 · 15975 阅读 · 1 评论 -
函数式组件思想与简单例子说明
单文件组件简单来说,单文件组件就是组件的行为、数据、结构等等统一放在一个文件里由Vue的构建系统识别并渲染的*.vue文件;随着vue cli 的更新迭代,任然使用new Vue的方式建立全局组件并在各个页面选择容器进行投放显然已经落伍了,单文件组件开发在大型项目中已经非常的普遍!请看下图:(这是官方文档里给出的单文件组件示例图)或者说这样的结构<template>...原创 2019-04-12 17:05:29 · 675 阅读 · 0 评论 -
Webpack——ES6转ES5
万恶的IE遗臭万年仍然需要填坑ie标准对html/css甚至js的规范简直相差甚远,所以,一般要解决的兼容问题很大一部分是为了解决ie的不兼容,虽然目前流行的ES6语法及规范将IE的考虑抛弃掉,默认放弃对IE的治疗,但是IE的兼容仍然是个问题!即使IE的使用率已经不到1%的市场占比。我们使用着舒服的ES6规范但是为IE又很头疼怎么办呢?Webpack开发了非常厉害的打包转换功能:转ES5!...原创 2018-10-15 17:14:13 · 14073 阅读 · 2 评论 -
Webpack——html-webpack-plugin 插件
安装插件html-webpack-plugin插件这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务。这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译。您可以让插件为您生成HTML文件,使用lodash模板提供您自己的模板或使用您自己的加载器。在开发时使用插件npm i -D html-webpack...原创 2018-10-15 10:38:55 · 33631 阅读 · 0 评论 -
git超详细图文教程——分支管理,分支创建、合并,bug分支
分支管理git作为分布式代码管理工具,强大的地方当然不止代码托管那么简单,还包括git强大的团队项目管理能力和分支合并功能!话不多说创建分支:我们进入到以前的项目里:git branch你会看到我们当前所出的分支为master。git branch #查看当前分支状态git branch BobBranch #创建名为BobBranch的分支git checkout B...原创 2018-10-14 20:24:50 · 3130 阅读 · 0 评论 -
git详细教程--光速学会安装、提交托管与sshkey创建
git安装首先,我们要去git的官网下载一个git安装包,双击到无关紧要的步骤我就不详细描述了,直接介绍我们关键的步骤。选择git包含的内容和打开方式选择都很清晰,具体情况我不是很清楚,不过选择中间集成资源管理器的好处是左面右键菜单添加了bash和gui,如下图选择你使用git的方式bash就是git安装后自带的类似于cmd或者说是powershell...原创 2018-05-10 23:10:50 · 13098 阅读 · 6 评论 -
前端学习笔记-css是多么的重要!
前端学习笔记-css是多么的重要!1.混乱的css时代。自90年代web新兴以来,各大浏览器公司为了占有市场,制定了各自的浏览器解读标准,而你要在我我的浏览器浏览网页,这网页就必须尊崇我的标准才行,因此,各个浏览器的竞争,使新的技术和功能相差越来越远。浏览器公司标准的不统一缺失用户和网页制作者的水生火热!2.css的救星知道1995年,由万维网联盟W3C组织发布的一种正在进...原创 2018-04-26 18:47:53 · 549 阅读 · 0 评论 -
js前瞻和使用前注意
JavaScript的出现简单的历史背景JavaScript语言本身是为了解决90年代初期,差网速条件下的表单验证而生。这么说可能不够形象,我举个例子:在90年初的某一个晚上,你看到某个论坛的内容十分吸引人,然后点击了注册,输入了信息后有个提交,点击提交,接下来的半分钟甚至1~2分钟内,你都将看到的时候那个永无休止的圆圈再转!那是多么的痛苦!那时的表单验证就是这样,52kb的网速,加上往...原创 2018-05-12 17:35:33 · 602 阅读 · 0 评论 -
背景、边框、列表和复杂选择器、css优先级和权重计算!
边框和背景属性边框内容简要 问题 解决方案 为元素边框添加属性 使用border-width、border-style、border-color属性 为元素盒子的某一条边应用属性 使用border-top-width、border-top-style、border-bottom-color等 创建边框圆角 border-radius简写...原创 2018-04-28 18:28:28 · 395 阅读 · 0 评论 -
三种盒模型、浮动和多种清除浮动的办法
三种盒模型说到盒模型,其实在网上通常指的是css版本的标准盒模型和IE的IE标准盒模型,实际两者差距不大,只是在内容“content”的划分上不一样而已,即宽度计算上的差异;而我这里所说的第三种呢,是css3版本里的弹性盒模型,它是一个同等重要的概念,因为在互联网的发展里,APP将越来越有可能被网页打包的app所替代,那么网页适配不同屏幕、网页的响应式则非常需要弹性盒模型的特殊性!...原创 2018-04-29 23:45:15 · 1251 阅读 · 0 评论 -
html2canvas实现指定文档元素截图
html2canvas.jshtml2canvas脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。参数或者说组态名称默认描述asynctrue是否异步解析和呈现元素allowTaintfalse是否允许跨原始图像污...原创 2018-10-13 19:46:00 · 10358 阅读 · 0 评论 -
git超详细图文教程——本地托管,仓库创建,提交撤销,误删恢复
分布式管理虐杀集中式管理在以前,代码都是通过集中式管理,大家从一个共享的或者说中央服务器里下载下来项目,在各自的电脑上完成项目的各个部分,然后上传回中央服务器,这样一来,就会产生很多的问题:比如同事之间代码版本不一致、文件过大效率低下,最后上传了还要主动整合项目等等;而分布式管理就能很好的解决问题。分布式管理下每个人的电脑都像是一台中央服务器,每个人的电脑上都有一个版本仓库,当然,为了方便所...原创 2018-10-14 17:29:50 · 2998 阅读 · 0 评论 -
git超详细图文教程——代码github托管,新建项目或本地项目上传
push前准备git除了本地托管代码的强大功能外,当然还包括强大的git的网络代码托管功能了!知名的便是国际的github和国内的码云了!那么我们首先需要一个网络上的代码仓库,即先再github上注册一个账户或者码云上的也可以,我这里以github为例进行介绍。创建你的网络管理仓库值得注意的是下面有个gitignore忽略部分上传的文件:以nodejs为例,node项目的开发...原创 2018-10-14 19:04:02 · 968 阅读 · 0 评论 -
Vue使用Echarts
v-charts此文章持续更新,每个配置都会以例子来讲解,对比v-charts,vue-charts和原生echarts分别描述。v-charts是一个Echarts的封包,饿了么官方前端团队开发的Echarts基于Vue的图表组件。v-charts的封装理念是将部分属性暴露在组件属性上,同时也可以通过哦extend属性设置对应属性。echarts最重要的属性label,tooltip...原创 2019-06-20 14:08:21 · 1167 阅读 · 0 评论