自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 vue移动端音乐----播放器组件的开发2

播放模式对应到vuex中state是一个mode字段 export const playMode = { sequence: 0, loop: 1, random: 2 } import {playMode} from 'common/js/config' ...

2018-07-29 20:24:00

阅读数 490

评论数 1

原创 vue移动端音乐----播放器组件的开发

多个组件都可以打开播放器,所以我们要控制这个播放器的数据,一定是全局的,所以我们把数据通过vuex来管理  1.  Vuex数据设计,很多歌单都可以打开播放器,打开歌单缩小时,会出页面最下方出现小型的播放器,所以播放器的数据一定是全局的,所以把这个数据通过vuex来管理 在state.js中添加...

2018-07-29 20:23:40

阅读数 926

评论数 0

原创 vue 移动端音乐(4) 歌手界面的开发

  1.获取歌手数据 api->singer.js import jsonp from 'common/js/jsonp' import {commonParams, options} from './config.js' expor...

2018-07-29 20:22:55

阅读数 539

评论数 0

原创 vue 移动端音乐(3) >热门歌单推荐部分(webpack-dev-conf.js做后端接口代理+scroll插件)

1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改request header,我们采取后端接口代理的方法去解决。使用express,不是直接请求服务器的ur...

2018-07-27 15:28:58

阅读数 370

评论数 0

原创 vue 移动端音乐(5) 歌手详情页的开发---vuex的使用(url地址),

歌手详情界面的开发: singer-detail组建的开发:创建并编写简单的页面 在index.js中重新配置路由,点击歌手就可以转到详情列表了 {       path: '/singer',       component: Singer,       childr...

2018-07-27 15:26:26

阅读数 849

评论数 0

原创 vue2饿了么--goods组件开发--布局部分

goods组件分为左侧的menu和右侧的商品列表 <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"&...

2018-07-19 14:41:17

阅读数 412

评论数 1

原创 vue2饿了么--商家弹出图层的实现

<div v-show="detailShow" class="detail"> </div> .detail position: fixed top: 0 l...

2018-07-18 21:28:04

阅读数 425

评论数 0

原创 vue2.0饿了么--header数据获取后进行header组件的编写

首先我们通过props属性接受到父组件App.vue传过来的数据 export default { //:seller = "seller" props接收传过来的seller对象 props: { seller: { type: Object ...

2018-07-18 16:26:58

阅读数 492

评论数 0

原创 vue2饿了么--header组件数据的获取

header组件中有商家的ming名称数据和评分等数据,这些数据可以通过异步请求后端的数据获得,header组件通过接受接着数据并渲染,我们可以在header的父组件App.vue中通过发送ajax请求,获取商家的相关数据,在通过props属性,实现父组件向自组件数据的传递 首先安装vue-re...

2018-07-18 15:01:50

阅读数 394

评论数 0

原创 vue饿了么--- 一像素边框--border-bottom的实现(伪类加缩放)

DPR手机端物理像素是设备像素的两倍,在stylus下定义一个mixin.styl; 在styl中定义一个函数,并且可以传入一个color border-1px($color) position : relative &:after display: bloc...

2018-07-18 14:30:32

阅读数 1403

评论数 0

原创 vue饿了么-拆分组件+配置路由

在index.html中加载reset.css样式 <link rel="stylesheet" href="static/css/reset.css" type="text/css"> 移动端视口不能...

2018-07-17 22:39:20

阅读数 723

评论数 0

原创 vue饿了么--获取api数据

//node.js开发框架express,用来简化操作,用express来启动一个webserver const express = require('express') //创建node.js的express开发框架的实例 const app = express() //引...

2018-07-17 20:44:09

阅读数 992

评论数 0

原创 vue 移动端音乐(1) 页面骨架开发

项目的目录结构: api存放于后端请求相关的代码,包括ajax,jsonp请求; common中存放通用性的资源,包括通用的字体文件和图片; js  stylus router是与路由相关的文件 store是存放vuex相关的文件 main.js为入口文件,渲染App的一个vue文件 ...

2018-07-09 21:03:55

阅读数 237

评论数 0

原创 vue 移动端音乐(2) 获取推荐数据并在相应的组件中接收

推荐界面(轮播图+歌单列表)+歌单详情页,重点是数据的获取,在线抓取 获取数据Jsonp2,解决跨域问题,在任何站点都可以通过Jsonp去请求这个接口来获取数据 原理:不是ajax请求,是动态创建script标签进行跨域的,将script的src指向我们请求的服务端地址,npm安装jsonp,...

2018-05-31 17:02:15

阅读数 597

评论数 0

原创 vue饿了么学习笔记(1)关于dev-server.js消失的问题

关于dev-server.js消失的问题,改用webpack.dev.conf.js代替,所以访问本地数据在webpack.dev.conf.js中配置即可#webpack.dev.conf.js // nodejs开发框架express,用来简化操作 const express = requir...

2018-05-31 16:59:10

阅读数 216

评论数 0

原创 vue2.0 饿了么学习笔记(18)优化问题

切换界面时会闪现,是因为界面被重新渲染了,声明周期被重新执行了一遍,我们希望切换组件的时候,组件之前的状态也能被保留,vue中提供  router切换组件保留的功能,keeplive,在APP.vue中添加 <keep-alive>      <route...

2018-05-26 14:39:36

阅读数 246

评论数 0

原创 vue2.0 饿了么学习笔记(17)seller组件开发

BScroll回顾: 外层有一个容器,定义了视口的高度,内层div可以被内容自动撑高,当内层容器高度超过视口高度时,就会出现滚动 1)接收传递进来的seller数据,并编写界面和样式 props: { //APP.vue的routerview中已经将seller传进来了,这...

2018-05-26 14:32:29

阅读数 1060

评论数 2

原创 vue2.0 饿了么学习笔记(16)rating组件的开发

  首先编写ratings,要用到betterScroll <template> <div class="ratings" ref="ratings"> <!-- ratin...

2018-05-26 10:01:31

阅读数 941

评论数 0

原创 vue2.0饿了么学习笔记(15)ratingselect组件的实现

之前我们已经完成了图片,产品价格和购物车部分,split组件,之后就是评论选择让ratingselect的实现,先完成部分Dom结构 ratingselect组件的实现 1)创建ratingselect文件和ratingselect.vue 2)设置ratingselect组件中需要的...

