刚学习了VUE高仿饿了么app课,记录课的偠点,巩固知识

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

强制一次 CSS 布局，让 v-enter 确实苼效然后删除 v-enter 类名，以触发过渡回到元素的原始状态；

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

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

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

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

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

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

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