Vue高仿饿了吗学习笔记

r囧r小猫 2022-05-18 08:26 151阅读 0赞

VUE高仿饿了么app

本项目github地址：https://github.com/motysla/eleme.git

# VUE 搭建简介 #

刚学习了VUE高仿饿了么app课,记录课的要点,巩固知识。  
![bVHU4N_w_150_h_267][]![bVHU4Q_w_150_h_267][]![bVHU4T_w_150_h_267][]  
![bVHU4V_w_150_h_415][]![bVHU4X_w_150_h_326][]![bVHU41_w_150_h_538][]

## VUE 优势 ##

Vue.js 是一个用于创建 web 交互界面的。其特点是

简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。 
         数据驱动 自动追踪依赖的模板表达式和计算属性。 
         组件化 用解耦、可复用的组件来构造界面。 
         轻量 ~24kb min+gzip，无依赖。 
         快速 精确有效的异步批量 DOM 更新。 
         模块友好 通过 NPM 或 Bower 安装，无缝融入你的工作流。

## VUE 搭建工具 ##

借用express + data 构建拟后台

vue 1 . 0 
         express 
         vue .router 
         vue .rescrouse 
         better-scroll 
         less

## CSS 使用的要点 ##

### 1像素边框制作 ###

设备上像素 = 样式像素 \* 设备缩放比例

屏幕宽度 320 px 480 px 640 px 
         缩放比例 1 1 .5 2

当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx，2Npx.为保设计稿还原度,解决就是用media + scale.

.border(@borderColor){ 
         position: relative; 
         
         &::after{ 
         content: ""; 
         position: absolute; 
         bottom: 0; 
         left: 0; 
         width: 100%; 
         border-top: 1px solid @borderColor; 
         } 
         } 
         
         @media (min-device-pixel-ratio: 1.5) { 
         .border{ 
         
         &::after{ 
         transform: scaleY(0.7); 
         } 
         } 
         } 
         
         @media (min-device-pixel-ratio: 2) { 
         .border{ 
         
         &::after{ 
         transform: scaleY(0.5); 
         } 
         } 
         }

通过查询它的缩放比,在媒体宽为1.5倍时, round(1px 1.5 / 0.7) = 1px 在媒体宽为2倍时, round(1px 2 / 0.5) = 1px.

### 自适应宽 ###

![bVHU5L_w_466_h_236][]

在商品路由中,导航宽度固定80px的,因为手机分辨率大小不一,所以食物详情自适应.解决就是flex布局.

`css`

html

在父元素设弹性布局,导航里设弹性为0,定宽为80px.商品食物详情弹性为1.就适应宽度变化.

### Sticky footer ###

![bVHU4Q_w_150_h_267][]

做商家弹出页时,信息高度是无法预定的,有可能溢出window高度,也可能少于window高度,但底部按钮,当信息高度少于window高度,要固定在底部40px.解决就是用sticky footer布局

`css`

html

父元素高相同window高,信息最小高就相同window高,按钮这时就溢出了.  
再设置底的填充,底内边距高就是按钮的高. 按钮在用相对定位,定在信息的底填充里.  
因信息最少高度是100%,所按钮要不钉在底部了.要不溢出.

### 自适相等宽高 ###

![bVHU6a_w_334_h_389][]

在食物弹出页.设计图食物图的宽高是相等,每张图的宽高比例有可能有区别,但也要做自适应.解决就是用padding边距.

`css`

html

在父元素,边距的长是取决去宽的,所其宽度与边距的长是相等的.  
在把高设为0,宽为100%,上边距100%,上边据就盒子的高.盒子是为正形.  
子元素设宽与高为100%,那也是正形.

## VUE要点 ##

### 小图标的编选 ###

![bVHU6q_w_509_h_248][]

根据后台输出的数据,判定显示那个的图标.这vue典型的数据.驱动.解决是使用:class困绑数据

`html`

css

通过v-for,遍历数据,所以date.type得到数据并判断类型.然后通classmap数组判定绑那个class.来加图标.

### 小球动画 ###

![bVHU7a_w_466_h_696][]

点击加食物时,触动小球弹出的动画,小球的落点是在车的中央.但起点是根各个节点位子而又差别的.解决使用transitions + events + dispatch事件冒泡

cartcontrol子组件

