diaotan7234-CSDN博客

转载 Vue源码学习之双向绑定

首发地址：CJWbiu's Blog原理：　　‘当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 I...

2019-04-14 23:13:00 135

转载 Vue源码学习之数据初始化

首发地址：CJWbiu's Blog　　在这里思考一个问题，使用Vue的时候需要在创建Vue实例时传入一个option，这里包含了我们定义的props、methods、data等。而在methods的方法中获取data中的key值都是直接通过this.key获取option对象中的methods中的定义的方法如何通过this访问到data中的数据呢？let vue = new...

2019-04-14 23:02:00 111

转载 Vue学习笔记

路由跳转后不刷新数据官方文档上说了路由跳转后是对原组件进行复用，所以跳转后不会对数据进行刷新，想刷新需要对$router进行监听，或者在<router-view>上绑定key值，使它成为唯一的组件转载于:https://www.cnblogs.com/cjw-ryh/p/9047196.html...

2018-05-16 17:43:00 104

转载 MongoDB学习笔记

mongodb会生成一个默认的主键‘_id'，这个主键值是一个ObjectID对象，由此来确保每个值的唯一性。如果需要通过'_id'来查询数据时，传入的查询值也必须是一个ObjectID类型的值：　　　　　此处使用mongodb：　　　　　　　　　　　在此之前需引入：　　　　　　转载于:https://www.cnblogs.com/cjw-ryh/p/...

2018-05-12 16:45:00 73

转载实现一个类似bootstrap的多级下拉菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test</title> <meta name="viewport" content="width=device-width, initial-scal...

2018-01-24 20:37:00 141

转载 bootstrap栅格系统的实现

bootstrap提供了一个非常实用的栅格系统，可以实现响应式的网格布局，原理其实很简单，利用了float、百分比的宽度和@media的配合实现响应式，bootstrap默认把一行分为了12列，提供了xs、sm、md、lg四个不同的尺寸，而这四种尺寸其实是一样大的，只是在不同的页面宽度才会触发列的浮动，例如xs是最小的，不管页面多大都会触发列的浮动，而sm只有页面在768px以上才...

2018-01-24 13:15:00 145

转载滑动效果的标签页切换

演示地址：演示为每个标签页与相应的按钮设置class，根据不同位置的标签页做不同的变形处理，使用translate3d不会改变元素原本的位置因此不会导致浏览器对相关layout进行重计算，并且translate3d可以触发GPU加速，提升性能。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head&gt...

2017-11-17 00:05:00 357

转载一个简单的类似Vue的双向绑定

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 ...

2017-11-11 12:06:00 97

转载元素垂直居中的常见方法

　　<--HTML-->　　<div class="box box1"> <div>flex</div> </div> <div class="box box2"> <div>inline-block</div> &...

2017-10-28 17:00:00 75

转载 setTimeout与setInterval

setTimeout与setInterval这两个方法都会返回一个数字,这串数字就是它们的名字，通过获取这个名字就可以利用clearInterval和clearTimeout来清除对应的定时器：如图所示，可以将7789这个编号传给clearInterval来清除定时器。这两个方法都可传三个参数：setInterval与setTimeout对第一个参数的解析都是采...

2017-10-27 14:24:00 71

转载 JavasJavaScript笔试题

