最近在GitHub上发现一个基于vue2.0的饿了么项目。本着互联网的分享精神,现在将我自己所理解的,所总结的经验分享给大家。本篇文字我将从学习的角度向大家分享。

在学习本项目之前我已经将vue2.0的 官网官方案例 和vue-router的官方案例和api看了一遍。

点击下载项目资料

注意:网页打开的速度有些缓慢还有可能访问失败但是绝对可以打开的,有条件的朋友可以使用FQ软件打开网址。

运行项目

注:我已在我的电脑上装了node环境、vue-cli、webpack的全局变量

1、讲下载的文件存放在一个自己方便查找的地方,我存在D:\Study\vue-sell-master。 一般我们管这个地址叫做工程文件地址。

2、打开命令行工具(win键+R 输入cmd回车)依次输入 d: 回车、cd: D:\Study\vue-sell-master 回车,此时命令行就定位到了我们的工程文件目录,输入npm install 回车,即可安装项目中所以的依赖(此处需要一段时间,如果有淘宝镜像会快很多,想了解淘宝镜像的请自行百度)。

3、输入 npm run dev  回车。然后在浏览器打开,localhost:8088  即可访问项目地址。此时咱们就可以看到饿了么的项目啦。

分析项目 - 知识点讲解

1、路由配置

  打开项目的第一眼就看见了项目上分的tab栏,而我的第一感觉就是使用了vue-router的路由系统,打开源码一看果然是使用了路由系统。在项目的main.js 中的一个 routes变量中就是与路由的相关配置。

不懂路由配置的的同学可以访问http://jsfiddle.net/yyx990803/L7hscd8h/ 进行查看。

2、动画效果  

  然后在页面中的增加和减少商品数量吸引力我,在点击+按钮时如果商品数量是0的话,那么-号就会出现,而且还是动画形式的出现。这勾起了我的好奇心,打开源码查看,果然是使用了。

  因为路由地址默认访问的是goods页面。我们打开goods,发现加减号的位置使用的是一个叫cartcontrol组件。在52行找到组件对应的文件文件名叫cartcontrol。我们打开cartcontrol文件。发现动画位置使用了一个transition的组件,transition组件的作用就是做动画不懂的同学可以访问 https://cn.vuejs.org/v2/guide/transitions.html 进行学习。

  在官方案例中,动态效果分为四个阶段v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除、v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除、v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在transition/animation 完成之后移除。

  我们看案例中cartcontrol中第60行-66号是定义动画效果的css。很明显第60行作者将v-enter-active,和move-leave-active。定义为了0.4s linear。意思就是显示和隐藏都是0.4s,以linear形式运动。并且在第62行定义了,动画进入过度开始时和离开后后的效果。在第48行定义了元素本身的样式。因为vue的动画实现是在每个阶段通过给元素增加class名字来实现的。vue快速的给元素增加了带有opacity:0的class,在快速删除这个class过度效果是已0.4s形式过度。所以大家就看见了-的按钮以渐显和渐隐的形是展示。

本篇文字未完,持续更新。

vue2.0 饿了么项目学习总结的更多相关文章

  1. VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  2. VUE2.0 饿了吗视频学习笔记(六):定位问题、文字显示、模糊背景图片、点击事件

    一.定位问题按照视频写代码时,发现元素“5个“”定位不对,如下图 正常位置为 还以为是哪里写错了,仔细研究了下,需要在父div上加relative. position:relative/absolut ...

  3. VUE2.0 饿了吗视频学习笔记(五):父子对象传递、显示图片

    一.父子组件之间对象传递 1.app.Vue中的v-header 中加入 v-bind:seller="seller" template> <div id=" ...

  4. VUE2.0 饿了吗视频学习笔记(四):颜色、跳转、设置、vue-resource

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 1.设置选中项颜色 <template> <div id=" ...

  5. VUE2.0 饿了吗视频学习笔记(二):新版本添加路由和显示Header

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 webpack.dev.conf.js中添加两段代码 'use strict' cons ...

  6. VUE2.0 饿了吗视频学习笔记(一):VUE示例data.json

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...

  7. VUE2.0 饿了吗视频学习笔记(三):VUE2.0取消了v-link

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 写法如下 <div class="tab-item"> ...

  8. vue2.0版cnode社区项目搭建及实战开发

    _________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...

  9. vue2.0 使用webpack搭建项目遇到的最搞笑的坑

    报错如下: 源码: 然后找了半天没搞明白... 无意中翻看了一下ES6语法规则.. 然后我发现:源代码最后一行要空一行,我心想这什么狗屁规定?MMP

随机推荐

  1. xcode9 上传app后iTues 构建版本不显示

    1.问题原因 苹果公司更新了ios10系统和xcode9以后,做了许多调整,如果开发者没有注意就会遇到这样那样的问题.作者在更新以后就遇到了上传app到appstore成功后,没有显示的问题.下面就介 ...

  2. virtueBox实现虚拟机的复制和粘贴

    1.在设备--共享粘贴板--勾选双向. 2.在设备--拖放--勾选双向. 3.在设备--安装增强功能,然后进入虚拟机安装增强功能即可.

  3. k8s(未完待续)

    K8s简介Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展. 使用Kubernetes可以  自动化容器的部署和复制  随时扩展或收缩容器规模  将容器 ...

  4. MyBatis配置文件的配置说明

    Properties 1.创建一个资源文件jdbc.properties: jdbc.driverClassName=oracle.jdbc.driver.OracleDriver jdbc.url= ...

  5. sharding-jdbc数据分片配置

    数据分片 不使用Spring 引入Maven依赖 <dependency> <groupId>org.apache.shardingsphere</groupId> ...

  6. springboot整合mybatis,redis,代码(一)

    一 搭建项目,代码工程结构 使用idea或者sts构建springboot项目 二  数据库sql语句 SQLyog Ultimate v12.08 (64 bit) MySQL - 5.7.14-l ...

  7. Linux下命令别名配置

    在~/.bashrc文件中添加相关命令别名内容,可以降低风险操作 1. vim ~/.bashrc alias rm='rm -i' alias cp='cp -i' alias mv='mv -i' ...

  8. Luogu P1156 垃圾陷阱 DP

    f[i][j]表示在第i个垃圾,高度为j的最大生命值 转移分三部分: 如果j>=当前垃圾的高度,且两个垃圾间的时间小于等于上一个状态f[i-1][j-a[i].v]的生命值,则可以垫高度 如果j ...

  9. 关于es6 import export的学习随笔

    记得之前的一次面试中,有个面试官问了我关于es6导入和导出的一些知识点,可惜当时对这方面没在意,只知道每次机械的import和export,也不知道为啥要这样用,现在静下心来,好好的把这块看了下,顺便 ...

  10. ansys14.0 从入门到精通

    凌桂龙 李战分 2013.2 清华大学 FLUENT流体计算应用教程 索书号:TB126-39 ZW2.1     单元 结点 和 自由度 载荷 与 边界条件 : 关系 就是约束 , 边界条件是 结构 ...