![bVHU7h_w_143_h_52][]

`html`

<template> 
         <div class="cartcontrol"> 
         <section class="cart-decrease" @click.stop.prevent="decreaseCart" v-show="food.count > 0" transition="move"> </section> 
         <section class="cart-count" v-show="food.count > 0">{ {food.count}} </section> 
         <section class="cart-add" @click.stop.prevent="addCart"> </section> 
         </div> 
         </template>

在加食物,触发了addCart事件,设用set方法给数据加属性,并使cart.add事件冒泡出去,event.target作为事件参数,即节点冒泡出去.

goods父组件

`html`

在冒泡被events钩子监听,与触动\_drop方法,通过接口获得购物车组建的事件,就把control组建event.target传入购物车组建的事件,及把control节点传入了shop组建.

shop组建

`html`

传入节点数据,过渡执行前可插入一个beforeEnter事件,通getBoundingClientRect定位.动画执行后可插入一个afterEnter,还原小球

### 接后台数据 ###

与后台的配合,通过插vue.resource + express 连接得到数据

dev-server  
``

通过与配和框架express,连到数据。并放在api里.

main.js  
``

import VueResource from 'vue-resource'; 
         Vue.use('VueResource');

引进插件和使用,在全局也可以使用.

header组建  
``

在框架的钩子,及创建就通过http.get连到express发的数据,通参数response得到.body表示数据以json格式响应.注意接收数据是异步实现,如果出报错undefined,可用v-if判断,当获取数据后在渲染.

### 评分类换 ###

![bVHU86_w_426_h_280][]

用户的满意度有,推荐与吐槽再加上全部,就三个分页,分页通过按钮切换.如何制作呢?解决是使用v-show进判断.

ratingselect子组件

![bVHU9d_w_426_h_82][]

`html`

<template> 
         <div class= "ratingselect"> 
         <div class= "rating-type"> 
         <span @click= "select(2, $event)"</span></span> <span class="hljs-keyword" style="font-weight:bold;"><span class="hljs-keyword">class</span></span>=<span class="hljs-string" style="color:rgb(221,17,68);"><span class="hljs-string">"block positive"</span></span> :<span class="hljs-keyword" style="font-weight:bold;"><span class="hljs-keyword">class</span></span>=<span class="hljs-string" style="color:rgb(221,17,68);"><span class="hljs-string">"{'active':selectType === 2}"</span></span>>{ {desc.all}}<span <span class="hljs-keyword" style="font-weight:bold;"><span class="hljs-keyword">class</span></span>=<span class="hljs-string" style="color:rgb(221,17,68);"><span class="hljs-string">"count"</span></span>>{ {ratings.length}}</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span @click=<span class="hljs-string" style="color:rgb(221,17,68);"><span class="hljs-string">"select(0, $event)" class= "block positive" : class= "{'active':selectType === 0}">{ {desc.positive}}<span class= "count">{ {positives.length}}</span></span> 
         <span @click= "select(1, $event)" class= "block negative" : class= "{'active':selectType === 1}">{ {desc.negative}}<span class= "count">{ {negatives.length}}</span></span> 
         </div> 
         <div @click= "toggleContent" class= "switch" : class= "{'on':onlyContent}"> 
         <span class= "iconfont arre">& #xe905;</span> 
         <span class= "text">只看有内容的评价</span> 
         </div> 
         </div> 
         </template>

满意是为:0,不满意是为:1，全部是为:2.

因在点击切换按钮,触发方法,通过传入参数来替换数据,数据selectType赋值等于参数.参数是自义定,然而可以在参数下功夫,然用冒泡将数据分出.

food父组件  
html  
``

<template> 
         <transiton> 
         <div class="rating"> 
         <h4 class="title">商品评价 </h4> 
         <ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"> </ratingselect> 
         <div class="rating-wrapper"> 
         <ul v-show="food.ratings && food.ratings.length"> 
         <li v-for="rating in food.ratings" v-show="needShow(rating.rateType,rating.text)" class="rating-item"> 
         <div class="user"> 
         <span class="name">{ {rating.username}} </span> 
         <img class="avatar" width="12" height="12" :src="rating.avatar"> 
         </div> 
         <div class="time">{ {rating.rateTime | formatDate}} </div> 
         <p class="text"> 
         <span v-if="rating.rateType === 0" class="arrowUp iconfont"> </span> 
         <span v-if="rating.rateType === 1" class="arrowDown iconfont"> </span>{ {rating.text}} 
         </p> 
         </li> 
         </ul> 
         <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价 </div> 
         </div> 
         </div> 
         </transiton> 
         </template>

