yx912-优快云博客

原创 Promise对象

ECMAScript 6 ，允许对延时和异步操作流进行控制 Promise 对象有以下几种状态: - pending (进行中): 初始的状态，即正在执行，不处于 fulfilled 或 rejected 状态。 - fulfilled (已完成): 成功的完成了操作。 - rejected (已失败): 失败，没有完成操作。 - settled (已解决): Promise 处于 fu

2017-09-17 20:25:52 414

原创使用javascript 获取 data- 自定义属性

HTML5 data-* 的读写方式一、data-* 有两种设置方式：1、可以直接在HTML元素标签上书写<div id="test" data-age="24"> Click Here</div>其中data-age 是一种自定义属性。2、通过javascript 操作HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合var t

2017-09-17 20:25:00 1820

原创数组 forEach() 与map()的区别

相同点：都是循环遍历数组中的每一项forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）匿名函数中的this都是指向window只能遍历数组接下来我们看看这两个方法1.map()方法map定义和用法：map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。我的理解就是：原数组进行处理之后对

2017-09-17 20:24:12 2037

原创正则表达式的语法、RegExp对象的匹配方法、String对象的匹配方法

一、正则表达式的语法二、RegExp对象的匹配方法exec方法匹配字符串后，匹配到的所有的值返回一个数组Array[2]0: "JavaBcript"1: "Bcript"index: 0input: "JavaBcript是我"length: 2test方法返回false代表无匹配 ,true代表匹配三、String对象的匹配方法方法名描述 search() 返回字

2017-09-17 20:23:25 1123

原创字符串String类型、数组 Array类型

String类型的方法方法描述 charAt, charCodeAt, codePointAt 返回字符串指定位置的字符或者字符编码。 indexOf, lastIndexOf 分别返回字符串中指定子串的位置或最后位置。 startsWith, endsWith, includes 返回字符串是否以指定字符串开始、结束或包含指定字符串。 concat 连接两

2017-09-17 20:22:17 3071

原创饿了么项目---1、vue-cli快速构建项目（包括兼容老项目时需引入bootstrap、jquery的方法）

一、my-project项目安装前准备安装nodejs安装cnpm ，npm构建项目及下载插件会很慢全局安装vue全局安装vue-cli二、vue-cli脚手架工具快速构建项目架构项目文件夹下输入shell命令： vue init webpack my-project 该命令会生成项目名为my-project的项目模板项目文件夹下输入shell命令： cnpm install 该命

2017-08-24 09:42:22 800

原创饿了么项目开始---css3的flex布局，开发移动端界面

本节重点： - flex布局的用法 - 参考学习阮一峰的博客什么是flex布局采用flex布局的元素，叫flex容器，所有子元素自动成为容器成员，叫flex项目.box{display:flex;display:-webkit-flex;}子元素的float、clear、vertical-align 属性失效容器的属性flex-direction:row(默认) | row-

2017-08-22 14:36:01 864

原创饿了么项目---13、模块化编程，实现商品详情页面

本节重点： - 父组件到子组件的数据传递 - 子组件到父组件的数据传递 - js的模块化，按需引入 - 组件的模块化，重复使用 - 数组过滤与过滤器的使用一、goods商品界面点击到food详情界面的实现父组件good.vue界面：与子组件的关联点击商品时，更改传入的商品数据this.selectedfood = food根据子组件的DOM节点this.$refs.thisfoo

2017-08-22 14:34:57 2522

原创饿了么项目---12、父子组件、兄弟组件之间数据通信与事件派发（关于购物车添加按钮的动画）

html代码生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画动画的内容分别是外层和内层,外层控制动画小球的轨道和方向,内层控制动画小球的运行状态动画使用vue的js钩子实现因为小球动画只有一个方向(只执行单方向从上到下滚落),所以只用了before-enter,enter,after-

2017-08-22 14:25:26 464

原创饿了么项目---11、添加商品到购物车的联动功能（1）

