dengyouqiao0579-CSDN博客

转载 VurRouter

/** * Vue-router 基本用法 * npm install --save vue-router */1, Router实例对象const RouterInstance = new Router({ /** * mode 不设置默认使用 hash * 就是使用#来设置路径 * history 模式通过/来设置...

2019-02-18 15:14:00 175

转载 Vue $nextTick

<!-- 应用场景：点击一个按钮，由v-if让div显示，并且拿到div的内容的时候。在div还没有被创建出来的时候，是拿不到内容的。这里涉及到了Vue异步更新队列的概念 Vue观察数据变化的时候并不是直接更新DOM，而是开启一个队列,并缓冲在同一事件循环中的发生的所有数据的改变，在...

2019-02-17 11:39:00 163

转载 Vue组件的高级用法

1，递归组件<!-- 递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。设置那么House在组件模板内就可以递归使用了,不过需要注意的是，必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded 组件递归用来开发一些具体有未知层级关系的独立组件。比如： ...

2019-02-17 11:25:00 230

转载 Vue Slot插槽

<!-- 内容分发 1，两个特点组件不知道自己要挂载的内容是什么组件可能有自己的模板组件是由： props 传递参数 events 触发事件 slot 内容分发构成 ...

2019-02-17 10:39:00 126

转载 Vue组件通讯

组件通讯的关系：父子组件通讯，兄弟组件通讯，跨级组件通讯。父子组件通讯 <!-- 当子组件像父组件传递数据时，就要用到自定义事件了。 Vue组件通讯模式观察者模式 dispatchEvent和addEventListener 子组件用$emit() 来触发事件 this.$emit("addNum", this....

2019-02-17 10:15:00 144

转载 Vue组件 props

组件是Vue最强大的功能之一；组件化编程，允许我们使用小型，独立，通用的可复用型组件构建大型应用；任何页面都可以抽象为组件树； <!-- 组件需要注册后才能使用。注册有全局注册和局部注册两种方式全局注册：全局: 局部注册：局部: 注册后的组件只是在该作用域下有效父组件正向的向子组件传递数...

2019-02-17 09:46:00 126

转载 Vue表单

<!-- v-model 使用v-model后，表单控件显示的值只依赖所绑定的数据，不在关心初始化时的value; 对于textarea 之间插入的值，在中文输入法没有选定插入的值之前，不会触发更新，可以使用@input来代替 radio checkbox select 的用法修饰符:...

2019-02-16 22:55:00 181

转载 Vue数组更新

<!-- 数组更新 7种会改变原始数组的方法 push() pop() shift() unshift() splice() sort() reverse() Vue检测到数据变化会更新视图不会改变原数组方法，可以使用新数组替代...

2019-02-16 22:06:00 356

转载 Vue内置指令

v-bind <!-- 绑定 class的几种方式 1, 对象语法直接绑定一个Object类型数据。或者计算属性或者method或者data 2, 数组语法直接绑定一个[]类型数据;也可以使用computed,methods,data 在组件上使用的时候，样式规则直接作用到根元素上，如果需要给组...

2019-02-16 21:56:00 144

转载 Vue计算属性

模板内的表达式用于简单的计算，当其过长或者逻辑复杂时，会难以维护。一般用计算属性。<!-- 计算属性所有的计算属性都以函数的形式写在vue的实例内的computed选项内，计算属性里可以完成各种复杂的逻辑，包括运算，函数调用的只要将最终结果返回就可以了。计算属性可以依赖其他计算属性 ...

2019-02-16 20:33:00 143

转载 Vue指令和事件

/** * 语法糖的概念： * 语法糖是指在不影响功能的情况下，添加某种方法实现同样的； * 使用语法糖,可以简化代码的书写 * 比如 v-on:click='func' @click='func' * v-bind:src :src */<!-- v-on 可以监听原生DOM事件click,dbclick,keyup,mous...

2019-02-16 20:21:00 164

转载 Vue插入值与过滤器

双大括号语法{{}}/ v-text  <h3 v-pre>{{name}}</h3> <h3>{...

2019-02-16 19:09:00 100

转载 HTML5响应式设计

响应式设计的设计原理是通过CSS3的Media Queries来调整页面元素在不同屏幕分辨率下的显示。在大多数的响应式设计页面中，都会使用如下的meta标记。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1...

2017-12-20 21:29:00 205

转载 HTML5布局

1,图文混排布局 img { float: right; } p { font-size: 32px; }<div class="sec"> <img src="penguin.png" alt="penguin"> <p>With no change...

2017-12-19 18:47:00 234

转载初识webpack

1， mkdir webpack-test2， cd webpack-test3， npm init （一路回车）4，npm install webpack --save-dev　　　　　　新建一个hello.js 文件　　　　　　使用webpack打包这个文件： webpack hello.js hello.bundle.js （//webp...

2017-12-09 11:54:00 69

转载 HTML快速复习

1,强调 em用斜体 strong用粗体2，<q>引用文本</q>blockquote标签长文本引用块级引用3,address为网页加入联系地址信息4,<code>一行代码</code> <pre>多行代码</pre>5，无序列表ul>li 有序列表ol>li6,div是独立的版块7，表格...

2017-12-09 11:21:00 97

转载 jQueryAjax

1,load(); 请求服务器中的数据，并把返回的数据放置到指定的元素中， load(url,[data],[callback]); url为加载服务器的地址， data请求时发送的数据 callback请求成功后的执行函数2，getJSON(); 异步加载JSON格式的数据 $.getJ...

2017-12-09 11:14:00 83

转载 jQuery工具类函数

1，获取浏览器的名称和版本信息 $.browser对象可以获取浏览器的名称和版本信息 $.browser.version获取浏览器的版本信息 $.browser.chrome 谷歌true $.browser.mozilla 火狐true2,检测浏览器是否属于W3C盒子模型 $.support.boxModel();w3c盒子模型width和height这两个属性中不...

2017-12-09 11:13:00 56

转载 jQuery常用插件

1,表单验证插件validate2，表单插件form $('form').ajaxForm({options}) options:用于设置发送时的数据和参数3，图片灯箱插件 lightBox $(linkImage).lightBox({options});4，图片放大镜插件jqzoom5,cookie插件,方便保存，读取，删除用户信息 $.cookie(key,val...

2017-12-09 11:12:00 52

转载 jQuery动画

动画1,隐藏动画hide() fast 200 slow 600 display:none;2，显示动画show();3,toggle 切换元素的显示和隐藏4，slideDown 用滑动动画显示一个匹配元素事件数值越大动画越慢， sideDown(duration,function(){//等待动画执行1m后执行的别的动作 }); slideUp(slow...

2017-12-09 11:11:00 45

转载 jQuery事件

事件:1， $('ele').click(function () {}); dblclick(function() {}); $('ele').click(传递的数据,function(e){e.data 指向传递的数据}); //为了解决不同作用域下数据的传递问题2, mousedow() mouseup() 鼠标按下，鼠标离开事件 event switch 1左键，2中键，3右...

2017-12-09 11:10:00 55

转载 jQueryDom操作

1,动态创建元素节点 var div = $('<div class="right">动态创建文本节点</div>')2,内部插入元素append(content) 向每个匹配的元素内部追加内容(前面是被插入的对象，后面是要在对象内部插入的元素)appendTo(content) 把所有匹配的元素追加到另一个，指定元素的元素中（前面是要插入的元素，后面是被插入...

2017-12-09 11:09:00 114

转载 jQuery选择器

id选择器 $('#id') 类选择器 $('.class') 元素选择器 $('element') 全选选择器 $('*') 子选择器 $('div > p') 直接子元素后代选择器 $('div p') 相邻兄弟选择器 $(...

2017-12-09 11:08:00 71

转载深入理解padding

1，padding与元素的尺寸， 1),对于block水平元素， 1，padding值暴走，一定会影响尺寸， 2，width非auto,padding影响尺寸， 3，width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。 2),对于in-line水平元素 1,水平padding影响...

2017-12-09 11:06:00 276

转载深入理解overflow

1,overflow基本属性 visible(默认) ie6会把盒子撑开 hidden 超出部分隐藏 scroll 滚动条 auto 尺寸溢出出现滚动条 inherit IE8+ 以上浏览器支持如果overflow-x和overflow-y值相同相当于overflow，如果值不同，其中一个属性的值...

2017-12-09 11:05:00 753

转载深入理解margin

1,margin与容器的尺寸元素的尺寸包括 1，可视尺寸适用于没有设定width、height的普通block水平元素。只适用于水平方向尺寸：一侧定宽自适应布局 <img width="150px" style="float:left;"> ...

2017-12-09 11:04:00 135

转载深入理解line-height

line-height 行高两行文字基线之间的距离line-height 与行内框盒子模型所有内联元素的样式表现都与行框盒子模型模型有关！ 1，内容区域大小与font-size相关 2，内联盒子不会让内容成块显示 3，行框盒子每一个行就是一个行框盒子，每个行框盒子又是由每一个内联盒子组成 ...

2017-12-09 11:03:00 76

转载深入理解border

1,border-width 不支持百分比类似的out-line,box-shadow,text-shadow,... borer-width 支持关键字 thin 1px; medium 厚薄均匀 3px; thick 厚的5px;2,border-style:solid; border-style:dashed;虚线 IE 2:1; chrom...

2017-12-09 11:01:00 111

转载 echarts快速入门

浏览器画图的原理 * 1，Canvas 基于像素点 * 2,SVG 基于对象模型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Echarts</title> <style&g...

2017-12-09 10:23:00 111

转载 ES6快速学习

常用的ES6知识点　　　　1，let和const 　　2，解构赋值　　3，正则扩展　　4，数值扩展　　5，数组扩展　　6，函数扩展　　7，对象扩展　　8，字符串扩展　　9,Symbol　　10,Promise 异步操作　　11,Generator 异步操作　　12,模块化 13,Decorator修饰器 14,Iterator 15,Proxy,Reflect 16...

2017-12-08 20:05:00 108

转载 Javascript二叉树算法学习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BinaryTree</title> </head> <body> ...

2017-09-15 20:20:00 48

转载 Handlebars.js模板

1，Handlebars是一个很好的前后端的分离的方案。通过对view和data的分离来快速构建Web模板。优点：在js中避免写入html代码，可读性好，易维护。2，常用属性:　　{{home }}　　{{#if birth}} {{/if}} 判断　　　　each {{#each arr}} {{this}} {{/each}} 遍历　　　　with {{#wi...

2017-09-15 15:10:00 73

转载变量、作用域和内存问题

//JavaScript高级程序设计读书笔记1，基本类型和引用类型的值基本类型值：简单的数据段。有5种基本数据类型，Undefined,Null,Boolean,Number和String；它们的值保存在栈内存。基本类型是按值访问的，所以我们操作的是保存在变量中的实际值。引用类型值：JavaScript不能直接操作对象的内存空间，实际上是操作对...

2017-04-11 22:36:00 57

dengyouqiao0579的博客