Vue实战—项目的优化（完结篇）
2019-10-04
阅读 2 分钟
2.6k我们从零开始用vue搭建了外卖项目，对vue也有了更进一步的了解，我们从点菜，评价，商家三个模块逐步实现，我们来回顾一下以往模块： 模块回顾 点菜模块： 评价模块: 商家模块： 模块优化 我们现在需要更进一步完善我们的项目，现在有一个这样的需求： 当我们在点菜栏目下选择了对应产品，然后又浏览其他项目，此时如果...
Vue实战—如何实现商家页面（15）
2019-09-15
阅读 8 分钟
2.3k这篇我们来实现商家页面 搭建文件结构 现在我们需要来搭建项目的html模板： {代码...} 我们通过vue的特殊特性ref引用了DOM元素seller类。以便我们用BScroll。 address-wrapper类用来存放商家地址，与电话图标。 pics-list类用来配置商家的照片。 safety-wrapper类来配置食品安全档案。 delivery-wrapper类配置配送服务。...
Vue实战—如何实现商品评价栏目（14）
2019-09-08
阅读 10 分钟
3k我们先来设置一个ratings容器，还是熟悉的老情况，ratings-wrapper的高度可能会超过ratings，这时候我们肯定会让ratings内出现滚动条的，ref也是老朋友了，配合Bscroll实现ratings-wrapper的滚动。
Vue实战—实现商品详情页的评价列表（13）
2019-09-04
阅读 5 分钟
3.8k上篇我们实现商品的详情页，本篇我们来实现商品详情页的评价列表。 必要的数据 这里咱们举一个数据的例子，明明白白地了解这些数据是如何绑定到模板中的。 数据来自于Foods父组件，当我们选中商品，跳转到商品详情页，那么就需要依赖父组件中的商品数据，在商品详情页面展示评论，当然也可能没有如下“rating”数据。那我...
Vue实战—实现商品详情页（12）
2019-08-31
阅读 8 分钟
11.5k这篇我们来实现商品详情页面： 在首页点击某一商品会展示商品的详细信息。如下图所示： 创建good组件 创建一个组件 good transition 来定义页面展示的形式； 使用v-show与变量showFlag来控制显示与隐藏，ref配合BScroll控制页面的滑动； 现在结构内出现的数据的引用我们在script内进行处理。 <template> <trans...
Vue实战—购物车详情页面的实现（11）
2019-08-17
阅读 11 分钟
6.3k上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在页面中的样子： 如上所示，此页面包含了购物列表，而它由商品名称，单价，增减商品功能构成，增减商品功能我们在商品列表中实现过，那么我们现在可以进行复用。 搭出购物车结构 我们将购物车底部构建出...
Vue实战—商品分类菜单数量提示（10）
2019-07-25
阅读 8 分钟
4.3k如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。 好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。 {代码...} 注意methods方法中的calculateCount函数实现计算个数，数量来自于增减组件内Cartcontrol。 {代码...} 以上是spus数据 Cartcontrol组件控制商品...
Vue实战—商品控件与购物车联动（9）
2019-07-20
阅读 15 分钟
3k本篇我们将构建商品控件与购物车联动。 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构，以及数据，事件的绑定，与判断逻辑的书写。 {代码...} Shopcart组件是Goods组件的子组件，在Shopcart组件初始化的时候我们可以传入给其参数poiInfo selectFoods. 请求数据，声明方法与计算属性 {代...
Vue实战-菜单栏，商品展示数据交互（8）
2019-07-13
阅读 3 分钟
3.9k上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。 菜单栏接入数据 导入组件，定义需要的数据格式 {代码...} 通过created钩子发起请求获取数据 之前我们说过在created钩子，mounted钩子内可以发起请求，请求需要的数据。本次我们在created钩子内发起get请求，获取数据 {代码...} 注意$nextTick()用法...
Vue实战-商品展示切图（7）
2019-06-22
阅读 7 分钟
4.8k上次我们通过设计评价组件这个过程，了解到了组件设计中的良好的习惯，比如，文件夹如何支撑组件，图片，组件路径的存放于设置。 本篇我们将继续推进外卖项目—商品页的展示。 如图所示，我们可以把商品也面分为两大部分： 左侧“菜单栏”； 右侧商品展示； goods为当前商品页面的根元素。 {代码...} 细化左侧菜单栏 我们先...
Vue实战—评价组件的设计与实现（6）
2019-06-19
阅读 10 分钟
6k在上篇文章我们将项目头部模块进行了编写与数据渲染。 本篇文章我们进一步深入项目设计评价组件。 分析页面 如图所示，点菜，评价，商家，为导航，我们点击评价的时候，直接跳转评价页面。 评价页面由商家评分一栏，评论列表构成，评论列表支持：全部，有图，点评三种筛选。 综上我们现在开始设计评论组件： 建立组件文...
Vue实战-头部模块编写（5）
2019-06-18
阅读 3 分钟
2.8k通过上篇我们了解到了vue可以通过axios发送前端请求。 我们知道的在发送请求可以在creted（）钩子内，也可以在mounted（）钩子内。 本篇我们通过头部模块的编写，将请求到的数据渲染到模块内。 当然我们先要准备静态页面： 01.分析制作静态页面 如图所示，我们可以将整个一个头部模块分为4个部分： · 顶部通栏：返回，搜...
Vue实战—项目数据交互-axios（4）
2019-06-17
阅读 1 分钟
3.6k1.axios地址 [链接] 2.安装 {代码...} 3.使用 1.用在哪？ {代码...} 2.什么时候用？ {代码...} 3.怎么用 数据从哪里来： 1.美团API接口 ， {代码...} 2.自己搭建线上服务器数据 {代码...} 3.搭建本地模拟数据 {代码...} 结论：为了工作使用1，为了灵活性使用3，自己有现成的服务器或空间，从2、3中选的话，选择2 我们使...
Vue实战—路由轻松设置vue-router（3）
2019-06-15
阅读 2 分钟
8.2k上篇我们说了vue项目的目录设计，本篇我们来学习一下vue路由。 路由的作用： 在web端路由（route）就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个route到URL中。 文档地址： {代码...} 安装： 通过node.js安装；npm install vue-router 但是一般情况下在node中安装vue项目的时候根据提示选择安装vue-r...
ES6-class、模块化在vue中应用(10)
2019-05-13
阅读 4 分钟
7.7k我们在之前文章《ES6 class与面向对象编程》中，说到了目前大部分框架和库，都采用了面向对象方式编程。那么具体是怎么样应用的呢？面向对象编程，最典型和最基础的作用就是封装，封装的好处就是代码的能够复用，模块化，进行项目和文件的组织。
从0开始使用webpack搭建react工作流
2019-01-25
阅读 5 分钟
3.3k很多人想搭建一套属于自己的前端工作流，最开始的时候我们的工作流萌芽是从写一个项目的时候，拷贝以前写过的一个项目文件夹改完直接使用开始的，后来使用了grunt和gulp，再到webpack,每一个前端人员想掌握如何书写一个符合自己项目的工作流，以便复用，达到高效工作的目的。
没想到你是这样的javascript
2017-05-31
阅读 4 分钟
2.8k前几天有同学问我，老师我们公司的产品是一个web app公司用的是jquery,我感觉学不到东西，是不是手机端用 jquery不太好啊？当时我的心情是这样的： 然后我跟说手机端用jquery不太合适，比较臃肿，然后开发也不太适合手机端，你可以试试React。 学生：是这样的老师我要用一个app然后能够单页面切换，从后台拉取数据，然后...