自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(44)
  • 问答 (17)
  • 收藏
  • 关注

原创 前端系列--ES6模块化、webpack、vue单文件组件及脚手架、Element-UI、vuex

以下将按照标题顺序进行介绍:1、模块化相关规范1.1传统开发模式传统的开发模式存在以下问题:1、命名冲突:多个js文件中如果存在相同名字的变量会造成冲突;2、文件依赖:js文件之间不能互相引用;1.2模块化开发针对以上问题,可以通过模块化开发进行解决:模块化是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内容部成员,也可以依赖别的模块;模块化开发可以方便代码的重用而提高开发效率,同时也能方便后期维护;在之前学习服务端时我们已经接触过服务端的c

2020-06-19 10:31:26 1071

原创 前端系列--vue组件化开发及前后端交互(2)

前面我们已经介绍了vue的基础内容,下面介绍vue中一个十分重要的内容–vue的组件化开发:1、组件1.1组件基本概念组件 (Component) 是 Vue.js 最强大的功能之一;组件可以扩展 HTML 元素,封装可重用的代码;总的来说组件化开发就是将软件的功能拆分成多个组件然后分别进行实现;1.2组件注册注册分为全局注册以及局部注册,同理全局注册是在所有的vue实例中使用,局部组件只能在当前vue实例中使用:<div id="example"> <!--

2020-06-16 15:42:35 1187

原创 前端系列--vue相关基础(1)

之前介绍过bootstrap、jquery框架都是外国的,下面要介绍一款优秀的国产框架vue。1、vue模板语法1.1 vue基础概念首先介绍库和框架的概念:库:提供大量的api帮助程序员实现效果;框架:提供基础性服务(如vue有虚拟dom、双向数据绑定);vue是一个渐进式的JavaScript框架:并具有以下特点:1.2 vue的基本使用下面先对比原生js、jquery以及vue实现helloworld的过程看看其之间的不同:首先是原生js:然后是jquery:最

2020-06-15 16:39:41 357

原创 前端系列--git与github

本篇将介绍git与github的相关内容1、git相关1.1版本管理版本管理是一种记录文件变化的方式,以便将来查阅特定版本的文件内容;人为维护版本管理的话则容易有如下问题:文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要复制,不方便多人同时编辑同一个文档,容易产生覆盖1.2git定义Git是一个版本管理控制系统(缩写VCS),它可以在任何时间点,将文档的状态作为更新记录保存起来,也可以在任何时间点,将更新记录恢复回来,git正是由于解决上面人工版本管理存在的问题的。

2020-06-05 10:42:38 327

原创 前端系列--前后端交互ajax详解(5)

在前面,客户端向服务端发送请求存在以下问题:而为了解决该问题本篇介绍ajax;1、ajax基础介绍ajax是浏览器提供的一套方法,可以无刷新的更新页面中的数据从而提高用户体验。其在具体页面中主要有以下几个应用场景:页面上拉加载更多数据;列表数据无刷新分页;表单离开焦点数据验证;搜索框提示文字下拉列表其运行环境是在网站环境中(即平时我们写代码直接双击打开在浏览器中测试时ajax是不会发送请求的,只有通过域名进行访问才是有效的),即在客户端中向服务端发送ajax请求;2、ajax运行

2020-06-03 23:24:49 1471

原创 前端系列--前后端交互express(4)

我们之前直接通过node.js创建web十分麻烦,通过express可以进行简化,本篇主要介绍express内容:1、express概念Express是一个基于Node平台的web应用开发框架,其提供了一系列的强大特性,帮助开发者方便的创建各种web应用;其使用必须通过npm install express进行下载;其主要特点如下:1、比如前面用到的router就是这里提取出去的2、请求参数不再需要经过复杂的处理,直接拿到的就是对象(以前要经过data、end事件)3、中间件可以如拦截请求等

2020-05-16 23:12:31 1589

原创 前端系列--前后端交互数据库MongoDB(3)

本篇主要介绍数据库相关内容:1、数据库相关1.1为什么要使用数据库动态网站中的数据都是存储在数据库中的数据库可以用来持久存储客户端通过表单存储的用户信息数据库软件本身可以对数据库进行高效管理1.2数据库概念数据库即存储数据的仓库,可以将数据进行有序的分门别类进行存储,其是独立于语言之外的软件,可以通过API去操作,常见的数据库软件有:mySQL、MongoDB(前端使用较多,因为其是基于JavaScript语言)、oracle…2、MongoDB2.1 MongoDB可视化软件其

