- 博客(62)
- 收藏
- 关注
RSS订阅原创 Vue自定义指令
Vue自定义指令：全局自定义指令 Vue.directive(name,{})局部自定义指令 directives(name:{})两者区别：全局自定义指令可以在任何实例中应用局部自定义指令只能在本身的vue实例中应用钩子函数：bind： 只调用一次，当指令第一次绑定在元素上市。用来做一次性初始化操作inserted : 当绑定元素插入到DOM中的时候执行（可以用来 自动获取焦点）update ： 在包含该组件的VNdeo（虚拟节点）更新后调用该函数，component
2020-08-01 15:20:06
231
原创 用Vue写一个todolist功能
今天打算用Vue来完成一个todolist的小案例，如下图：功能分析首先看看有什么功能，要用什么方法完成在文本框输入待办事项，按下回车事项会添加到正在进行下面任务完成点击左边的复选框，事项会添加到已经完成的任务如果任务取消，点击右边的横杠删除即可如何实现功能要完成上面的第一个功能，按下回车添加任务...
2020-07-30 22:58:34
2429
1
原创 原型链回顾
对于原型链一直学的很懵，什么prototype __ proto __,实在是绕啊。有一张原型链的图解（如下）如果是刚刚入门肯定被搞得晕头转向，这一个箭头那一个箭头的。今天把他拆开进行分析。首先 函数才有 prototype 原型，对象 有 __ proto __ 属性。上面的图就说明了 prototype 和 __proto __ 的区别再到代码上来看看let obj = {};console.log(obj.prototype); //undefiedconsole.log(ob
2020-07-26 22:54:14
129
原创 JavaScript执行机制
JavaScrip是一门单线程的语言，这句话没毛病，可是javasript也分异步任务 同步任务这就很矛盾了js到底是单线程还是多线程？？其实单线程在执行过程中，所有任务都需要排队，只有前一个任务执行完才能继续下面的任务，这样会不会很浪费时间，于是就有了: 任务队列。javscript在执行代码时会产生一个执行栈，同步的代码在执行栈中，异步任务会到Queue中，有一个Event Loop会循环检查执行栈是否为空，为空时会在Queue中查看是否有需要处理的任务，有的话会拿到执行栈中执行。上面知道了同步
2020-07-19 13:12:26
134
原创 JavaScript面试题
最近发现以前的东西好多都忘了，复习复习const shape = { radius : 0, diameter(){ return this.radius *2;},perimer: ()=> 2 * Math.PI * this.radius};shape.diameter();shape.perimer();20 和 NaNdiameter()是普通函数this指向是 shape 对象perimer()箭头函数this指向所在位置的上下文的环境，所以是window w
2020-07-12 23:03:39
190
原创 Set和Map的详解
一.SetES6提供了新的数据结构Set。类似于数组，只不过其成员值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。1 . Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。var s = new Set();var set = new Set([1, 2, 3, 4, 4]);[...set] // [1, 2, 3, 4]var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);items.size //
2020-07-05 21:49:46
514
原创 初步认识 Promise
一、为什么会出现PromiseJS是单线程运行的，就是说一次只能完成一个任务，如果有多个任务必须排队依次完成，没有Promise的时候，我们完成一个卖商品的任务：需要层层回调函数 function sell(kehu,callback){ console.log(`紫紫接受客户${kehu}的产品询问`); setTimeout(()=>{ // 卖出东西的概率为 0.2
2020-07-05 21:25:13
114
原创 理解浅克隆和深克隆
什么是浅克隆和浅克隆基本定义：浅克隆：直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址深克隆：就是把数据赋值给对应的变量，从而产生一个与源数据不相干的新数据(数据地址已变化)。深拷贝，是拷贝对象各个层级的属性。使用：基本数据类型的使用：let a = 1;let b = a;console.log(a); //1a = 2;console.log(b); //1把 a 的值赋给 b，a的值发送变化时，b不会受到影响引用
2020-06-27 22:38:37
187
原创 ES6解构赋值
ES6中新增了解构赋值： 给我们提供了一种赋值方式，让数据的存储更方便。可以对数组和对象进行操作。使用方法：数组元素使按次序排列的，变量的取值由它额位置决定对象的属性没有次序，变量必须与属性同名，才能取到正确的值使用方式：数组：let [x,y] = [1,2];console.log(x) //1console.log(y) //2对象：let {uname,uage} = {uname : 'Lusy',uage : 60};console.log(uname); /
2020-06-27 16:55:25
104
原创 Js中的对象方法
这里有一个对象var student = { name : 'zizi', age : 16, hobbly : 'sleep' };console.log(student)/*{name: "zizi", age: 16, hobbly: "sleep"} age: 16 hobbly: "sleep" name: "zizi" __proto__: Object*/对象性进行操作：这么操作是很方
2020-06-22 15:30:54
140
原创 nodejs实现用户登录注册------前端发送ajax请求
Typescript 介绍TypeScript是微软开发的一门编程语言，是JavaScript的一个超集。.TypeScript扩展了JavaScript的语法，添加了一些新的遵循ES6规范的语法，. 具有基于类的面向对象编程的特性。任何已经存在的JavaScript程序可以不加任何改动的在TypeScript运行环境下运行。最新的Vue、React也可以集成Typescript，Node.js框架Nestjs、midway中用的就是Typescript语法。JavaScript 与 TypeS
2020-06-21 22:48:18
688
1
原创 XML 和 HTML的区别
XML和 HTML的区别在面试中是常见的一个问题。XML和HTML都是用来操作数据和数据结构的，但是他们本质差别还是很大的。HTML （HyperTextMark-upLanguage）超文本标记语言 用来定义WWWXML （ExtentsibleMarkup language）可扩展标记语言 用来定义其他语言的一种元语言XML和HTML的区别在哪？分为三个方面： 语法 标记方式 作用来区分一、语法在HTML中对于大小写没有有规定，XML中严格区分大小写HTML中双标签可以省略结尾
2020-06-14 17:34:12
274
原创 Ajax的实现步骤
首先，什么是Aiax？Ajax = 异步JavaScript 和 XMLAjax 用于创建快速动态网页的技术通过在后台与服务器进行少量数据交换，Ajax 可以使用网页实现异步更新，可以再不重新加载整个网页的情况下对网页的其中一个部分进行更新。Ajax使用怎么实现 //1.创建异步调用对象 XMLHttpRequest var xml ; // 浏览器兼容性 if(window.XMLHttpRequest){ xml = new XMLHttpRe
2020-06-14 16:06:02
134
原创 箭头函数
箭头函数是ES6中新增的语法： (参数1，参数2，参数3...) => {//函数声明}只有一个形参时 () 可以省略var a = fn =>{ console.log("hello") }函数只有一条语句或者单个表达式的时候{} 可以省略var fn = (a,b) => console.log(x,y);fn(21,16); //21 16返回对象时， 需要用() 括起来，因为{}已经定义语句块了var fn = (name,age) =>
2020-06-08 00:07:40
93
原创 初步学习php
什么是PHP？PHP(Hypertext Preprocessor)超文本与预路器，服务器端 跨平台 HTML嵌入式的脚本语言PHP的作用:动态生成页面内容创建、打开、读取、写入、关闭、服务器上的文件收集表单数据发送和接受cookies添加、删除、修改数据库中的数据加密数据书写格式：<?php...?>< script language=“php”><?...?>输出语句 ：echo变量定义 ： $看到这个符号就像在js看到
2020-06-07 15:44:37
99
原创 网络基础之——冯诺依曼式计算机
最近学习网络基础知识，其实大学有开过这么课程可是在听的时候似乎毫无印象，我学过这门课程？？？没有吧！！！等等我暴露了啥话不多说，进入正题：这次主要是对冯诺依曼式计算机进行了解，说起计算机大家最先想到的肯定是电脑，不过随着现在科技的发展现在有像手机，ipad，智能手表…等都能成为冯诺依曼式计算机。那么到底什么是冯诺依曼式计算机，为什么叫冯诺依曼式计算机首先 为什么叫冯诺依曼式计算机？冯诺依曼是个人的名字，他最先提出程序存储的思想，并成功将其运用在计算机的设计之中，根据这一原理制造的计算机被称为冯·诺依
2020-05-31 23:39:27
628
原创 jQuery中的添加方法
jquery中提供了一些添加方法——before() insertBefore() 在前面添加兄弟元素after() insertAfter() 在后面追加兄弟元素append(),appendTo() 在父元素里面添加子元素前两个是操子元素，第三个是在父元素中添加，看起相似，记起来也是很容易混淆，我每次用这几个方法都需要去查看笔记，今天将对这个几个元素进行分析，理解。before() 、 insertBdfor()befor() : a.before(b) a的前面是b示例：
2020-05-30 23:47:12
503
原创 jquery中的事件方法
1.on() 在被选元素及子元素上添加一个或多个事件处理方法参数：(events[,selector][,data],handler)events : 事件类型（必填）selector ：添加事件的元素（可选）用于过滤出被选中元素中能触发元素的后代data: 传递数据，当一个事件被触发时，要传递给事件处理函数的 event.datahandler：function 事件被触发时的处理函数，如果函数只要执行return false,可简写为 false示例：首先看selector<div
2020-05-24 17:48:15
209
原创 jQuery中的的动画
显示和隐藏方法一、 show() 、hide()show() : 用于显示元素hide() ：用于隐藏元素他两参数一致，参数值也是一样，除了用法上不一样参数：[duration][,easing][,complete])duration: 执行动画的时间easing：动画方式（先快后慢，先慢后快）complete：回调函数，执行动画之后所期待做的事情show 和 hide是通过改变display的值来显示影藏动画示例：<div></div><butto
2020-05-24 16:37:19
140
原创 Jquery的部分函数介绍及使用
1.jQuery DOM 操作（1）text() 获取元素的文本内容（2）html() 获取元素的内容（包括HTML元素）虽然两个都是获取元素文本内容，不同之处在于 text() 只获取文本内容，html() 能将标签和文本一起获取到例：<div class="box1"> <span>使用text()获取</span></div><div class="box2"> <span>使用ht
2020-05-17 23:29:08
85
原创 回顾预编译
今天是一个复习———预编译，这么久没有学习了都快要忘记了JavaScript运行三部曲语法分析预编译解释执行最先会对整个代码全部检测是否有语法错误，在进行预编译，最后准备就绪后执行代码。那么还能记得预编译的过吗？预编译的四步先来一遍：函数执行的前一刻创建活动对象AO将var关键字声明的变量和形参作为活动对象的属性名复制undefined ，如果有函数重名不新增直接替换将形参和实参统一检测到function声明的函数，将函数名作为AO对象的属性名，赋值函数体有函数重名不新增直接更新
2020-05-17 07:07:57
89
原创 利用Bootstrap card 制作母亲节小礼物
谁说程序员不懂浪漫今天 就利用Bootstrap中的卡片组件为母亲大人做一组名片。保证让母亲感动到哭。你将会看到妈妈的这个样子（我儿子终于出息了），开不开心 激不激动！首先要知道什么是卡片：一张图片会配上 一段文字说明，还记得学校的光荣榜吗 上面放一张照片，下面就是姓名年级…介绍。大概就是这个样子滴 （哈哈哈哈 这个图，形象得很）这些外表咱不在乎，上代码需要一个 .card，来拥有一张卡片，在卡片里面有.card-img 卡片的图片，.card-body 卡片的内容在body里面加上卡
2020-05-10 23:10:02
357
原创 Bootstrap3 和 Bootrap4的区别
Bootstrap3 和 Bootrap4都试试用来做响应式布局的他们会有区别呢？bootstrap3bootstrap4这是bootstrap3 和 bootstrap4的官网可以去看看。一.栅格类：说起 Bootstrap，栅格系统一定不能少，bootstrap3 和 boostrap4的栅格类有了一点区别bootstrap3四种栅格：col-xs- 超小屏幕（手机） <768pxcol-sm- 小屏幕 （平板） ≥768pxcol-md- 中等屏幕 （电脑） ≥992pxs
2020-05-10 21:01:55
515
原创 JQuey 安装教程
今天介绍一位新朋友——JQuery。JQuery是一个JavaScript库，其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情“jQuery 库可以通过一行简单的标记被添加到网页中。” 这句话是W3C JQuery教程上的简介，也就是说JQuery简化了JavaScript的编程。除了简化JS他还有哪些优点呢？比JS更灵活，JS需要通过各种方式去找dom对象，...
2020-05-06 00:38:13
381
原创 CSS3——伪类选择器
学习伪类选择器这么久了，都快忘记他的使用方法了，这篇最为一个复习伪类选择器是CSS3已经定义好的选择器，不能改变。1.用于连接的伪元素E:link 设置超链接a在未被访问前的样式E:visited 设置超链接a在其链接地址已被访问过时的样式E:hover 设置元素在其鼠标悬停时的样式。E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样...
2020-05-04 17:51:13
276
原创 Bootstrap——栅格系统
bootstrap内置了一套响应式、移动设备优先的流行栅格系统。栅格系统通过行（row）和列（column）的组合创建布局页面，一行分为 12 例，根据不同的比例改变每列大小。基本格式(1) 行（row）必须包含在 .container（固定宽度）或 .container-fluid（100%）中，便于排列。(2) 通过 行（row） 在水平方向创建一组 列（col）<div cla...
2020-05-03 18:52:39
224
原创 初识 Bootstrap
什么是bootstrap？Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.这个是bootstrap英文网站的介绍在网络上建立响应迅速、移动优先的项目，大概就这个意思吧看看这个介绍就知道他多厉害了吧！bootstrap是一个...
2020-05-03 01:06:28
182
原创 媒体查询 @Media
随着智能手机的普及，响应式布局的使用也是日益增长现在许多网站都在应用这项技术，也方便了我们的生活毕竟不能去哪都带着电脑吧所以媒体查询就出来了只需要一套代码就能在不同的大小的设备上面正确显示。媒体查询媒体查询可以让我们根据设备显示的特征（视口宽度、屏幕比列、设备方向）来设定CSS样式，媒体查询有媒体类型和一个或多个检测媒体特征的条件表达式组成。meta标签在网页头部添加这一行代码<...
2020-04-30 22:54:41
3733
原创 使用 animation实现几个小案列
学习了animation发现它真的好玩，以前写动画必须要JS才能完成，JS复杂性高，需要对DOM频繁操作会导致页面重绘重新排版，造成阻塞。虽然这里说了JS的缺点但是它也有它的优点，今天不作细讲（请看下回分解）。今天主要用animation来实现几个小动画。一、安卓手机充电效果这个图都不陌生吧，今天将用代码来实现它！首先写这个需要那些元素：最外层div ：g-container装充电...
2020-04-27 00:42:11
287
原创 CSS3动画 transform、transition、animation的介绍
animation 复合属性，检索或设置对象所应用的动画特效，是CSS3中一个具有颠覆性的特征，通过设置多个点来控制图片的动画。1.定义通过 keyframes来定义，keyframe 就是关键帧语法：@keyframes name{ 0%{开始状态} 100%{结束状态}}}@keyframes name{ from{开始状态} to{结束状态}}}两种...
2020-04-25 16:59:12
354
原创 对 flex的使用
flex弹性盒子，2009年由w3c的大佬提出，轻松的实现web布局方式，并且在pc端也能很好的实现缩放。他取代了之前的 “display+float+position”的布局形式。今天就介绍介几个有弹性盒子实现的小案例：这里为了看到效果添加了JS部分1.固定底部内容当内容不足浏览器高度时，底部内容要固定在浏览器底部，内容超出浏览器时底部内容要往后推移。之前要实现这一效果需要通过JS来获取...
2020-04-20 00:50:48
142
1
原创 对CSS3伪类选择器 target的应用
最近学习了CSS3认识到了很多新的选择器，我发现一个好玩的的伪元素选择器—— :target 。首先介绍target，然后在写两个小案例。定义和用法：#锚点的名称是在一个文件中连接到某个元素的URL。元素被链接到目标元素。:target选择器可用于当前活动的target元素的样式语法：:target{ css语法}案例：一、点击图片切换在学习 :target 之前这个是...
2020-04-18 23:28:58
547
原创 对百度地图API的进一步使用
上一篇对怎么使用百度地图作了基本介绍，这篇就是对百度地图API的进一步使用。一、 如何获取经纬度和详细地址今天就直接写代码了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取经纬度和详细地址</title> <st...
2020-04-13 00:23:57
116
原创 百度地图的基本使用
前言随着移动互联网的急速发展，对位置服务的需求越来越强烈，如美团、滴滴、共享单车等等一系列的互联网应用都是基于位置提供服务的。国内两大地图提供商百度地图、高德地图不仅仅在导航等应用提供基础的服务，还对外提供一些开放的位置服务的API，开发者可以利用这些第三方的API快速构建自己的位置服务应用。好了好了上面是百度来的，“借鉴”。第一次听说在网页上应用百度地图我首先想到了iframe，就这样不就完...
2020-04-12 01:22:13
223
原创 初识canvas
canvas用于在网页上的图形绘制什么是canvascanvas元素使用JavaScript在网页上绘制图像，专用于2D绘图创建canvas元素<canvas width="500" height="300">您的浏览器不支持canvas！</canvas>尽量不要使用css给canvas添加 width height 会使整个画布拉伸canvas的用...
2020-04-07 00:06:13
148
原创 Set 和 WeakSet 的区别
Set 和Map的主要应用场景在于数据重组和数据存储Set集合创建Set数据结构const s = new Set;console.log(s);/*Set(0) {} [[Entries]] No properties size: (...) __proto__: Set*/打印出来是一个空的Set对象，通过new来创建Set...
2020-03-29 00:00:46
2213
原创 ES6class的理解
在ES5中有构造函数，用new关键字调用的称为构造函数，通过构造函数添加prototype属性，让代码更简洁例：function Student(name,age){ this.name = name; this.age = age;}Student.prototype.say = function(){ return `My name is${this.name},I'm $...
2020-03-28 01:09:32
162
原创 ES6 新增对象的特性和方法
ES6中对对象新增了很多特性和方法，简化了很多。成员速写和方法速写//befor:function createUser(name,age,sex) { return{ name : name, age : age, sex : sex, say : function(){ console.log(this.name,this.age) } ...
2020-03-23 14:46:49
182
原创 ES6 箭头函数
箭头函数在ES6中新增了箭头函数，箭头函数也是一个函数表达式语法： (参数1, 参数2) =>{ 函数体； }首先说说箭头函数的基本语法：1.如果参数只有一个会省略小括号const fun = num =>{ console.log(num); } fun(1) //输出 1```2.如果箭头函数只有一条返回语句，...
2020-03-23 00:40:21
111
原创 【ES6】let const var 的区别
let const var 的区别1.var声明的变量会直接在window中，造成全局污染,let,const声明的变量不会挂在window中let a = 2;console.log(a);console.log(window.a);//undefined const b = 1;console.log(b);console.log(window.b);//undefined...
2020-03-20 23:06:59
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人