- 博客(60)
- 收藏
- 关注
RSS订阅原创 vue(二) 生命周期函数
钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。对于执行顺序和什么时候执行，看上面图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。 new Vue({...
2019-11-01 23:11:59
222
原创 初识vue
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。一、Vue简介1.1 渐进式框架-Vuevue官网说：Vue.js是一套构建用户界面的渐进式框架。与其...
2019-10-29 21:03:32
402
1
原创 css中的 link和@import到底有什么区别？
写在前面在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，发现@import也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下link和@import的区别吧！区别<!DOCTYPE html><html lang="...
2019-10-27 20:48:55
329
转载 mongoDB一些语法
记录一下MongoDB常用语句，顺带与SQL做个简单的对比。1、查询(find)（1）查询所有结果select * from articledb.article.find()（2）指定返回哪些键select title, author from articledb.article.find({}, {"title": 1, "author": 1})（3）where...
2019-10-23 22:16:25
143
原创 node.js中的相关概念和表单提交
1.相关概念一.关于require('文件名)var fs = require('fs'); //加载核心模块var template = require('art-template'); //加载第三方包模块,所有的第三包都是通过npm下载var b = require('./b'); // 加载自己的文件模块二.关于模块查找顺序1.优先加载自己缓存下来的文件2.核心模块...
2019-10-21 22:31:32
120
转载 Node中require第三方模块(art-template)的规则
Node.js中使用CommonJs模块化机制，通过npm下载的第三方包，我们在项目中引入第三方包都是：let xx = require('第三方包名')，究竟require方法加载第三方包的原理机制是什么，今天我们来探讨下。1、安装art-template通过npm安装模板引擎(npm:包管理工具,能帮你下载你所需要的包)npminstall...
2019-10-20 21:08:48
729
原创 ES6----入门(二)
接上次:https://blog.csdn.net/qq_38163146/article/details/102538651三 函数1，参数默认值 ES6首次添加了参数默认值。我们再也不用在函数内部编写容错代码了。function add(a=1,b=2){ return a + b; } add();//3 add(2);//4 add(3,4);//7...
2019-10-15 22:36:23
352
原创 ES6----入门(一)
ES6新特性ECMAScript 6 是ECMA于2015.06发布的版本，作为一个分界点，现在我们通常把这之后的版本统称为ES6。ES6带来了许多全新的语法，同时添加了类的概念，可以预见的是，JavaScript正朝着工程化语言迈进，我们并不知道这对于年轻的JavaScript来说是好还是坏，因为它最开始是做为一款轻量级的脚本语言而风靡全球的。一 新的原始类型和变量申明1，symb...
2019-10-13 22:00:35
200
原创 移动端rem适配屏幕
1、px、pt、em、rem 的区别px(pixel)像素，是屏幕上显示数据的最基本的点，表示相对大小(不同分辨率上px显示不同)pt(point)印刷行业常用的单位(磅)，等于1/72英寸，表示绝对长度emem是相对长度单位，基于父级元素的font-size计算字体大小。如果未设置父级字体大小，则相对浏览器默认字体尺寸16px（1em = 16px）：10px=0.625em...
2019-10-08 20:38:54
473
原创 初学css预处理less
LESS是什么？less是一门CSS预处理语言。由于CSS本身并不是程序式语言，不方便维护和扩展，没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上，引入了变量、Mixin混入、运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。本质上，LESS包含一套自定义的语法及一个解析器，写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性，...
2019-10-07 20:09:32
190
原创 js中的cookie
什么是cookie ？cookie：是记录在用户浏览器中的信息，通常情况下是以“键/值”的形式进行存储的，可设置过期的时间.特征: 1.同一个网站共享一-套cookie. 2.大小有限，-一般都是4kb, 只能存文本 3.必须要通过本地服务器来预览。 不能以file的形式 4.分为临时cookie和设置过期时间的cookie...
2019-09-29 20:47:07
1120
原创 CSS媒体查询media
CSS媒体查询media实现响应式布局的方式有很多，利用media实现就是其中一种，但是他也有一些缺点，比如说要对特别的屏幕单独定制样式代码。在我的代码里面我把屏幕分为了三种，代表为iPhone、iPad、PC三种，分别对应着三种不同的样式。目前可以实现：根据界面大小自动调整布局 界面宽度小到一定程度时会隐藏header，将其放到侧拉栏中一个媒体查询由一个可选的媒体类型和零个或多个使...
2019-09-22 21:54:45
207
转载 bootstrap栅栏系统
bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中，同时有 col-xs , col-sm , col-md , col-lg的理解..col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-...
2019-09-18 22:44:47
279
转载 Bootstrap基础入门
Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstra...
2019-09-17 23:44:18
190
原创 html5 响应式布局
一、什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。 随着越来越多的设...
2019-09-16 23:58:38
344
转载 认识视口单位vm、vh在网页中的排版应用
视口单位是什么？在 CSS 规范中，有4种类型的可用视口单位：·vw --- 1vw 等于视口宽度的 1%vh --- 1vh 等于视口高度的 1%vmin --- vw 和 vh 中的较小值vmax --- vw 和 vh 中的较大值视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。视口的单位大小会根据视口大小的改变自动计算，视口大小的改变常...
2019-09-15 23:28:34
541
原创 移动端的触摸事件
首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchendtouchstart：手指触摸到一个 DOM 元素时触发。 touchmove：手指在一个 DOM 元素上滑动时触发。 touchend：手指从一个 DOM 元素上移开时触发。Touch 属性1.Touch.identifier：此 Touch 对象的唯一标识符。 一次触摸动作(我们...
2019-09-12 00:09:04
139
原创 移动端mate标签设置
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">1.width=device-width //应用程序的宽度和屏幕的宽度是一样的...
2019-09-11 00:07:38
232
原创 html5中的localStorage本地缓存
早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题。 1.cookies的大小限制在4kB，不适合大量的数据存储。 2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。 3 cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。HTML5很好的提供了本地存储的功能，以键值对存储...
2019-09-09 23:29:21
387
原创 html5中的canvas
canvas<canvas width="600" height="400" style="border: 1px solid #ccc"></canvas>1.<canvas>标签只是图形容器，你必须使用脚本来绘制图形，有一个机遇javascript的绘图API。要从同一图形的一个<canvas>标记中移除元素，往往需要擦掉绘图重新绘制它...
2019-09-08 20:45:27
151
转载 Html5中video标签那些属性和方法
video标签行内属性video标签行内属性 src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 webkit-playsinline="true" IOS下防止全屏播放 playsinline="tru...
2019-09-06 23:31:48
2687
转载 jQuery.data()和html5 dataset
新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用，以及包括jQuery在内的四种存取方式。html代码:&...
2019-09-04 22:42:35
265
转载 HTML5基本标签使用header，nav和footer
header标签:基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容，也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如：<header> <h1>HTML5基本标签使用，header，Nav和footer</h1> <div class="post-meta...
2019-09-02 22:52:14
3434
转载 css3中的flex (弹性布局）
flex (弹性布局）网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有现代浏览器的支持，这意味着，现在就能很安全地使用这项功能。为容器设置f...
2019-08-29 23:44:56
330
原创 css3中的变形（transform）
transform 字面上的意思就是 使改变外观、改变形态在css3中transform主要包括以下几种:1.旋转 rotate2.倾斜 skew3.缩放 scale4.移动 translate语法transform：nonetransform：rotate | skew | scale | translatenone：表示不进行变换表示一个或多个变换函数，空格分开，意思...
2019-08-28 22:54:19
524
转载 CSS3中的选择器
CSS3介绍CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。CSS3的现状浏览器支持程度不够好，有些需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛属性选择器属性选择器的标志性符号是 []。如先创建: <div> <p class="noe"&g...
2019-08-27 21:26:30
191
转载 web交互方式—ajax
一、什么是AjaxAJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，较少网络数据的传输量。同时，由于AJAX请求获取的是数据而不...
2019-08-26 21:25:30
186
转载 jQuery之jquery.lazyload.js插件用法
网站中如果图片过多，就会因为加载图片而等待很长时间，此时我们就用到图片延时加载插件jquery.lazyload.js，这个插件可以让我们在向下滚动的时候加载图片。让网页首屏尽可能快的加载进来。如何使用jquery.lazyload.js：1、jquery.lazyload.js依赖于 jquery. 请将下列代码加入HTML的结尾，也就是</body>前:<scri...
2019-08-25 22:25:15
351
转载 jquery.on()超级方法
定义和用法：1. on() 方法在被选元素及其子元素上添加一个或多个 事件处理程序2.自jquery1.7版本之后 on()方法是bind() live() delegate() 方法新的替代品 推荐使用此方法!使用其他的方法可能会出现不兼容的问题3.使用on()方法添加的事件程序适用于当前及未来的程序(这里的未来的程序是脚本创建的新元素，或者是以前的事件代理程序)4. 如果要移除使用o...
2019-08-22 22:27:04
402
原创 jQuery中的text，html和valsan三者的区别
jQuery中的text，html和valsan三者的区别:.html()用为读取和修改元素的HTML标签<body><div> 这是div中的文本内容 <h1>这是h1标签文本内容</h1> <input type="text" value="这是input标签的文本"></div>...
2019-08-21 21:43:33
145
原创 jQuery操作样式和属性
js中操作样式 1.style属性: 行内样式 2. className属性: 类名jQuery中操作样式: 1.css()::操作style样式 2. addCLass()系列方法:操作类名css()方法 1.操作单个样式css('属性名','属性值') 2.操作多个样式css({'属性名1':'属性值1','属性名2':'属性值1'}...
2019-08-20 22:09:36
380
原创 jQuery初体验
jQuery概念: 是一个javascript代码仓库，我们称之为javascript框架。 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。怎么利用jQuery包: jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引入本地的JQuery...
2019-08-19 20:55:42
138
原创 个人总结-----API
Web API的概念浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义对象分三种:内置对象,自定义对象,浏览器对象 内置对象:系统提供的 自定义对象：自己写的 浏览器对象:浏览器的数据类型有哪些 1、 number：数字类型 （整数、小数） ...
2019-08-18 22:55:10
144
原创 JS笔记----浅拷贝和深拷贝
浅度拷贝：复制一层对象的属性，并不包括对象里面的为引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变。如: var obj = { name: '小明', age: 12, car: ['宝马', '奔驰', '兰博基尼'] } var obj1 = obj; console.log(obj1...
2019-08-15 22:16:01
107
原创 JavaScript 中 call()、apply()、bind() 的用法
call、 apply 、bind 这三个函数的第一个参数都是 this 的指向对象函数中的this指向 定时器中的this-------window 普通函数的this-------window 对象.方法中的this----当前实例对象 构造函数中的this-----当前实例对象 原型对象中的this-----当前实例对象 事件处理函数中的...
2019-08-14 22:43:39
108
原创 JavaScript中的自调用函数
自调用函数自调用函数(self-invoking funciton)就是函数定义完之后会立即运行的函数. 最常见的写法是:(function() { // function body...}());// or(function() { // function body...})();注意这些结尾都要打分号,不然会报错.优点:都是隐式声明一个函数并调用就是隐式...
2019-08-14 00:19:55
369
原创 JavaScript中的原型对象
原型对象:1.在Javascript中，当系统加载构造函数后，会自动在内存中生成一个对象，这个对象就是原型对象。两者之间在内存中表现为相对独立，不存在谁包含谁的关系。但是两者之间又有一些关联，在构造函数的内部存在一个prototype属性指向原型对象，同时在原型对象的内存也存在一个属性constructor其指向了构造函数。2.作用之一:数据共享,节省空间原型模式: fun...
2019-08-12 23:13:05
906
原创 个人总结JavaScript操作和方法
JavaScript分三个部分 ECMAScript - JavaScript的核心 BOM - 浏览器对象模型 DOM - 文档对象模型BOMwindow是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name定时器...
2019-08-11 14:18:03
181
原创 JavaScript实现继承的4种方法总结
1、原型链继承： var Base = function() { this. name= '小明'; this. age="12" ; this. toString = function() { return "base" ; }; }; Base. CONSTA...
2019-08-08 23:52:27
192
原创 JavaScript中offset、scroll、client三大系列
一、offset系列offset有五个属性分别是：offsetWidth：获取元素的宽。offsetHeight: 获取元素的高.offsetHeight = height + padding + border语法:document.getElementById('div').offsetWidth（因为document.getElementById('div').style.wi...
2019-08-07 23:21:35
174
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人