vue2.0 饿了么
qq_22317389
这个作者很懒,什么都没留下…
展开
-
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 · 1689 阅读 · 3 评论 -
vue饿了么学习笔记(4)icon字体加载问题,提示 These relative modules were not found: ./font/sell-icon.eot...
找不到模块的路径,后在package.json加载了file-loader之后发现还是不行,原来是项目内的路径没有改,自动生成文件时,icon.styl中路径默认为 src: url('fonts/sell-icon.eot?2f8f02'); src: url('fonts/sell-icon.eot?2f8f02#iefix') format('embedded-opentype'),...原创 2018-03-18 16:05:57 · 6967 阅读 · 0 评论 -
vue饿了么学习笔记(3)关于response.json() 的更新问题
加载api数据时,图片文字无法显示:created() { //请求的ajex地址,成功的回调,拿到一个response this.$http.get('/api/seller').then((response) => { //response是一个属性,将其转化为json对象 response = response.json(); //consol...原创 2018-03-18 10:45:37 · 1271 阅读 · 1 评论 -
vue饿了么学习笔记(2)css-loader 和No PostCss Config found in ...报错问题
之前已经安装过css-loader,但仍是报错,是空格和对齐的问题,对齐之后有出现No PostCss Config found in ... 报错,解决办法,在根目录下创建postcss.config.js文件即可,内容如下module.exports = { plugins: [ require('autoprefixer')({ browser...原创 2018-03-18 10:25:22 · 1495 阅读 · 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 = require('express')// 创建node.js的express开发框架的实例const app ...原创 2018-05-31 16:59:10 · 418 阅读 · 0 评论 -
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 · 1684 阅读 · 0 评论 -
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 · 1201 阅读 · 0 评论 -
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 · 3827 阅读 · 0 评论 -
vue2饿了么--header组件数据的获取
header组件中有商家的ming名称数据和评分等数据,这些数据可以通过异步请求后端的数据获得,header组件通过接受接着数据并渲染,我们可以在header的父组件App.vue中通过发送ajax请求,获取商家的相关数据,在通过props属性,实现父组件向自组件数据的传递首先安装vue-resource;作为第三方插件,作为模块时引用要先去注册,所以在main.js中/* 第三方插件用...原创 2018-07-18 15:01:50 · 1309 阅读 · 0 评论 -
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 · 1068 阅读 · 0 评论 -
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 · 923 阅读 · 0 评论 -
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 · 3275 阅读 · 0 评论 -
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 · 3642 阅读 · 4 评论 -
VUE2.0 饿了么学习笔记(7)创建shopcart购物车组件的过程
创建购物车组件,引入并注册到goods组件中,在模板中添加shopCart购物车的初等样式。先写结构:分左右两侧,左侧自适应,右侧部分为20元起送状态,固定宽度,使用flex布局因为后来给shopcart添加了一个同级罩层mask,这样一个template下边就有两个div了,所以在这两个div的外边添加一个父层div<template><!-- shopc...原创 2018-05-21 13:51:51 · 1550 阅读 · 0 评论 -
vue2.0饿了么学习笔记(15)ratingselect组件的实现
之前我们已经完成了图片,产品价格和购物车部分,split组件,之后就是评论选择让ratingselect的实现,先完成部分Dom结构ratingselect组件的实现1)创建ratingselect文件和ratingselect.vue2)设置ratingselect组件中需要的props接收的数据,数据应从food.vue组件传入<ratingselect><...原创 2018-05-26 10:00:08 · 1766 阅读 · 0 评论 -
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 · 1588 阅读 · 0 评论 -
vue2.0 饿了么学习笔记(17)seller组件开发
BScroll回顾: 外层有一个容器,定义了视口的高度,内层div可以被内容自动撑高,当内层容器高度超过视口高度时,就会出现滚动1)接收传递进来的seller数据,并编写界面和样式 props: { //APP.vue的routerview中已经将seller传进来了,这里只需要接收就好 seller: { type: Object } }...原创 2018-05-26 14:32:29 · 1720 阅读 · 2 评论 -
vue2.0 饿了么学习笔记(18)优化问题
切换界面时会闪现,是因为界面被重新渲染了,声明周期被重新执行了一遍,我们希望切换组件的时候,组件之前的状态也能被保留,vue中提供 router切换组件保留的功能,keeplive,在APP.vue中添加 <keep-alive> <router-view :seller="seller"></router-view> </keep-al...原创 2018-05-26 14:39:36 · 420 阅读 · 0 评论 -
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 · 2070 阅读 · 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 · 4189 阅读 · 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 · 4177 阅读 · 0 评论 -
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 · 2237 阅读 · 3 评论 -
VUE2.0 饿了么学习笔记(9)购物车添加商品,是否起送状态的实现
1)首先是selectFoods数组汇总存储选中的商品,这里是假设的值,还没有实现,主要包括商品的单价和数量 props: { selectFoods: { //保存一个被选择商品的数组,包括被选择商品的单价和数量 type: Array, default() { ret...原创 2018-05-21 13:57:44 · 948 阅读 · 0 评论 -
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 · 1363 阅读 · 0 评论 -
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 · 740 阅读 · 1 评论