这几天参加了好多场宣讲会，记录一下遇到的编程题还有平时练习遇到的（如果有更好的方法欢迎提出，本人也是菜鸟一枚）：1.数组查重，并返回出重复次数最多的项并记录重复次数：function chachong(arr){ arr = arr.sort(); //排序 var b=[],max={},c=[],t; b[0] = {val:arr[0],...

2017-10-19 23:16:00 99

转载 JavaScript实现一个简单的密码输入功能

常见的密码输入框当输入字符后会被替换成‘*’，而且旁边会有个小眼睛可以查看原本的字符，虽然input标签有这个功能，但这只是自己正在看正则表达式的时候突然想到的，就当做个练习，自己手动实现下： 1 <body> 2 <input type="text" id="psw"><button id="show">show</butt...

2017-10-16 15:00:00 538

转载 JavaScript跨域资源请求（CORS）解决方案

跨域：当协议、主域名、子域名、端口号中任意一个不相同时都不算同一个域，而在不同域之间请求数据即为跨域请求。解决方法有以下几种（如有错误欢迎指出）以请求图片url为例：1.通过XMLHttpRequest对象实现（IE10以下不支持）XMLHttpRequest2.0已经实现了对CORS的原生支持，只需要在访问资源的时候使用绝对URL即可，需要在服务器端将头信息“Access-Co...

2017-10-15 20:30:00 463

转载学习Ajax

1.XHR对象 IE7+、Firefox、Opera、Chrome和Safari都支持原生XMLHttpRequest对象，IE6不支持，只支持ActiveXObject对象，该对象在IE11中已经不再支持了。IE中有三种不同版本的XHR对象MSXML2.XMLHTTP、MSXML2.XMLHTTP.3.0、MSXML2.XMLHTTP.6.0，所以可以通过一下函数...

2017-10-14 22:00:00 89

转载各种报错

记录一些平时遇到的报错：1.Uncaught ReferenceError: Invalid left-hand side in assignment　　xhr.readState == 4写成了xhr.readState =4，少写了一个符号。2.Encoding::CompatibilityError: incompatible character encodings: ...

2017-10-12 20:35:00 86

转载 Javascript写的一个可拖拽排序的列表

自己常试写了一个可拖拽进行自定义排序的列表，可能写的不太好，欢迎提供意见。我的思路是将列表中的所有项都放进一个包裹层，将该包裹层设为相对定位，每当点击一个项时，将该项脱离文档并克隆一份重新添加到文档末尾并通过设置绝对定位让它出现在同样的位置，而原本在它后面的项则会因为它脱离文档而自动填充空位，当鼠标松开时通过鼠标的位置计算出当前位置处于列表的第几项，让后再将克隆项插入到该项之前。...

2017-10-05 18:10:00 141

转载 css文本换行的问题

今天敲代码的时候发现了一个一直都没太注意的小问题，当我在一个200px的div中写了一长串的‘f ‘时发现没有换行但加上空格或标点符号后就能自动换行原来浏览器把它当成了一串完整的单词，所以默认不换行，只有在一个单词的结尾才会自动换行，所以这里就需要强制还行，用word-wrap：break-word;就可以实现：转载于:https://www.cnblogs...

2017-10-04 11:15:00 83

转载 Sticky Footer的实现

Sticky Footer即绝对底部，是一种常用的布局方式，页脚在内容区未超出窗口高度时一直保持在最底部显示，而超过窗口高度时则保持在内容区最底部。有两种实现方法：第一种：经典的实现方式html<div class="box"> <div class="content"> <p>内容区</p&g...

2017-10-03 18:13:00 78

转载圣杯布局

圣杯布局也就是三列布局（反正我觉得不像圣杯）,就像这样：中间是主要内容，两边是其他内容如广告什么的，中间的内容区是自适应大小的，而两边的是固定大小，可能这样的布局很容易让人想到用flex布局实现，一开始我也是这么想的，但圣杯布局有一个关键的地方就是中的主要内容区要优先加载，而文档加载是按结构顺序加载的，所以center这个区块就要放在left和right前面，结构如下：1...

2017-10-03 16:04:00 75

转载 setTimeout的异步传输机制

setTimeout是异步的，在设置完setTimeout后，指定代码会在设定的时间后加入到任务队列，但并不是立即执行，js是单线程语言，所有的代码按顺序执行，即同步执行，同步执行的代码放在执行队列中，而异步执行的setTimeout放在任务队列中，执行顺序是先执行完执行队列中的代码再去查看任务队列中是否有要执行的代码：这段代码看上去好像4应该比5先打印出来，但实际上是先打印出5...

2017-08-05 22:51:00 172

转载 Javascript的垃圾回收机制

　　在js中，所需内存的分配以及无用内存的回收完全实现了自动管理。垃圾收集机制原理：找出那些不再使用的变量，然后释放其占用的内存，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间）周期性的执行这一操作垃圾收集的方式有两种：标记清除法和引用计数法。　　标记清除法：给存储在内存中的所有变量添加标记，去除掉环境中的变量以及被环境中的变量引用的变量的标记，剩下的带标记的就是准备删除...

2017-07-07 15:39:00 50

转载相对布局和绝对布局

position属性有四个值，static（默认值），fixed，relative（相对）和absolute（绝对）。relative是相对于当前位置进行定位，如果将top和left设为0，那么就是当前的位置，并且relative不脱离文档流占据位置：如图中这两个盒子一开始设置为相对布局top与left都设为0，结果和没设置定位的位置一样；absolute是基于父元素来定...

2017-05-26 17:32:00 340

转载关于Chrome和Opera中draw Image（）方法无法在canvas画布中绘制图片的问题

1 var c=document.getElementById("myCanvas");2 var ctx=c.getContext("2d");3 var img=document.getElementById("tulip");4 ctx.drawImage(img,10,10,200,200);学习canvas时，发现当在Chrome和Opera中运行上面代...

2017-05-23 21:12:00 109

转载 js中对象的理解

JS中对象是可变的控件集合，对象的内容是可以更改的，可以为它添加任意属性或删除，而基本数据类型虽然拥有方法，但它们的值是不可变的，之所以它们拥有方法，是因为当它们调用方法是，后台会自动创建一个相映包装类型的一个实例，然后在实例上调用指定方法，最后再销毁该实例；例如：1 var s1="some text";2 var s2=s1.substring(2);就相当于以下...

2017-05-20 17:17:00 46

转载 '||'和'&&'的使用

‘||’和‘&&’在红皮书上有一大串的规则，但总结起来就是：‘||’：返回为结果true的值‘&&’：返回结果为false的值如图：转载于:https://www.cnblogs.com/cjw-ryh/p/6882548.html...

2017-05-20 17:03:00 279

转载对于闭包的理解

学了这么久的javascript一直没搞懂闭包，今天又看了一遍终于搞懂了。闭包即在包含在函数中的函数，要创建闭包，只要在一个函数中再创建一个函数或者将一个函数作为返回值返回。由于这个函数在另一个函数内部，所以它可以访问外部函数中的上下文环境，例如：函数fn中有一个匿名函数，匿名函数接收一个变量，并返回这个变量与fn中a的值相加的结果。当变量p调用fn时，即将fn中的匿名函数赋...

2017-05-20 16:50:00 100

转载关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题：html：1 <div class="top">2 <div class="one">I'm the first!</div>3 <div class="two">I'm the second!</div>4 </div>css： ...

2017-05-18 23:43:00 449

转载 jQuery制作一个多彩下拉菜单按钮

最终效果图：html代码： 1 <div id="list"> 2 <div id="btn"> 3 <div class="icon"> 4 <span></span> 5 <span&...

2017-04-27 20:02:00 214

转载 JS中的关系操作符与自动转型

　　很多时候对数据操做时都会遇到数据转换，有的是显示转化，有的是隐式转化，即调用默认的规则进行数据转换，经常会把数据转换的方式搞混，于是就花了点时间做了个小小的总结：一元操作符（--，++，-，+）作用在非数值时，会和Number（）一样进行数据转换；（PS：这里的-，+表示的是正负，并不执行加减）减法操做（-）作用在非数值时也是调用Number（）进行转换，而加法（+）作用...

2017-04-26 21:01:00 99

转载用javascript编写一个简单的随机验证码程序

简单模拟网页的随机数字验证码，效果图如下：html代码：1 <div id="content">2 <div class="left">3 <input type="text" class="txt" id="in">4 </div>5 <div class="r...

2017-04-18 20:45:00 387

转载 javascript中构造函数与普通函数的区别还有关于“new”操作符的一些原理

有一种创建对象的方法叫做工厂模式，例如：1 function person(name,age){2 var o=new Object();3 o.name=name;4 o.age=age;5 return o;6 }7 var per=person("Li",44);8 alert(per.name); //Li9...

2017-04-17 18:14:00 84

转载一个简单的jquery左右列表内容切换应用

选中左边某个选项点击添加，即可将选中项添加到右边文本框中，点击选中全部即可将全部选项移到右边，移除按钮功能相同。html代码： 1 <div id="main"> 2 <div id="left"> 3 <div id="select1" class="sel"> 4 <...

2017-04-16 22:43:00 258