vue饿了么移动端app总结第一篇

使用的是vue-cli 2.x脚手架

一、头部组件的实现

二、使用vue-router实现选项卡

---

项目的地址：

一、头部组件的实现

1、需求分析：点击头部组件，出现商家优惠信息弹出层。点击x按钮关闭弹出层。

2、使用到的技术点：vue-resource、vue指令、vue事件修饰符、过渡效果、2x和3x图使用、CSS Sticky footer布局、v-header组件的制作、flex布局、

3、实现过程中遇到的问题：

        由于弹出层是我嵌套在头部组件中的，用来控制显示和隐藏的。所以在弹出层里面的x按钮使用点击事件会失效。原因已经查出来了，是由于我在头部组件最外层已经设置了@click点击事件，在内部又想做一个点击事件，结果事件冒泡导致不能取变量为反控制弹出层显隐。（经验一）解决问题的方法，vue提供了解决事件冒泡的修饰符@click.stop.

4、几个关键地方实现的思路：

①获取数据，传递到头部组件中。

app.vue

获取数据之后使用v-bind将数据传递给子组件，子组件用props属性接收。vue-resourse已经在main.js文件全局注册了。

②transtion组件和v-show的联合使用

transtion组件，vue官方提供了一个name属性，通过该属性可以设置对应的动画需求。

v-show是用过设置一个boolean数据类型，通过点击事件来控制页面的显隐。

（一般v-show和v-if拿来做比较。）

③弹出层商家详情页的字体图标使用classMap数组实现动态绑定class.

数据结构

通过数据结构知道自己想要绑定的是哪种图标，然后设置一个数组动态添加属性，达到需求。

上面为什么要使用v-if？思考一下。

④CSS Sticky footer布局,是为了解决在底部的x按钮，假设内容过多，会将x按钮覆盖掉的问题。

设计这种布局的核心思想。其实就是使用一个承载内容的容器1还有脚步内容的容器2。容器1在自己的底部设置和容器2高度一样的内边距，容器2通过定位和margin到达自己需求的地方。

二、外部组件的实现

1、需求分析：实现seller（商家）、goods（商品）、ratings（评论）组件制作，类似于选项卡的功能，实现点击切换效果。（组件里面的留给下篇文章）

2、使用到的技术点：vue-router的使用、组件的（引用、注册、使用）

vue-router的使用分三步

第一步：在main.js进行全局注册

第二步：在router文件下的index.js文件给组件配置路由

第三步：使用vue-router提供的组件，router-link和router-view实现选项卡功能

组件（引用、注册和使用）