本节内容： - 添加商品数量的购物车控件按钮的实现 - 页面底部购物车组件部分的实现 - 通过购物车控件按钮增加商品数量，更改数据后，更新购物车控件的各个状态和各个数据主组件good.vue模块代码购物车控件按钮 <cartcontrol @cartAdd ='_drop' :food ='list'></cartcontrol>购物车组件部分 <cartshop ref='shop

2017-08-18 19:21:56 4168

原创饿了么项目---10、（2）vue2.0给嵌套的元素做多个动画

本节知识点：如何让小方块做抛物线动画 - 单个元素做动画只能实现从右上角到左下角的上下斜线平移 - 类名为wai的外层元素做y轴过渡，先向上平移（负方向）再向下平移（正方向），使用贝塞尔曲线自定义过渡动画 - 类名为lit的内层元素做x轴过渡，向左平移（负方向） - HTML部分<template> <div class="ratings"> <button @click=

2017-08-18 19:20:29 1068

原创饿了么项目---10、（1）css3过渡、变换及3d变换、动画

本博客参考书籍《HTML5权威指南》，为个人原创，转载请注明出处一、过渡过渡属性transition-property ：应用过渡的属性，值为属性，值为all时，所有有变化的属性会有过渡效果 transition-duration:过渡的持续时间 transition-timing-function:过渡期间计算中间值的方式，默认ease ,其他值：ease-in、 ease-out

2017-08-18 19:19:29 473

原创饿了么项目---9、点击按钮显示或隐藏浮出层弹框使用css3的过渡效果transition

问题：点击按钮显示或隐藏浮出层弹框在使用这一功能时，首先想到的是使用css3的transition过渡来实现显示与隐藏的交互功能。因为使用css来做这个效果会实现更加平滑的过渡。然而单纯的css3过渡是由浏览器直接改变元素的css属性实现的，例如使用:hover选择器，一旦用户将按钮悬停在元素上，浏览器就会应用跟选择器关联的属性。（参考HTML5权威指南第477页）解决方式：故可以使用v

2017-08-18 19:16:55 2936

原创饿了么项目---8、关于iscoll的扩展 better scroll的使用----左右菜单联动(2)

本章重点： - 如何使用better scroll的事件派发 - better scroll的滚动监听事件、如何滚动元素、如何实现左右联动的巧妙逻辑一、效果图二、需求分析分块： good.vue组件主要分为左侧菜单区、右侧内容区、底部购物车区单侧联动之当右侧内容区滚动时需要滑动到左侧相应菜单块. 使用better scroll 滚动监听事件，监听当前滚动的y轴坐标scrollY内容区

2017-08-18 19:15:49 944

原创饿了么项目---7、深度响应式原理与Vue.$nextTick()的使用（2）

深入响应式原理Vue 最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。模型层(model)只是普通 JavaScript 对象，修改它则更新视图(view)。这会让状态管理变得非常简单且直观。 vue 如何追踪变化：把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.definePro

2017-08-18 19:13:27 521

原创饿了么项目---6、使用Props传递数据

一、使用Prop的场景与意义组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。子组件要显式地用 props 选项声明它期待获得的数据二、使用方法// 简单语法Vue.component('props-demo-simple', { props: ['size', 'myMessage

2017-08-18 19:08:35 502

原创饿了么项目---5、vue-resource的使用（版本：1.3.4）

一、参考博客版本 0.9.3http://www.cnblogs.com/cnblogs-jcy/p/7055653.html 二、vue-resource的使用API在vue-resource的官网上已经解释的很清楚了，贴上链接链接： https://github.com/pagekit/vue-resource2.1 下载vue-resource插件首先在package配置"depende

2017-08-18 19:05:27 875

原创饿了么项目---4、移动端查看项目及border 1像素问题

