qq_22317389-CSDN博客

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

播放模式对应到vuex中state是一个mode字段export const playMode = { sequence: 0, loop: 1, random: 2}import {playMode} from 'common/js/config' mode: playMode.sequence, // 默认为顺序播放getter中有一个state的映射...

2018-07-29 20:24:00 925 1

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

多个组件都可以打开播放器，所以我们要控制这个播放器的数据，一定是全局的，所以我们把数据通过vuex来管理 1. Vuex数据设计，很多歌单都可以打开播放器，打开歌单缩小时，会出页面最下方出现小型的播放器，所以播放器的数据一定是全局的，所以把这个数据通过vuex来管理在state.js中添加播放器的状态，并在common->config.js中添加播放器的播放模式（顺序，随机，循环）...

2018-07-29 20:23:40 2259 1

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

1.获取歌手数据api->singer.jsimport jsonp from 'common/js/jsonp'import {commonParams, options} from './config.js'export function getSingerList() { const url = 'https://c.y.qq.com/v8/fcg-bin...

2018-07-29 20:22:55 1054

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

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

2018-07-27 15:28:58 703

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

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

2018-07-27 15:26:26 1541

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

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

2018-07-19 14:41:17 752 1

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

<div v-show="detailShow" class="detail"></div>.detail position: fixed top: 0 left: 0 z-index: 100 width: 100% height: 100% overflow: aotu ...

2018-07-18 21:28:04 944

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

首先我们通过props属性接受到父组件App.vue传过来的数据export default {//:seller = "seller" props接收传过来的seller对象 props: { seller: { type: Object } }}之后，编写dom结构<img width="64" height="64" :src=...

2018-07-18 16:26:58 1084

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

header组件中有商家的ming名称数据和评分等数据，这些数据可以通过异步请求后端的数据获得，header组件通过接受接着数据并渲染，我们可以在header的父组件App.vue中通过发送ajax请求，获取商家的相关数据，在通过props属性，实现父组件向自组件数据的传递首先安装vue-resource；作为第三方插件，作为模块时引用要先去注册，所以在main.js中/* 第三方插件用...

2018-07-18 15:01:50 1335

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

DPR手机端物理像素是设备像素的两倍，在stylus下定义一个mixin.styl；在styl中定义一个函数，并且可以传入一个colorborder-1px($color) position : relative &:after display: block position: absolute left: 0 bottom: 0 ...

2018-07-18 14:30:32 3845

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

在index.html中加载reset.css样式 <link rel="stylesheet" href="static/css/reset.css" type="text/css">移动端视口不能被缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0, max

2018-07-17 22:39:20 1215

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

//node.js开发框架express，用来简化操作,用express来启动一个webserverconst express = require('express')//创建node.js的express开发框架的实例const app = express()//引用json的地址var appData = require('../data.json')//json的所有的key...

2018-07-17 20:44:09 1702

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

项目的目录结构：api存放于后端请求相关的代码，包括ajax，jsonp请求；common中存放通用性的资源，包括通用的字体文件和图片；js stylusrouter是与路由相关的文件store是存放vuex相关的文件main.js为入口文件，渲染App的一个vue文件app.vue中是一个简单的界面，我们在这里import所有的样式文件,index.styl是引入所...

2018-07-09 21:03:55 436

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

推荐界面（轮播图+歌单列表）+歌单详情页，重点是数据的获取，在线抓取获取数据Jsonp2，解决跨域问题，在任何站点都可以通过Jsonp去请求这个接口来获取数据原理：不是ajax请求，是动态创建script标签进行跨域的，将script的src指向我们请求的服务端地址，npm安装jsonp,axios，编写jsonp.js引入jsonp，并对原来的jsonp做一个简单的封装1. src-...

2018-05-31 17:02:15 903

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

关于dev-server.js消失的问题，改用webpack.dev.conf.js代替，所以访问本地数据在webpack.dev.conf.js中配置即可#webpack.dev.conf.js// nodejs开发框架express，用来简化操作const express = require('express')// 创建node.js的express开发框架的实例const app ...

2018-05-31 16:59:10 428

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

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

2018-05-26 14:39:36 430

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

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

2018-05-26 14:32:29 1737 2

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

首先编写ratings，要用到betterScroll<template> <div class="ratings" ref="ratings">  <div class="ratings-content">并添加样式：和g

2018-05-26 10:01:31 1607

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

之前我们已经完成了图片，产品价格和购物车部分，split组件，之后就是评论选择让ratingselect的实现，先完成部分Dom结构ratingselect组件的实现1）创建ratingselect文件和ratingselect.vue2）设置ratingselect组件中需要的props接收的数据，数据应从food.vue组件传入<ratingselect><...

2018-05-26 10:00:08 1776

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

1）新建good文件夹和good.vue，设置样式，并接受一个被选中的food props: { //接收传入的food food: { type: Object } }2）获取food数据，goods.vue中food是由goods组件传出的，现在goods组件中引入food，并从data中将被选中的food传入food.vue中&...

2018-05-26 09:54:18 1701 3

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

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

2018-05-22 14:39:35 2084 1

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

在shopcart中添加<shopcart-list></shopcart-list>实现样式 <transition name="fade"> <div class="shopcart-list" v-show="listShow">

2018-05-21 14:16:16 4201 4

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

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

2018-05-21 14:08:14 4189

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

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

2018-05-21 14:03:19 2260 3

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

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

2018-05-21 13:57:44 956

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

<shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>中.VUE "TypeError: Cannot read property 'deliveryPrice' of undefined"报错在app.vue中把seller传进来<route...

2018-05-21 13:53:52 1376

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

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

2018-05-21 13:51:51 1563

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

使用插件Bscroll，在依赖文件package.json中添加版本，在install，run之后使用1）import BScroll from2)BScroll实例化的时候要接收一个DOM，此处将实例化并获取DOM的过程封装成方法,获取DOM<div class="menu-wrapper" ref="menuWrapper"><div class="foods-...

2018-05-21 13:50:56 3659 4

原创 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="menuWrapper">js中获取DOM元素是将this.menuScroll = new BScroll(this.$els.menuWrapper, {});换成this....

2018-05-17 20:04:42 3283

原创 localStorge操作

主要是利用localStorge存贮的时间来判断有哪些文章是未读的，并在右上角显示未读的文章数量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

2018-05-17 15:22:34 378