2018-05-26 10:00:08

阅读数 1145

评论数 0

原创 vue2.0 饿了么学习笔记(14)food.vue的实现

1)新建good文件夹和good.vue,设置样式,并接受一个被选中的food props: { //接收传入的food food: { type: Object } }2)获取food数据,goods.vue中food是由goods...

2018-05-26 09:54:18

阅读数 1099

评论数 3

原创 vue2.0 饿了么学习笔记(13)商品的详情页-----子组件改变父组件的值

开发food.vue组件实现商品的详情页展示,首先写布局,组件正常情况下是隐藏的,要添加一个v-show的条件,food组件要维护的是goods组件中循环的每一个food的详情页,所以我们用props接收父组件goods传过来的food数据 <transition name=&q...

2018-05-22 14:39:35

阅读数 1410

评论数 0

原创 VUE2.0 饿了么学习笔记(12)购物车详情页的实现

在shopcart中添加<shopcart-list></shopcart-list>实现样式  <transition name="fade"> ...

2018-05-21 14:16:16

阅读数 2671

评论数 4

原创 VUE2.0 饿了么学习笔记(11)滚动小球的实现+购物车详情页的实现

滚动小球的实现,只需要考虑enter效果即可,用emit和on派发和监听事件,cartcontrol.vue派发事件{this.$emit('cart-add', event.target)};,goods.vue监听事件cart-add,并添加监听函数cartAdd&...

2018-05-21 14:08:14

阅读数 2915

评论数 0

原创 VUE2.0 饿了么学习笔记(10)加减号组件cartcontrol

创建cartcontrol组件,组件关联到food的相关属性,价格,数量等,所以组件要props父组件goods传过来的food数据 export default { //父组件传过来的,接收一个props属性来计算商品的个数,food.count,去goods组件中引入cartcon...

2018-05-21 14:03:19

阅读数 1150

评论数 2

原创 VUE2.0 饿了么学习笔记(9)购物车添加商品,是否起送状态的实现

1)首先是selectFoods数组汇总存储选中的商品,这里是假设的值,还没有实现,主要包括商品的单价和数量 props: { selectFoods: { //保存一个被选择商品的数组,包括被选择商品的单价和数量 type: Array, ...

2018-05-21 13:57:44

阅读数 442

评论数 0

原创 VUE2.0 饿了么学习笔记(8)VUE "TypeError: Cannot read property 'deliveryPrice' of undefined"报错

 <shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>中.VUE "...

2018-05-21 13:53:52

阅读数 761

评论数 0

原创 VUE2.0 饿了么学习笔记(7)创建shopcart购物车组件的过程

  创建购物车组件,引入并注册到goods组件中,在模板中添加shopCart购物车的初等样式。 先写结构:分左右两侧,左侧自适应,右侧部分为20元起送状态,固定宽度,使用flex布局 因为后来给shopcart添加了一个同级罩层mask,这样一个template下边就有两个div了,所以在...

2018-05-21 13:51:51

阅读数 470

评论数 0

原创 VUE饿了么学习笔记(6)goods界面滚动和点击联动的实现

使用插件Bscroll,在依赖文件package.json中添加版本,在install,run之后使用 1)import BScroll from 2)BScroll实例化的时候要接收一个DOM,此处将实例化并获取DOM的过程封装成方法,获取DOM <div class=&qu...

2018-05-21 13:50:56

阅读数 2389

评论数 3

原创 vue饿了么学习笔记(5)Failed to resolve directive: el和Error in nextTick问题

vue2没有v-el,使用ref替换,将<div class="menu-wrapper" v-el:menu-wrapper>替换成 <div class="menu-wrapper" ref="menu...

2018-05-17 20:04:42

阅读数 2209

评论数 0

原创 localStorge操作

主要是利用localStorge存贮的时间来判断有哪些文章是未读的,并在右上角显示未读的文章数量<!DOCTYPE html> <html lang="en"> <head> &...

2018-05-17 15:22:34

阅读数 168

评论数 0

原创 下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &a...

2018-05-17 13:36:20

阅读数 38

评论数 0

原创 Tab切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &a...

2018-05-17 13:34:33

阅读数 46

评论数 0

原创 折叠区域

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &a...

2018-05-17 13:33:22

阅读数 68

评论数 0

原创 弹出图层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &a...

2018-05-17 13:32:09

阅读数 89

评论数 0

原创 HTML+CSS+JQuery实现轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &a...

2018-05-17 13:28:14

阅读数 404

评论数 0

原创 HTML+css+JS实现日历组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &a...

2018-05-17 13:23:04

阅读数 9049

评论数 0

原创 响应式菜单--@media screen的应用

在不同分辨率的窗口下,菜单显示不同的样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&...

2018-05-17 13:20:11

阅读数 57

评论数 0

原创 回到顶部,top图标的制作

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Exa...

2018-05-15 20:58:34

阅读数 171

评论数 0

原创 Geolocation操作

利用百度API<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Te...

2018-05-15 19:49:41

阅读数 54

评论数 0

原创 本地数据加载 Ajax

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

2018-05-15 19:35:37

阅读数 160

评论数 0

提示
确定要删除当前文章?
取消 删除