评价列表ratings组件

2017-05-08
阅读 8 分钟
3.1k
需要注意的是main.js里面需要取消vue-router的默认路由,src/main.js的router.replace('/goods');需要去掉原因是在添加了其他页面(原来路由只有一个页面goods,现在多了页面ratings)之后,在浏览器加载页面的时候: 首先会先加载所有页面 在各个页面都在加载的过程中,会跳到默认路由 然后这些页面被中断了加载,导致了页面内...

split,formatDate,store,util组件

2017-05-08
阅读 4 分钟
2.9k
split组件(vue)的代码 split组件因为常使用,所以单独独立出来,并且结构相当简单. {代码...} formatDate.js组件 {代码...} {代码...} formatDate.js是一个自定义的js组件,不是vue组件,目录位于:src/common/js,这种写法是为了练习js的模块化编程 将单独的一个函数写成一个模块 通过export导出函数 通过import导入函数 {代...

ratingselect组件

2017-05-05
阅读 4 分钟
2.8k
方法有:@select="selectRating" @toggle="toggleContent",通过将字组件的方法和父组件的方法进行关联,这样就能够实现跨组件通讯和操作

shopcart.vue购物车

2017-05-05
阅读 7 分钟
5.2k
购物车列表的显示和隐藏(折叠)是通过数据fold来决定的,他是通过计算属性listshow来实现的,这样达到了不用操作dom就可以改变dom行为的效果,vue的数据驱动设计.

shopcart-list购物车列表页

2017-05-05
阅读 6 分钟
4.9k
需要使用better-scroll进行列表内容滚动绑定 使用vue2的transition动画过渡处理动画 使用子组件cartcontrol处理购物车的添加删除操作cartcontrol.vue购物车操作按钮 {代码...} 购物车详情内容shopcart-list 一共有两块,list-header,list-content,这是根据设计稿内容确定的 list-header 绑定清空按钮 {代码...} 通过设置s...

cartcontrol.vue购物车操作按钮

2017-05-05
阅读 4 分钟
4.1k
html代码 知识点: 使用了vue2的动画实现方式-transition,这里主要在css上设计来配合vue2 cartcontrol这个模块主要通过三个小模块实现,删除按钮,显示数量块,增加按钮 删除按钮和增加按钮都带有一个click方法,并且都有v-show来根据food的数量来控制显示,而显示数量块就只是单纯显示food的数量 {代码...} js代码 知识点: 引...

商品区域goods.vue

2017-05-04
阅读 10 分钟
6.7k
技术点: 定义了2个wrapper,分别是menu-wrapper和foods-wrapper,对应当前页面的架构,左右两边的区域 v-if和v-show的选择使用 v-for传递索引 vue传递原生事件$event 使用stylus的mixin处理一些border和img的问题 建立menu区域和foods区域的Y坐标对应关系,实现滚动foods区域会显示相应的menu区域,点击某个menu区域就显示某...

关于购物车添加按钮的动画

2017-05-04
阅读 4 分钟
12.5k
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画

头部组件header.vue

2017-05-03
阅读 11 分钟
10.5k
五.Header.vue 弹层制作 vue动画效果配置和弹层css sticky footer原理 使用css sticky footer技术 vue的v-for遍历 vue的v-show和事件监听 vue动画处理 header和公告栏制作 text-overflow:ellipsis的使用 font-size:0和vertical-align的使用 mixin的运用 stylus相关和1像素边框问题 背景图片的虚化 flex布局的使用 html部...

星星组件star.vue

2017-05-03
阅读 3 分钟
6.9k
使用class来显示星星,有3种类型,全星,半星,无星,使用star-item代表星星本身,然后分别使用on,off,half代表三种不同类型的星星

vue动画效果配置和弹层css sticky footer

2017-05-03
阅读 4 分钟
5.1k
vue动画效果配置 有两种方式: 一种是css方式 需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。 v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。 v-leave: 定义离开过渡的开始状态。在...

stylus相关和1像素边框问题

2017-05-03
阅读 4 分钟
7.4k
1像素边框问题 1像素边框问题其实就是Dpr的比例问题,例如 Retina屏设置1px边框,实际显示2px,因为Dpr是2,所以会显示为2px 网上有很多方法:7 种方法解决移动端 Retina 屏幕 1px 边框问题 目前这里用的是伪元素 + transform 实现: 伪元素:总结伪类与伪元素 {代码...} 原理是利用 :before 或者 :after 重做 border,并且根据...

es6学习笔记-函数扩展_v1.0_byKL

2017-03-21
阅读 4 分钟
1.7k
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。

es6学习笔记-Symbol_v1.0_byKL

2017-03-20
阅读 9 分钟
2.5k
它是JavaScript语言的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。ES5的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin模式),新方法的名字就有可能与现有方法产生冲突...

练习倒计时例子_v1.0-byKL

2017-03-20
阅读 2 分钟
1.5k
练习倒计时例子 倒计时就是时间一秒秒的倒数,一般都是目标时间跟现在时间进行比较 html部分 {代码...} js部分 Date对象的使用 Date 对象基于1970年1月1日(世界标准时间)起的毫秒数,返回的是毫秒数 传入的参数dateString表示日期的字符串值。该字符串应该能被 Date.parse() 方法识别的才能够解析为毫秒数 通过解析时间...