2020-05-16 09:50:51 2605

原创 前端系列--前后端交互(2)

1、服务端基础网站主要由两部分组成:客户端和服务器端;几个小概念:1、ip地址:Internet Protocol Address,其是互联网中设备的唯一标识码,代表互联网协议地址;访问网站服务器本质上是通过ip地址进行的;2、域名:由于ip地址难以记忆,故平时访问是通过域名去实现的;虽然在地址栏中输入的是网址,但是其会转为ip地址后再进行访问;3、端口:计算机与外界交流通信的出口,...

2020-05-06 22:33:52 1083

原创 前端系列--前后端交互node.js(1)

本篇主要介绍node的相关知识:1、服务端相关1.1前端人员为何要学习服务端开发基础1.2服务端开发要做的事1.3前端人员学习服务端为何选择node.js2、node.js相关2.1node.js介绍代码运行环境:实际上node所用引擎是谷歌开发用来运行js代码的,这也是node为什么能够运行js的原因;2.2node.js组成找网上其他博客将node.js下载安装...

2020-05-06 12:01:09 496

原创 前端入门系列--js高级(5)

前面已经介绍过部分ES6的知识,现在详细介绍ES6部分的内容;1、ES6概念ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范;ES6实际上是一个泛指,指的是ES2015及其后续版本;那么为何要使用ES6:因为每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加...

2020-05-02 17:06:59 321

原创 前端入门系列--js高级(4)

1、正则表达式1.1正则表达式概念正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象;正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中...

2020-05-01 17:31:01 365

原创 前端入门系列--js高级(3)

1、函数的定义和调用1.1函数定义方式函数定义有三种方式:1、 函数声明方式 function 关键字 (命名函数)function fn(){}2、函数表达式(匿名函数)var fn = function(){}3、new Function() 方式var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);...

2020-05-01 11:59:49 269

原创 前端入门系列--js高级(2)

1、构造函数和原型1.1ES6之前创建对象的三种方式1、字面量方式var obj = {};2、new关键字//本质是根据js提供的Object模板创建了一个实例,继承了Object的所有方法。这个实例的构造函数是Object();var obj = new Object();3、构造函数方式function Person(name,age){ this.name = na...

2020-04-29 16:29:45 163

原创 前端入门系列--js高级(1)

1、面向过程与面向对象1、面向过程:面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了;2、面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作;两者对比:2、对象与类2.1 对象对象是由属性和方法组成的:是一个无序键值对的集合,指的是一个具体的事物属性:事物的特征,在对象中用属性来表示(常用名词)方法:事...

2020-04-29 10:35:06 155

原创 前端入门系列--jquery(3)

