- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue 移动端音乐(2) 获取推荐数据并在相应的组件中接收
推荐界面（轮播图+歌单列表）+歌单详情页，重点是数据的获取，在线抓取获取数据Jsonp2，解决跨域问题，在任何站点都可以通过Jsonp去请求这个接口来获取数据原理：不是ajax请求，是动态创建script标签进行跨域的，将script的src指向我们请求的服务端地址，npm安装jsonp,axios，编写jsonp.js引入jsonp，并对原来的jsonp做一个简单的封装1. src-...
2018-05-31 17:02:15
861
原创 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
410
原创 vue2.0 饿了么学习笔记（18）优化问题
切换界面时会闪现，是因为界面被重新渲染了，声明周期被重新执行了一遍，我们希望切换组件的时候，组件之前的状态也能被保留，vue中提供 router切换组件保留的功能，keeplive，在APP.vue中添加 <keep-alive> <router-view :seller="seller"></router-view> </keep-al...
2018-05-26 14:39:36
404
原创 vue2.0 饿了么学习笔记（17）seller组件开发
BScroll回顾： 外层有一个容器，定义了视口的高度，内层div可以被内容自动撑高，当内层容器高度超过视口高度时，就会出现滚动1）接收传递进来的seller数据，并编写界面和样式 props: { //APP.vue的routerview中已经将seller传进来了，这里只需要接收就好 seller: { type: Object } }...
2018-05-26 14:32:29
1697
2
原创 vue2.0 饿了么学习笔记（16）rating组件的开发
首先编写ratings，要用到betterScroll<template> <div class="ratings" ref="ratings"> <!-- ratings-content大于ratings的时候出现滚动 --> <div class="ratings-content">并添加样式：和g
2018-05-26 10:01:31
1539
原创 vue2.0饿了么学习笔记（15）ratingselect组件的实现
之前我们已经完成了图片，产品价格和购物车部分，split组件，之后就是评论选择让ratingselect的实现，先完成部分Dom结构ratingselect组件的实现1）创建ratingselect文件和ratingselect.vue2）设置ratingselect组件中需要的props接收的数据，数据应从food.vue组件传入<ratingselect><...
2018-05-26 10:00:08
1732
原创 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
1665
3
原创 vue2.0 饿了么学习笔记（13）商品的详情页-----子组件改变父组件的值
开发food.vue组件实现商品的详情页展示,首先写布局，组件正常情况下是隐藏的，要添加一个v-show的条件，food组件要维护的是goods组件中循环的每一个food的详情页，所以我们用props接收父组件goods传过来的food数据<transition name="fade"> <!-- 为food界面的展开添加动画--> <div v-sh...
2018-05-22 14:39:35
2022
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
4141
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
4117
原创 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
2161
3
原创 VUE2.0 饿了么学习笔记（9）购物车添加商品，是否起送状态的实现
1）首先是selectFoods数组汇总存储选中的商品，这里是假设的值，还没有实现，主要包括商品的单价和数量 props: { selectFoods: { //保存一个被选择商品的数组,包括被选择商品的单价和数量 type: Array, default() { ret...
2018-05-21 13:57:44
938
原创 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
1345
原创 VUE2.0 饿了么学习笔记（7）创建shopcart购物车组件的过程
创建购物车组件，引入并注册到goods组件中，在模板中添加shopCart购物车的初等样式。先写结构：分左右两侧，左侧自适应，右侧部分为20元起送状态，固定宽度，使用flex布局因为后来给shopcart添加了一个同级罩层mask，这样一个template下边就有两个div了，所以在这两个div的外边添加一个父层div<template><!-- shopc...
2018-05-21 13:51:51
1521
原创 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
3573
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
3234
原创 localStorge操作
主要是利用localStorge存贮的时间来判断有哪些文章是未读的，并在右上角显示未读的文章数量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
2018-05-17 15:22:34
346
原创 下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-17 13:36:20
101
原创 Tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-17 13:34:33
175
原创 折叠区域
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-17 13:33:22
298
原创 弹出图层
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-17 13:32:09
308
原创 HTML+CSS+JQuery实现轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-17 13:28:14
694
原创 HTML+css+JS实现日历组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-17 13:23:04
20337
2
原创 响应式菜单--@media screen的应用
在不同分辨率的窗口下，菜单显示不同的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
2018-05-17 13:20:11
338
原创 回到顶部，top图标的制作
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">*{ margin:0; padding:0; font-
2018-05-15 20:58:34
636
原创 Geolocation操作
利用百度API<!doctype html><html><head><meta charset="UTF-8"><title>Test</title><meta name="viewport" content="width=device-width, initial-s
2018-05-15 19:49:41
157
原创 本地数据加载 Ajax
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-15 19:35:37
302
原创 本地文件操作--拖拽图片
<canvas id="canvas"></canvas><div id="holder" class="normal">Drop your bitmap here</div><script type="text/javascript">var holder = document.ge
2018-05-15 19:32:42
324
原创 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension
添加 --allow-file-access-from-files，注意前面的空格，之后重启浏览器即可，也可以在cmd中键入
2018-05-15 16:44:44
125
原创 摇一摇
<!doctype html><html><head><meta charset="UTF-8"><title>Test</title><meta name="viewport" content="width=device-width, initial-scale=1.
2018-05-15 15:55:23
89
原创 触摸操作，刮奖
<!doctype html><html><head><meta charset="UTF-8"><title>Test</title><meta name="viewport" content="width=device-width, initial-scale=1.
2018-05-15 15:35:57
218
原创 Canvas动画设计
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">html, body { height:100%; marg
2018-05-15 15:21:16
211
原创 滑块拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-15 14:44:44
770
原创 滚动触发动画
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">body { background:url(bg.jpg) n
2018-05-15 13:31:26
493
原创 滚动监听
<!doctype html><html><head><meta charset="UTF-8"><title>HTML5 Example</title><style type="text/css">body { background:url(bg.jpg) n
2018-05-14 21:50:03
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人