练习视差滚动例子_byKL

2017-03-18
阅读 4 分钟
5.1k
指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术。通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果

es6学习笔记-数值的扩展_V1.0_byKL

2017-03-14
阅读 3 分钟
1.4k
es6学习笔记-数值的扩展 有一些不常用或者还不支持的就没有记录了,总体来说本篇只是一个备忘而已 Number.isFinite(), Number.isNaN() Number.isFinite()用来检查一个数值是否为有限的(finite)。 {代码...} Number.isNaN()用来检查一个值是否为NaN。 {代码...} 两个新方法只对数值有效,非数值一律返回false。 parseInt...

es6学习笔记-字符串模板_v1.0_byKL

2017-03-14
阅读 4 分钟
2.3k
tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。 tag函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接受到value1和val...

es6学习笔记-字符串的扩展_v1.0_byKL

2017-03-12
阅读 5 分钟
1.6k
JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必须用双字节形式表示,否则会解析错误。ES6对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符,不受限于4位。例如下面的写法就是合法的,能够被正确解析:

关于laravel5的excel包maatwebsite/excel的使用笔记_v1.0_byKL

2017-03-11
阅读 4 分钟
11.7k
关于laravel5的excel包maatwebsite/excel的使用笔记 关于安装 官网已经很详细了,不再描述.[链接] 关于导入 导入的话只有几个小地方需要注意: 导入的时候会有产生一些null的cells {代码...} 关于中文或者乱码问题 {代码...} {代码...} {代码...} 导入的时候只读取第一个sheets {代码...} {代码...} {代码...} 关于导出 需...

关于composer一些学习和理解_v1.0_byKL

2017-03-10
阅读 5 分钟
2.1k
Composer 不是一个包管理器。是的,它涉及 "packages" 和 "libraries",但它在每个项目的基础上进行管理,在你项目的某个目录中(例如 vendor)进行安装。默认情况下它不会在全局安装任何东西。因此,这仅仅是一个依赖管理。

关于抽象类和接口的初步理解

2017-03-09
阅读 4 分钟
2.4k
抽象类是指在 class 前加了 abstract 关键字且存在抽象方法(在类方法 function 关键字前加了 abstract 关键字)的类。

es6学习笔记-变量析构_v1.0_byKL

2017-03-08
阅读 7 分钟
4.6k
扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,即把数组或类数组对象展开成一系列用逗号隔开的值,看解释以为是变成了值,其实不然,看输出就知道,其实也是一个数组

es6学习笔记-顶层对象_v1.0_byKL

2017-03-07
阅读 2 分钟
2.5k
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象,在浏览器环境指的是window对象,在Node指的是global对象。 ES5之中,顶层对象的属性与全局变量是等价的。 ES6为了改变这一点: var命令和function命令声明的全局变量,依旧是顶层对象的属性; let命令、const命令、class...

es6学习笔记-let,const和块级作用域_v1.0_byKL

2017-03-06
阅读 4 分钟
1.6k
es6学习笔记-let,const和块级作用域_v1.0 块级作用域 javascript 原来是没有块级作用域的,只有全局作用域和函数作用域 例子1 因为没有块级作用域,所以每次的i都是一样 {代码...} 例子2 这里可以跟以前在<js高程3>里面有一个闭包的例子一起理解 {代码...} {代码...} 虽然这里是说闭包保存的是整个变量对象,导致了i...

es6学习笔记-箭头函数_v1.0_byKL

2017-03-05
阅读 4 分钟
2.1k
es6学习笔记-箭头函数_v1.0 箭头函数使用方法 {代码...} 一个比较完整的例子: {代码...} 反引号和模板字符串相关资料 箭头函数的this 箭头函数没有自己的this,也就不能用call()、apply()、bind()这些方法去改变this的指向。 箭头函数的this是固定的,都指向函数定义时的作用域,主要是因为他本身并有this,所以要指向外层代...

es6学习笔记-module_v1.0_byKL

2017-03-02
阅读 4 分钟
1.6k
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用 export 关键字输出该变量。

vuex2.0-例子学习-counter_byKL

2017-02-26
阅读 10 分钟
3.1k
要使用webpack和babel和npm,而且他们分别在外层的项目的根目录中,但是考虑本次demo他们不是主角,所以没有太过详细描述,不过需要知道的是,要理解vuex,就必须要掌握一部分的es6语法和webpack打包和babel转译es5的知识,不然看起来会一头雾水

babel6 入门-配置安装使用_byKL

2017-02-24
阅读 5 分钟
6k
因为es6比es5的代码更为适合编写程序,但是因为历史的原因,现在普遍的浏览器并不支持es6代码(普遍支持es5),即如果你写es6代码之后,在浏览器上运行出错,因为浏览器的javascript解析器无法解析es6代码

关于node.js和npm 和nvm_byKL

2017-02-23
阅读 3 分钟
3.1k
Node 是一个服务器端 JavaScript 解释器,Node 本身运行 V8 JavaScript。V8 JavaScript 引擎是 Google 用于其 Chrome 浏览器的底层 JavaScript 引擎。