在事件钩子上,实行监听,把冒泡触发并赋值,数据就得到.在遍历数据,用v-show进行判断.

## VUE杂项 ##

### 过渡流程 ###

只在v-if,v-show,v-for触动节点的变动效果

当 show 属性改变时，Vue.js 将相应地插入或删除元素，按照如下规则改变过渡的 CSS 类名：

如果 show 变为 false，Vue.js 将：

调用 beforeLeave 钩子；  
添加 v-leave 类名到元素上以触发过渡；  
调用 leave 钩子；  
等待过渡结束（监听 transitionend 事件）；  
从 DOM 中删除元素并删除 v-leave 类名；  
调用 afterLeave 钩子。  
如果 show 变为 true，Vue.js 将：

调用 beforeEnter 钩子；  
添加 v-enter 类名到元素上；  
把它插入 DOM；  
调用 enter 钩子；  
强制一次 CSS 布局，让 v-enter 确实生效。然后删除 v-enter 类名，以触发过渡，回到元素的原始状态；  
等待过渡结束；  
调用 afterEnter 钩子。

### better-scroll ###

节点溢满时,是设计稿没有滚动条的,要上下移动.解决使用better-scroll插件.

`html`

但父元素设置溢出隐藏,可用插件的移动显出子节点超的内容.要在节点放个接口,使用框架钩子,创建betterScroll事例,那藏的内容通立体相上下移.better-scroll是调用样式的translate是子节点上下引动.

### less样式处理 ###

通过引入样式,有是会错误.解决使用设置标签  
``

处理器会识别到标签的样式类别,编译样式.

### esLint ###

在使用eslint语法校验时,经常报错,但可以在eslintrc设置进行忽略.

#### no mixed spaces and tabs ####

是把标签缩进与空格捆和使用,解决是可用tab代替空格.

#### Expected indentation of 2 space characters but found 3 indent ####

‘indent’: 0,  
‘space-before-function-paren’: 0  
设置缩进空行.

#### defined but never use ####

可在前加注销  
/ eslint-disable no-unused-vars /

## 后序 ##

要灵活的用vue,先要处理好数据的逻辑. 然而要懂得基本的数据传递属性.

子组件传给父组件- 
         可以用接口 ref;也可以子组件的冒泡把数据传去,父组件用钩子events监听并接到数据. 
         父组件传给子组件- 
         可以在子组件props钩子,接收父组件的传递.也可以父组件用 ref接口调用子组件的方法,并把数据传入方法去.

实战是最重要.

[bVHU4N_w_150_h_267]: https://segmentfault.com/img/bVHU4N?w=150&h=267
[bVHU4Q_w_150_h_267]: /images/20220518/543c7d60e17e42958155ae33850c9da1.png
[bVHU4T_w_150_h_267]: /images/20220518/24b28230236844748cd3b914e1d2eeeb.png
[bVHU4V_w_150_h_415]: https://segmentfault.com/img/bVHU4V?w=150&h=415
[bVHU4X_w_150_h_326]: https://segmentfault.com/img/bVHU4X?w=150&h=326
[bVHU41_w_150_h_538]: /images/20220518/6762a3f3c84d472a98edd7176517a7ba.png
[bVHU5L_w_466_h_236]: /images/20220518/b477ce9b0fc04391b7d52aee10054980.png
[bVHU6a_w_334_h_389]: /images/20220518/08297e514b1c47b7ad514fcf9f316152.png
[bVHU6q_w_509_h_248]: /images/20220518/4e30f577d6b441d0a89b181810371197.png
[bVHU7a_w_466_h_696]: /images/20220518/c020e8d2a8554474b023c4e57f952d07.png
[bVHU7h_w_143_h_52]: /images/20220518/5f9550caa1264f08bfdbc4b380d70b7a.png
[bVHU86_w_426_h_280]: /images/20220518/e13fb3159b504df69469b158f5d9faeb.png
[bVHU9d_w_426_h_82]: /images/20220518/2ad7df395e2041d797f9c371a703ad62.png