vue 饿了么项目笔记
vue 饿了么项目
1.图标字体引用
2.scss 二三倍图切换 1像素边框
3.better-scroll
4.布局
商品主页面
<div id="app"> <v-header :seller='seller'></v-header> <div class="tab"> <div class="tab-item"> <router-link to="/goods">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">评价</router-link> </div> <div class="tab-item"> <router-link to="/seller">商家</router-link> </div> </div> <keep-alive> <router-view :seller='seller'></router-view> </keep-alive> </div>
主页面包含头部,三个tab菜单切换。头部在页面切换时通用。每个菜单下router-view都有通用商家信息,通过props动态传入seller数据给各个子组件。
<router-view :seller='seller'></router-view>
1.header.vue组件
<template> <div class="header"> <!-- 头部内容 --> <div class="content-wrapper"> <div class="avatar"></div> <div class="content"></div> <div class="supports_count" @click="showDetail(true)"></div> </div> <!-- 公告栏 --> <div class="bulletin-wrapper" @click="showDetail(true)"> <span class="bulletin-title"></span> <span class="bulletin-text"></span> <span class="icon-keyboard_arrow_right"></span> </div> <!-- 背景 --> <div class="background"></div> <!-- 头部详细页面 --> <transition name="fade"> <div class="detail" v-show="detailShow"> <div class="detail-main"> <div class="name"></div> <div class="star-wrapper"></div> <div class="title"></div> <div class="supports"></div> <div class="title"></div> <div class="content"></div> </div> <div class="detail-close" @click="showDetail(false)"></div> </div> </transition> </div> </template>
公告栏一行多余字体省略
.bulletin-wrapper{ position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; .bulletin-title{ //span元素转为行内块元素 为了可以使用width height控制图标大小 display: inline-block; vertical-align: middle; @include bg-image("bulletin"); } .bulletin-text{ } .icon-keyboard_arrow_right //字体图标绝对定位 position absolute top: 9px right 2px }
头部详细页面点击显示和隐藏
<div class="supports_count" v-if="seller.supports" @click="showDetail(true)"> <div class="detail-close" @click="showDetail(false)"> <transition name="fade"> <div class="detail" v-show="detailShow"> //内容 </div> </transition> data () { return { detailShow: false } }, methods: { showDetail (isShow) { this.detailShow = isShow } },
Vue只有在插入,更新或者移除DOM元素时才会应用过渡效果。
使用vue提供的transition来封装组件成为过渡组件,transition需要与如下情景中的任一种一起使用:
v-if(条件渲染)
v-show(条件展示)
动态组件
在组建的根节点上,并且被vue实例DOM方法触发,如appendTo方法把组件添加到某个根节点上
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="fade",会有如下四个CSS类名:
fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;
fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;
fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除;
从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
上面示例中,fade-enter和fade-leave-active类设置CSS为opacity:0,说明过渡刚进入和离开的时候透明度为0,即不显示。
vue 饿了么项目笔记的更多相关文章
- vue饿了么学习笔记(1)vue-cli开启项目
一.vue-cli介绍 vue-cli是vue的脚手架工具 ----> 帮助写好vue.js基础代码的工具: ① 搭建目录结构 ② 进行本地调试 ③ 进行代码部署 ④ 热加载 ⑤ 进行单元测试 ...
- 项目笔记-vue
记录新建vue项目之后的种种. 2019年3月12日,从git上下载了一个vue后台模板的项目,git地址:https://github.com/lin-xin/vue-manage-system ( ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid
Django商城项目笔记No.12用户部分-QQ登录2获取QQ用户openid 上一步获取QQ登录网址之后,测试登录之后本该跳转到这个界面 但是报错了: 新建oauth_callback.html & ...
- Django商城项目笔记No.10用户部分-登录接口
Django商城项目笔记No.10用户部分-登录接口 添加url路由 接下来第二步,增加返回内容: 增加结果如下: 配置:上边的方法定义了返回的内容都有哪些,那这个方法jwt还不知道,需要配置: 修改 ...
- Django商城项目笔记No.5用户部分-注册接口-短信验证码
Django商城项目笔记No.4用户部分-注册接口-短信验证码 短信验证码也保存在redis里(sms_code_15101234567) 在views中新增SMSCodeView类视图,并且写出步骤 ...
- Django商城项目笔记No.1项目准备工作
Django商城项目笔记No.1项目准备工作 一.本项目商城属于B2C商业模式 二.项目采用前后端分离的应用模式 前端使用Vue.js 后端使用Django REST framework 1.创建gi ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
随机推荐
- C#面向对象 类的继承
1.类的访问权限: public:跨程序集,命名空间,必须被using引用: internal:默认当前命名空间: 2.类成员的访问权限: private:私有的,只能当前类: protecte:受保 ...
- C#委托(转载)
C#委托的介绍(delegate.Action.Func.predicate) from:http://www.cnblogs.com/akwwl/p/3232679.html 委托是一个类,它定义了 ...
- EOS开发语言和石墨烯技术介绍
EOS 的智能合约基于 WebAssembly(WASM) 技术执行用户生成的应用程序和代码.WASM是一项新兴的网络标准,得到了谷歌,微软,苹果等公司的广泛支持.目前,用于构建编译为WASM的应用程 ...
- php学习----数据类型2
Boolean 布尔类型 这是最简单的类型.boolean 表达了真值,可以为 TRUE 或 FALSE. 要明确地将一个值转换成 boolean,用 (bool) 或者 (boolean) 来强制转 ...
- 【转载】ubuntu下/usr/bin和/usr/local/bin的区别
这篇文章已经无法考证是谁原创的了 首先注意usr 指 Unix System Resource,而不是User 然后通常: /usr/bin下面的都是系统预装的可执行程序,会随着系统升级而改变. /u ...
- June 5. 2018 Week 23rd Tuesday
Learn to let go and be clear of where you really want to head for. 学会放手,同时也要弄清楚自己的真正所爱. From Kissing ...
- Beta冲刺博客汇总(麻瓜制造者)
Beta冲刺博客 Beta冲刺(1/5)(麻瓜制造者) Beta冲刺(2/5)(麻瓜制造者) Beta冲刺(3/5)(麻瓜制造者) Beta冲刺(4/5)(麻瓜制造者) Beta冲刺(5/5)(麻瓜制 ...
- googLeNet网络
1.什么是inception结构 2.什么是Hebbian原理 3.什么是多尺度处理 最近深度学习的发展,大多来源于新的想法,算法以及网络结构的改善,而不是依赖于硬件,新的数据集,更深的网络,并且深度 ...
- SQL TOP 子句
TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. SQL Server 的语法: S ...
- docker: read tcp 192.168.7.235:36512->54.230.212.9:443: read: connection reset by peer.
在学习rancher的时候去下载rancher/agent镜像的时候,出现报错:docker: read tcp 192.168.7.235:36512->54.230.212.9:443: r ...