1、jquery事件注册优点: 操作简单,且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法示例代码如下:<body> <div></div> <script> $(function() { // 1. 单个事件注册 ...

2020-04-22 17:23:55 157

原创 前端入门系列--jquery(2)

1、jquery属性操作1.1元素固有属性值prop()其是为了获取、修改元素的固有属性(所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,比如 元素里面的 type):注意:prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等…1.2元素自定义属性attr()其是为了获取、修改元素的自定义属性(用户...

2020-04-22 16:01:33 131

原创 前端入门系列--jquery(1)

1、jqueryjs库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等…jquery也是一个js库,其主要是用于快速地操作dom;其他常见的js库还有:Prototype、YUI、Dojo、Ext JS、移动端的zepto等…其都是对原生jq...

2020-04-22 12:58:31 161

原创 前端入门系列--webAPI(6)

前面学了定时器相关,这里利用其实现动画效果;1、动画函数封装1.1缓动效果原理缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路:让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是: 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整(注意这个取整要在判断移动是...

2020-04-18 16:52:29 150

原创 前端入门系列--webAPI(5)

1、元素偏移量offset相关通过offset元素可以得到相应元素的的位置(偏移)、大小等…获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset与之前常用的style区别:offsetoffset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padd...

2020-04-12 23:42:03 264

原创 前端入门系列--webAPI(4)

1、常用键盘事件1.1键盘事件注意down的执行比press的执行要早;且press是区分大小写的而另外两个不区分大小写;1.2键盘对象注意该属性是其对象(一般记为e)的属性,示例代码如下:// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 document.addEventListener('keyup', function(e) { ...

2020-04-11 22:24:24 144

原创 mpvue中使用小程序原生picker实现时间日期选择(完整可用)(附坑)

最近使用mpvue开发小程序需要一个日期时间的选择器,但是小程序官方的picker控件时间和日期是分开的,在查了很多资料后发现可以使用多列选择器来实现,但是由于找到的大多数都是原生小程序的,mpvue的多列选择器只发现了一个选择省份的以及时间日期选择但是不能判断大小月以及平年闰年的2月,所以自己动手写了一个并将代码附上代码和大家分享一下。代码如下:1、布局部分 :其中picker选择的m...

2020-04-07 15:49:01 1316 6

原创 前端入门系列--webAPI(3)

上一篇介绍了dom中常见的一些元素操作,现在介绍最后一个事件操作;1、事件高级1.1注册事件注册事件,即给元素添加事件,也称绑定事件;其有两种方式:1.2事件监听上一点中的事件传统注册方式之前已经讲过,这里讲监听注册方式:1、addEventListener()事件监听(IE9以后支持)其中,2、attacheEvent()事件监听(IE678支持)其中,三...

2020-04-05 21:38:57 130

原创 前端入门系列--webAPI(2)

上一节我们讲了基本获取元素以及通过事件触发对齐实现了样式修改以及一些其它功能,这节将继续学习webAPI有关的内容。1、排他操作如果我们需要对同一组元素中的某个元素实现某种样式,则我们需要用到排他思想:所有元素全部清除样式(干掉其他人)给当前元素设置样式 (留下我自己)如对于一组按钮,利用排他思想对其中一个按钮进行样式设置代码如下:<button>按钮1&l...

2020-04-05 13:47:55 191

原创 前端入门系列--webAPI(1)

在学习web API之前先了解什么是API:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,无需理解其内部工作机制细节,只需直接调用使用即可;然后引入web API的概念:Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API...

2020-03-26 21:43:31 217

原创 前端入门系列--JavaScript(3)

1、作用域相关ES6前的作用域分为以下两种:全局作用域:整个script标签中或者整个js文件中;局部作用域(函数作用域):作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域;这些函数作用域的变量一般是在函数中声明的;如果仅在函数中使用而非在函数中声明则是全局作用域;注意:现在还没有块级作用域的概念,其是在ES6中才有的;2、变量相关由上面...

2020-03-25 18:52:10 98

原创 前端入门系列--JavaScript(2)

1、运算符相关js中常用的运算符有以下几种:算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符1.1算术运算符一些注意点:1、浮点数的精度问题:浮点数值的最高精度是 17 位小数,但进行算术计算时其精确度远远不如整数var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004console.log(0...

2020-03-25 17:01:18 186

原创 前端入门系列--JavaScript(1)

从本篇开始主要讲JavaScript的相关内容;1、浏览器执行js浏览器分为渲染引擎和js引擎两部分:js引擎会逐行解释每一行代码将其转换为机器语言再由计算机去执行;2、js的组成1、ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准,详细可参照MDN手册;2、文档对象模型(DocumentObject Model,简称D...

2020-03-25 11:07:20 162

原创 前端入门系列--移动web开发响应式布局

我们前面所写的布局都是移动端单独开发的,但是若我们想同一个页面当检测到不同设备(屏幕大小不同时),自动修改布局样式呢?–这就是响应式布局(使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的)一般来说,针对不同屏幕大小版心设置如下:超小屏幕(手机,小于 768px):设置宽度为 100%小屏幕(平板,大于等于 768px):设置宽度为 750px中等屏幕(桌面显示...

2020-03-17 13:05:45 227

原创 前端入门系列--移动web开发rem布局

rem布局主要是利用rem、媒体查询以及less技术实现在不同宽度的屏幕下达到自适应的效果;1、rem介绍在介绍rem之前先介绍em,em是父元素的字体大小,比如一个子盒子的宽度为2em,而且父盒子的font-size是15px,则该子盒子的宽度是2em=15px*2=30px;而ren则是html标签中设置的字体大小,比如该页面中:html{ font-size:15px;...

2020-03-17 09:55:36 283

原创 前端入门系列--移动web开发之flex布局

1、flex布局与传统布局首先是flex布局与之前用的传统布局的对比:所以在传统布局和flex布局的选择上有如下建议:2、flex布局原理应用1、在编程中使用flex布局则是设置父盒子flex布局,通过设置父项及子项属性来控制其中的子元素的位置和排列方式;2、当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效;3...

2020-03-14 16:26:05 348

原创 前端入门系列--移动web开发之流式布局

首先说明一个注意点是适应当前国内移动端浏览器,只要处理webkit内核即可,不需要像pc端一样兼容多个内核1、视口## 1.1布局视口整个所写的页面的视口1.2视觉视口用户当前看到的网站的区域1.3理想视口理想视口,对设备来讲,是最理想的视口尺寸,也是我们开发所需要的的,原理即是用meta标签将布局视口宽度设置为视觉视口宽度一般来说meta代码如下所示:即:...

2020-03-14 10:42:37 238

原创 关于echarts在tab中图表无法正常显示的问题(备忘)

最近在用mpvue写一个小程序,其中要用到echarts图表切换的功能,但在tab切换时图表显示一直有问题:图表的canvas一直大小为0;按照网上很多方法改过以后,如使用v-if,宽度不用百分比而改用具体的大小,解决了一些问题(如:如初次切换时图表可以显示出来了,但是如问题https://ask.csdn.net/questions/1057857)中所示,仍存在从一个有echarts页面A跳...

2020-03-13 11:22:40 560

原创 前端入门系列--HTML5与CSS3

前面讲完了HTML与CSS的基本内容,本篇将介绍html5与css3中的常用标签与属性等等…1、HTML5## 1.1语义化标签之前的html中我们很多时候都是使用div、li这些标签进行包裹,虽然可用但是其并没有具体的语义,而html5中新增了语义化的标签,有着提升搜索引擎优化的效果,并且这些标签在移动端的使用中比较友好,一些新增的标签如下:- `header` --- 头部...

2020-03-05 00:43:16 248

原创 前端入门系列--一些总结(便于查找复习)

1、CSS属性书写顺序布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)自身属性:width / height / margin / padding / border / background文本属性:color / font / text-decoration...

2020-03-03 11:31:53 135

原创 前端入门系列--CSS(6)

截止上篇文章已经基本将css内容全部讲完,本篇文章则讲一些高级的css内容,至于css3则留在后面再说;1、元素的显示与隐藏## 1.1通过displaydisplay:none则是隐藏元素,而将隐藏的元素显示出来则是display:block(其除了转成块元素外还有显示的作用)**该方法使用较多****该方法元素隐藏后不再占有位置**## 1.2通过visibilityvi...

2020-02-29 22:08:54 167

原创 前端入门系列--CSS(5)

CSS布局:标准流(从左到右从上到下最基础)、浮动(为了让盒子在一行上显示)前面已经讲过了,本篇继续阐述最后一种:定位。针对一些页面效果(商品图片上方小标签图片),浮动虽然可以实现,但是其不能在图片和文字上方,而定位则可以克服该问题;1、三种方式的关系标准流是在最下方–>浮动在中间–>定位在最上方2、定位详解选择器{ position:定位方式; 边偏移方向:具...

2020-02-29 21:04:51 155

原创 前端入门系列--CSS(4)

1、CSS布局的三种机制1、普通流:块级元素会独占一行,从上向下顺序排列;常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;常用元素:span、a、i、em等2、浮动:让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示;3、定位:将盒子定在浏览器的某一个位置——CSS 离不...

2020-02-27 23:55:08 153

原创 前端入门系列--CSS(3)

盒子模型(重点)本篇内容主要包括边框border、内边距padding、外边距margin:1、盒子边框1、style设置样式有实线(solid)、虚线(dashed)、点线(dotted)以及无边框等2、也可以将所有属性写到一起 border: 1px solid red; 属性没有先后顺序3、很多时候我们需要给边框中的单独一边设置样式,则需要如border-top(方位)-属...

2020-02-27 19:51:59 128

原创 前端入门系列--CSS(2)

上一篇介绍了CSS的三种引入方式、选择器的4中形式、字体样式4个属性、外观样式(颜色、文本对齐、行间距、首行缩进、文本装饰)以及一些快捷语法;这篇将介绍符合选择器、标签显示模式、CSS背景、CSS三大优先级;1 CSS复合选择器上一篇文章讲到的是基础选择器,而这里的复合选择器是由两个或者两个以上的基础选择器组成的;1.1后代选择器(常用)父级 子级 { 属性:属性值;...

2020-02-27 16:45:39 163

原创 前端入门系列--CSS(1)

在学习完了html的相关知识后,开始学习css的相关知识CSS层叠样式表主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式1、CSS的三种引入方式1.1行内式<标签名 s...

2020-02-27 00:06:26 118

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除