- 博客(45)
- 收藏
- 关注
RSS订阅原创 解决vue项目中引入element-ui第三方库导致项目打包造成vender.js文件过大问题的
一、vender.js文件过大问题项目中使用了element-uivendor.sj文件越小也就意味着首屏的速度越快，为了让vue项目首屏速度变快，在使用了路由懒加载。项目打包后发现我当时的表情谁：黑人??? WTF最后发现是element-ui的锅解决方法：一共三步1.修改webpack.base.conf.js表示不需要webpack打包的文件2.修改main....
2019-01-02 14:06:13
4515
原创 vue基础（1）：深入理解vue（基础）
一、Vue起步1. 创建一个vue实例new一个Vue实例初始化Vue实例的配置项参数：el （Vue实例接管dom元素，也就是说使用vue，就无需使用js的dom操作了），data（数据），{{}}输出数据，只有被Vue实例接管的dom节点才能输出。$data 是 data的别名 <!DOCTYPE html> &amp
2018-11-27 10:02:57
472
原创 vue基础（2）：深入理解 Vue 组件、Vue中的动画特效
一、深入理解 Vue 组件1.1 使用组件容易遇到的坑  1.1.1 使用is='组件名'解决html表签嵌套规范造成的bug  1.1.2 非根组件（子组件）中data必须是函数，返回一个对象一、
2018-11-19 12:04:42
664
原创 JS 进阶(9) ECMAScript6 基础入门：变量、函数、解构赋值、数组、字符串、面向对象、json、promise
一、ES6介绍ES6相对于ES5，在开发效率上有很大的提升。例如：设置默认参数ES5： function hello(txt){ var str = txt || 'hello poorpenguin'; }ES6： function hello(txt='hello poorpenguin'){ }ES6新的特性：解构赋值、箭头函数、Set和Map、异步操作、类与对...
2018-11-14 14:28:24
323
原创 JS 进阶(7) DOM事件：主流浏览器dom2级事件、IE6~IE8dom2级事件、事件冒泡、事件委托、事件类型
什么是事件？事件是可以被js侦测到的行为，当用户与web页面进行交互时，解释器就会创建响应的event对象来描述事件。常见的事件有哪些？点击页面上某个元素鼠标经过特定的元素按下键盘上某个按键滚动窗口或改变窗口大小页面元素加载完成或失败一、主流浏览器 dom2级事件定义（IE9+也支持）1.1 事件定义三种方式这里重点讲dom2级事件在html元素中定义事件...
2018-11-05 11:26:45
734
原创 JS 进阶(6) DOM属性：Property 固有属性、Attribute 自定义属性、常用的固有属性
HTML属性分为两种Property 固有属性Attribute 自定义属性
2018-11-02 15:20:36
2140
原创 JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点
一、dom加载完毕执行jsdom可以看成一个树形结构，dom的加载顺序就是从上到下，我们一再强调将js文件放在尾部，就是因为如果js脚本在dom文档构造之前执行，这样js就无法访问dom文档对象模型。1.1 jquery等待页面dom树加载完毕，再执行代码写法一：标准写法$(document).ready(function(){ ...});写法二：简写$(function...
2018-11-02 10:06:37
5881
原创 JS 进阶(3) ECMAScript5 — 面向对象：对象声明，对象遍历，闭包与封装，继承（原型继承、构造继承、call和apply继承），关键字（delete、this）
一、基本介绍二、闭包一：闭包的概念？js高程：闭包是有权访问另一个函数作用域中的变量的函数，常见的方式就是在一个函数内部再创建一个函数。我的理解是能够读取其他函数内部变量的函数。二：闭包的用途？1.防止过多的全局变量，改成局部变量来定义。2.外部函数始终在内存里不会被回收只有内部函数(闭包)被销毁后才被销毁。三：闭包的优缺点？1.优点：有利于封装代码，访问局部变量。2.缺点：内...
2018-10-29 12:08:26
263
原创 JS 进阶(2) ECMAScript5 — 函数深入理解：函数的本质、函数定义、函数调用（匿函数自执行、js方法链式调用..）、函数参数（arguments..）、函数返回值
一、函数介绍1.什么是函数函数就是一次封装，四处调用的代码。函数分为命名函数和匿名函数2.js中的函数传参和其他语言的区别：js中传的实参个数，和函数期望的参数个数可以不一致。3.函数调用时发生了什么？每一次调用函数都会创建一个全新的局部作用域。4.为什么使用函数呢？除了代码的复用，我觉得最大的好处就是减少了代码细节的暴露，增强了代码的可读性。举个例子//按照...
2018-10-24 17:00:29
533
原创 JS 进阶(1) ECMAScript5 — 变量、作用域、js解析机制、垃圾收集机制、释放内存
一、 变量js中的变量就是用来保存数据的容器，是js的核心之一，如果没有变量js的操作都是扯淡。
2018-10-23 09:38:05
397
原创 HTML5 进阶（8）—Canvas案例：使用canvas仿手机画图解锁
以下这种效果。使用到的技术canvas基本操作canvas的离屏js的dom2级事件注册处理函数addEventListenter（eventType，listener，useCapture）eventType：事件类型（click、focus、blur）不带onlistener：事件处理函数，可以是匿名函数useCapture：默认值是false，只冒泡不捕获；t...
2018-10-20 15:48:20
1295
原创 HTML5 进阶（7）—Canvas图表插件 chart.js的基础使用以及其他图表插件推荐
一、chart.jschart.js是简单而灵活的javascript图表插件，底层封装了canvas，而且是复合目前主流的响应式。官网： http://www.chartjs.org1.创建一个简单的图表chart.js目前有两种版本1.0版本和2.0版本，两个版本创建图表的方式有区别。2.0版本该方式是2.0版本新增的方式。有4种方式获取<canvas>元素var ...
2018-10-16 22:06:05
1422
原创 HTML5 进阶（6）——Canvas绘图基础（坐标体系、绘图、描边、填充、转换、渐变、文本、动画）
一、canvas基本使用1.1 canvas元素<canvas>元素只有两个属性width、height，当没有设置width、height时，&a
2018-10-15 16:10:20
8998
4
原创 HTML5 进阶（2）——拖拽上传
拖拽的应用在平时的开发中很常见，如拖拽生成调查问卷，通过拖拽就能生成模板网站的系统，拖拽上传，OA系统中拖拽生成上报的流程图。一、传统拖拽1. 基本写法<!DOCTYPE html><html lang="en">&
2018-10-08 10:32:42
310
原创 HTML5 进阶（1）——HTML5存储（本地存储:localStorage、sessionStorage、indexedDB; 离线存储:Application Cache）
一、本地存储我们经常会使用Cookie来存储键值队数据。但是Cookie本身存在一定的局限性。Cookie本身的局限性：存储大小限制，仅4KB左右。单个域名小的数量限制，50个左右。污染请求头，浪费流量所以对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更好，而且容量更大。Web Storage（本地存储）包含两种：localStorage 和 ...
2018-10-04 22:16:44
566
原创 移动端基础（3）—— 响应式布局
一、响应式布局（@media）针对不同的屏幕尺寸设置不同的样式，是为了解决移动互联网的问题而诞生的。响应式布局是解决移动端设备屏幕尺寸不同的问题。响应式布局的优缺点优点：面对不同分辨率设备灵活性强。能够快捷解决多设备显示适应问题。缺点：兼容各种设备工作量大，效率低下。代码累赘，会出现隐藏无用的元素，加载事件加长。响应式是一种折衷性质的设计解决方案，多方面...
2018-09-26 22:12:42
250
原创 移动端基础（2）—— flex弹性布局
一、flex弹性布局flexible-box-layout 弹性盒式模型，它能更加高效的控制元素的对齐、排列，更重要的是能够自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的。 父元素（flex container） 子元素（flex item） 主轴（main axis）可由display-direction属性设置主轴的方向 交叉轴（cross axis） 不一定...
2018-09-11 16:33:57
810
原创 移动端基础（1）—— 基础知识
一、移动端与PC端的不同1.W3C标准的支持情况PC端：Chrome浏览器支持最好，低版本IE支持较差，然而中国人用的IE多数版本较低 移动端：Chrome浏览器支持良好，而ios浏览器支持较差PS：CAN I USE（caniuse.com）是一个可以查询可以查询浏览器对W3C标准的支持情况2.交互上因屏幕的变化而改变屏幕变小意味着很多东西需要触发才能展现，最明显的...
2018-09-09 17:10:54
498
原创 CSS3 基础（9）—— CSS3用户界面的相关属性（appearance、text-overflow、outline、nav-index、cursor、zoom....）
一、用户界面相关的属性appearance 设置外观按照本地默认样。text-overflow 设置文本的溢出后的截断方式。outline 轮廓，在border外的（input框选中后，一圈蓝色的那个就是轮廓，不占布局空间）nav-index 设置导航方向（该属性将被W3C移除）1.appearance属性可以使用该属性改变原本的标签外观。 设置或检索外观按照本地默认样...
2018-09-07 11:15:49
717
原创 CSS3 基础（8）—— CSS3多列布局（Multi-column）
多列布局（Multi-column）多列布局就是将文本内容设计成像报纸那样的多列布局。兼容性IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1多列布局的属性columns：设置对象的列数和每列的宽度。是复合属性。 2. 1.columns 设置对象的列数个每列的宽度设置或检索对象的列数和每列的宽度。语法：...
2018-09-06 11:57:03
974
原创 CSS3 基础（7）—— CSS3动画（animation）
一、动画animation人类拥有“视觉停留”的特效，也就是人的眼睛看到东西，会在视网膜上存在0.34不会消失。 在前一幅画在脑子里消失前播放下一幅，就会给人造成一种流畅的视觉变化效果。而css3动画是使元素从一种样式逐渐变化为另一种样式的效果，css3动画中我们可以改变任意多的样式任意多的次数。兼容性ie10+、firefox16+、chrome43+、safari9+、o...
2018-09-04 22:16:26
2194
原创 CSS3 基础（6）—— CSS3过渡（Transition）
一、过渡 (transition)过渡的概念允许CSS的属性在一定时间区间内平滑过渡在鼠标单击、获取焦点、被点击、或对元素任何改变中触发，并圆滑的以动画效果改变CSS的属性值。兼容性 IE10+ FireFox16+ Chrome26+ Safari6.1+ Opera12.1建议使用兼容的写法-webkit-tra...
2018-09-03 16:50:06
575
原创 CSS3 基础（5）—— CSS3转换（Transform）
一、Transform转换让一个元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。语法transform: none | <transform-function> [<tranform-function>]*;
2018-09-02 14:41:31
672
1
原创 CSS3 基础（4）—— CSS3文本和字体
一、文本（一）文本阴影（text-shadow）设置文本阴影。语法text-shadow:h-shadow v-shadow blur color兼容IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+案例<!DOCTYPE html><html>&am
2018-07-03 17:29:44
750
原创 CSS3 基础（3）—— CSS3背景和背景渐变
一、背景CSS3中和元素背景相关的属性 属性 说明 background-clip 指定背景的绘制区域 background-origin 设置背景图片的定位（一）background-clip 设置背景图像区域background-clip属性指定了背景绘制区域语法background-clip: border-box | ...
2018-07-01 10:14:00
12835
1
原创 CSS3 基础（2）—— 各个浏览器前缀、圆角、盒阴影、边界图片
一、浏览器CSS属性前缀 前缀 对应浏览器 -webkit- chrome -moz- FireFox -ms- IE -o- Opera二、CSS3圆角（border-radius）CSS3中我们可以使用border-radius是下面四个属性的复合属性border-top-left-radiusbor...
2018-06-28 15:55:05
212
原创 CSS3 基础（1）—— CSS3选择器2 详解
一、基本选择器CSS的基本选择器通配符选择器 (* CSS2)元素选择器 (CSS1)类选择器 (CSS1)ID选择器 (CSS1)后代选择器 (CSS2)CSS3新增层次选择器子元素选择器 (这个准确的说应该是CSS2的)相邻兄弟元素选择器通用兄弟选择器群组选择器(一)子元素选择器（直接后代选择器）概念： 子元素选择器只能选择某元素的子元素语法...
2018-06-27 17:26:14
1226
原创 CSS3 基础（1）—— CSS3选择器1 分类和语法
一、CSS3选择器分类二、选择器语法1、基本选择器语法 选择器 类型 功能描述 * 通配选择器 选择文档中所以HTML元素 E 元素选择器 选择指定类型的HTML元素 #id ID选择器 选择指定ID属性值为“id”的任意类型元素 .class 类选择器 选择指定class属性值为“class”的任意...
2018-06-26 17:16:11
273
原创 HTML5 基础（4）—— HTML5表单新属性的使用和验证表单
一、HTML5表单常用属性这些都是比较常用的 属性名 说明 placeholder 在输入框无内容时显示灰色提示 autocomplete 部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on） autofocus 让input自动获取焦点 required 设置表单元素为必填 pattern 表...
2018-06-25 11:20:37
10230
原创 HTML5 基础（3）—— HTML5音视频详解
一、音视频基础知识 a 视频 音频 说明 连续的画面、特定格式编码、媒体流 特定格式编码，媒体流 web格式 mp4、ogv 、webm mp3、ogg、wav早期播放视频和音频需要使用flash，HTML5后使用video/audio， 但是苹果端和移动端是不支持flash的。 二、video/audio标签及其常用属性...
2018-06-17 16:07:47
841
原创 HTML5 基础（2）—— 网页布局的改变、标签属性的变化
一、网页布局的改变二、标签属性的变化（一）input标签类型变化emailurlnumberrangedate pickersearchcolortel1.email（移动端）<input type="email" name="my-email"/&
2018-06-14 10:00:35
587
原创 HTML5 基础（1）—— HTML5标签的变化
一、HTML5简介（二）HTML5的发展历程 （二）支持浏览器目前支持的浏览器有IE9+FirefoxOpearSafarichrome其他一些非主流浏览器 （三）WebAPP跨平台HTML5是唯一一个支持PC、Mac、iPhone、Android等主流平台的跨平台语言。 HTML5开发比原生APP开发成本低APP的改变Nativ...
2018-06-11 14:44:20
558
原创 JQuery 基础案例（3）—— jQuery实现轮播图无缝（无回滚）滚动切换效果
轮播图无缝滚动切换原理基本框架<div class="slide"> <!-- 导航点 --> <ul class="slide-nav"> <li class="active">&am
2018-06-05 15:04:59
17710
原创 JQuery 基础案例（2）—— jQuery实现侧边栏附加导航
.单纯的侧边栏导航使用CSS的position:fixed属性即可实现，但要是实现如下图 这种能监听每一层的效果，需要相关的js代码了。代码如下 <!DOCTYPE html><html><head> <title>楼层监听</title> <meta charset="utf-8">
2018-06-01 16:03:46
901
原创 Css 基础案例 （2） —— 清除float浮动，解决float产生的副作用
CSS中的定位机制标准流定位浮动float浮动的原因float浮动的原因就是使浮动的元素脱离标准流，浮动的元素不占有原空间。float浮动的副作用理想效果： float浮动的子元素会脱离标准流，父元素中就会没有东西撑开，会引起父元素塌陷或者其他元素异位。<head> <title>清除浮动的测试</title> ...
2018-05-30 11:14:29
327
原创 Css 基础案例 （1） —— 使用伪类：hover实现二级菜单的收放
正常情况下二级菜单的显示和隐藏一般是使用js或js插件实现的。 使用css也同样可以实现二级菜单的显示和隐藏，无需使用js或js插件进行繁琐的DOM事件绑定。 （匆喷，也可能是我眼界不够开阔 - -!）HTML代码&lt;div class="menu"&gt; &lt;div class="menu-item"&gt;家用电器&lt
2018-05-29 09:51:46
2043
原创 JQuery 基础案例（1）—— jQuery实现瀑布流
使用jQuery实现瀑布流其实只是用到了jQuery的部分方法啦。。。逻辑部分还是使用js写的，没用jQuery的$.each()方法。 上代码： HTML（结构）代码&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;title&amp;gt;瀑布
2018-05-23 09:55:34
339
原创 JS 基础（2）ECMAScript5 —— 函数
#一、函数的作用 函数可以封装任意多条语句，可以方便在任何地方，任何时候调用执行 二、函数的定义函数有三种定义方式：函数声明方式函数表达式方式使用function构造函数 1.函数声明函数声明定义函数是最常用的。 语法：function functionName([arg0,arg1,arg2,...argn]){ ...}例子：//s...
2018-05-21 14:41:21
213
原创 JQuery 基础（3）—— DOM事件
一、JS中的DOM事件模型JS中有两种事件模型：DOM 0级事件模型 （几乎所有浏览器都支持）DOm 2级事件模型（现代浏览器几乎都支持，IE8之前的不支持）（一）DOM 0级事件模型有两种形式：//第一种：html标签中添加事件&amp;amp;amp;lt;input type=&amp;amp;quot;button&amp;amp;quot; onclick=&amp;amp;quot;doSomethi
2018-05-19 15:22:30
422
原创 JQuery 基础（2）—— DOM操作
一、DOM对象和jQuery对象的转换jQuery对象是jQuery对DOM对象的封装，封装了jQuery的一些方法和属性。 (一)检测DOM对象和jQuery对象检测 DOM object ：obj.nodeType 返回值：是*DOM对象返回数字，非*返回undefined 检测 jQuery object：obj.jquery 返回值：是*jQuery对象返回版本号，非*返...
2018-05-17 10:46:23
404
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人