一、如何在手机等移动端查看页面1.1查看电脑IP地址$ ipconfig---------->10.2.65.1121.2 、获取当前网页的完整url地址，到草料二维码网站(http://cli.im/)中讲该ip地址转变成一个二维码,手机端扫码打开。手机端打开的网页类似于客户端浏览器打开的网页，开发代码过程会自动反应到手机端上。注意事项：手机与电脑要处在同一局域网中二、border 1px问题由于

2017-08-18 19:04:06 484

原创饿了么项目---3、vue-router 2.0版本的使用

一、当前项目目录二、首先编写模板文件2.1、入口文件HTML中的主组件为App.vue子组件v-header的模板目录为：./components/header/header.vue router-link：这里使用用路由的名字来链接到一个路由，需要在路由配置是添加name属性为导航名。也可以使用原始的路径链接路由： <router-link to="/goods">商品</router-l

2017-08-18 19:00:57 919

原创饿了么项目---8、关于iscoll的扩展 better scroll的使用（1)

本笔记重点: - 如何在项目中引入Vue的扩展‘better scroll’ - 关于better scroll 的API - 饿了么项目中应用点–让内容在中间区域滚动 - 饿了么项目中应用点–通过一侧点击事件滚动另一侧内容一、better scroll的使用首先贴上改扩展插件的github托管地址： https://github.com/ustbhuangyi/better-scroll

2017-08-10 14:13:51 897

原创饿了么项目---7、ref属性注册节点信息，并获取DOM节点（1）

本笔记重点： - 如何通过vue的refs属性获取DOM节点 - 如何在vue的示例中获取到节点元素 - 在created函数中不可使用的问题一、refs的使用1.1 官方介绍被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:<!-- vm.$refs

2017-08-10 14:13:01 787

原创饿了么项目---2、项目搭建及本项目设计模块的参考资料

项目结构目录其中： - build文件夹———配置了webpack的基本配置、开发环境配置、生产环境配置等 - config—————-配置了路径端口值等 - node_modules—–依赖的模块 - src文件夹————放置组件和入口文件 - - assets文件夹——-存放bootstrap等外部插件 - - common文件夹 - - - css————–公共的css文件：

2017-08-10 14:09:14 1579

原创 web前端面试题之html+css+js

HTML/CSS部分 1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 2、行内元素有哪些？块级元素有哪些？

2016-10-27 15:40:55 647

转载前端面试题之---ＨＴＭＬ篇

DOCTYPE作用？标准模式与兼容模式各有什么区别？ 1 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 2 标准模式中，排版和JS运作模式都是以该浏览器支持的最高标准运行；　兼容模式中，页面以宽松的向后兼容的方式呈现，模拟老式浏览器的行为以防止站点无法工作。HTML5为什么只要写？ HTML5不基于SGML，因此不需要对DTD进行

2016-10-25 09:54:35 300

原创原声js 的兼容（屏幕尺寸、事件处理程序、阻止事件冒泡、事件目标等等）

1、事件处理程序 function addEvent(obj, type, fn) { //添加事件兼容 if (obj.addEventListener) { obj.addEventListener(type, fn，false); } else if (obj.attachEvent) { obj.attach

2016-10-20 22:19:15 312

原创封装多个属性的运动框架

1、多个属性封装运动框架： function curStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return window.getComputedStyle(obj

2016-10-20 22:06:06 319

原创原生js实现网易轮播图

前端基本功-网页特效5一、实现效果图二、分析布局主盒子里分上下两个小盒子（1和2）。包含图片的盒子占两张图片的宽（3），处于上盒子中，当前图片在上盒子（1）中，其它图片在盒子（3）的右侧等待播放。下边的盒子（2）包括了六个小方块及定位在主盒子上的两个箭头。三、html部分 <!DOCTYPE html><html lang="en"><head>

2016-10-17 20:12:12 1092

原创原生JS实现轮播图1---匀速动画

JS实现轮播图项目实现结果图：需求：1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片，定时轮播图片；鼠标在图片上时暂停 4 左右两侧可点击轮播图片一、布局部分 html部分<div class="w main clearfix"><div class

2016-10-15 15:57:00 1112

qq_36400099的博客