vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解
在App.vue中用到了header组件,首先注册组件
components: {'v-header': header
}
然后才能引用
:seller="seller"的意思是将seller对象传递给v-header中的seller,而v-header中从哪里获得seller呢?
通过props从父组件中获得,且要指定数据类型
export default{
props: {
seller: {
type: Object
}
}
}
所以在父组件中需要将seller作为数据导出
export default{
data() {return{
seller: {},
}
}
}
header组件引用star组件也是一样的道理,再巩固下吧
header.vue中
import star from'../star/star.vue'; //红色的star对应的就是star.vue中exportdefault的object
components: {
star
}
引用:
star.vue中就可以取到48和seller.score数据了,并用computed将这两个数据进行相应计算
export default{
props: {
size: {
type: Number
},
score: {
type: Number
}
},
computed: {
starType() {return 'star-' + this.size;
},
itemClasses() {
let result=[];
let score= Math.floor(this.score * 2) / 2;
let hasDecimal= score % 1 !== 0;
let integer=Math.floor(score);for (let i = 0; i < integer; i++) {
result.push(CLS_ON);
}if(hasDecimal) {
result.push(CLS_HALF);
}while (result.length
result.push(CLS_OFF);
}returnresult;
}
}
};
即可对应显示相应的星星:
star组件(评星的星星,多处使用,写成组件)
:class="itemClass"//给每个itemClass设置class(itemClass是通过itemClasses遍历来的)
而itemClasses()也放到conputed中计算
2.@import "star.styl";
3.vue中通过操作变量,不用写DOM部分的代码,省去了很多工作
data() {return{
detailShow:false};
},
methods: {
showDetail() {this.detailShow = true;//控制变量即可,自动更新
},
hideDetail() {this.detailShow = false;
}
},
4.经典CSS sticky footer布局
4.1固定高度的解决方案
为容器推算出其高度,我们可以使用一个容器将和元素包裹起来,这样我们只需要计算页脚的高度
.detail-wrapper
width 100%
min-height 100% 定义基于包含它的块级对象的百分比最小高度。
.detail-main
margin-top 64px
padding-bottom 64px
.detail-close
position relative
width 32px
height 32px
margin -64px auto 0 auto
clear both
font-size 32px
{{seller.name}}
{{seller.supports[index].description}}
{{seller.bulletin}}
4.2Flexbox解决方案,Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
Flexbox是最完美的方案。我们只需要几行CSS代码就可以完美的实现,而且不需要一些奇怪的计算或添加额外的HTML元素。首先,我们需要在
元素上设置display:flex。
flex属性是flex-grow、flex-shrink和flex-basis三个属性缩写。任何元素设置了flex大于0,元素就会灵活的控制自己的尺寸,来适配容器的剩余空间。例如,如果设置了flex:2,设置了flex:1,那么页脚的高度是主内容高度的二分之一,同样的,如果值设置的是4和2而不是2和1,他们效果是一样的,因为他们的倍数比例值一样
body{display:flex;flex-flow:column;min-height:100vh;
}main{flex:1; }
5.clearfix复习
在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。
.clearFix
display inline-block&:after
display block
content"."height0line-height 0clear both
visibility hidden
6.clear both
clear : none | left|right| both
none : 允许两边都可以有浮动对象both : 不允许有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象
用于使用了float css样式后产生浮动,最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候我们就需要clear:both清除浮动。
7.如何得到itemClasses()
itemClasses() {
let result=[];//它是一个数组
let score= Math.floor(this.score * 2) / 2; //获取score并转换,如4.5会转换成4.5,而4.3转换成4
let hasDecimal= score % 1 !== 0; //是否有小数
let integer=Math.floor(score);for (let i = 0; i < integer; i++) {
result.push(CLS_ON); //满星
}if(hasDecimal) {
result.push(CLS_HALF); //半星
}while (result.length
result.push(CLS_OFF);
}returnresult;
}
8.自适应线条-采用flex布局
.title
width 80%
display flex //vue会依赖Postcss自动考虑兼容性问题
margin 28px auto 0 auto
.line
flex: 1
position relative
top -6px
border-bottom 1px solid rgba(255, 255, 255, 0.2)
.text
padding 0px 12px
font-size 16px
font-weight 700px
9.遍历
v-if是“真正的”条件渲染,根据其后表达式的bool值进行判断是否渲染该元素,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
v-if指令只渲染他身后表达式为true的元素;在这里引入v-show指令,因为二者的区别是v-show指令会渲染他身后表达式为false的元素,这样的元素上会添加css代码:style="display:none"; 将上面v-if的实例代码改为v-show
- //v-if条件渲染,传进来true或false
//icon是本身的class
{{seller.supports[index].description}}
10.vue中设置过渡、动画,可以使用现成的transition组件
通常采用给过渡命名的方式(这里没有选用v-方式),这样如果我想应用到另一个动画时就不会有冲突。这是不难做到的,正如你所看到的,我们只是简单地给过渡组件添加了一个name属性:name="fade"。
既然有了钩子,我们就可以利用它们创建过渡,我们可以在 CSS 中使用。
其中enter/leave定义动画开始第一帧的位置,enter-active/leave-active定义动画运行阶段——你需要把动画属性放在这里,enter-to/leave-to指定元素在最后一帧上的位置。
&.fade-enter-active
animation: bounce-in .5s;
&.fade-leave-active
animation: bounce-out .5s;
@keyframes bounce-in{0% {
transform:scale(0);
}50%{transform:scale(1.5);
}100%{transform:scale(1);
}}
@keyframes bounce-out{0% {
transform:scale(1);
}50%{transform:scale(1.5);
}100%{transform:scale(0);
}}
动画和过渡的区别并不仅仅是设置最终的状态或者在开始和结束之间插入状态,我们将使用 CSS 中的@keyframes创建有趣可爱的效果。
@keyframes创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。
11.针对iPhone的模糊-webkit-backdrop-filter blur(10px)
12.文本一行显示,显示不完出现省略号,隐藏滚动条
{{seller.bulletin}}
vue中headers是什么_【vue】饿了么项目-header组件开发相关推荐
- vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
- vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
- vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问 ...
- vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
- vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
- vue中使用原始html插值,VUE.JS中的插值表达式、v-cloak、v-text、v-html、v-bind:、v-on:...
插值表达式 {{ x }},类似这样子的就叫插值表达式 v-cloak 使用v-cloak 能够解决插值表达式闪烁的问题,但是要配合style中的display:none.CSS的属性选择器来使用 v ...
- js 获取vue组件html_关于Vue中main.js,App.vue,index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- vue中的render函数、h()函数、函数式组件
一.什么是render 官网:用于编程式地创建组件虚拟 DOM 树的函数. 在我们使用webpack脚手架创建项目时,都能在main.js中看到一个render函数 import Vue from ' ...
最新文章
- Navicat Essentials 功能简介
- mysql当数据改变时_当数据库里面的价格变化时,发送信息到企业微信中
- Linux中环境变量文件profile、bashrc、bash_profile之间的区别和联系
- 【PAT乙级题库】全套总结
- PHP设计模式 -- 策略模式
- SAP UI5 return sap.ui.view的实现
- 【.NET Core 3.0】小技巧 || 原生DI一对多注入
- 后台系统可扩展性学习笔记
- linux 版本_Linux动态库版本号作用机制
- idea java no sdk_java - intelliJ IDEA 13错误:请选择Android SDK
- BGP进阶学习之RR与peer-group
- oracle 视图权限 oracle 创建视图权限不足( ORA-01031: 权限不足)
- 两台电脑网线传输文件教程
- 新技术给数据中心带来新风险
- Ubuntu操作系统的学习,从新手到老手的过渡
- Odin WindowEditor使用体会
- 自强不息系列之Java 实例 - 线程优先级设置
- LL(1)文法构造FIRST、FOLLOW、分析表并分析
- LOJ#2833 「JOISC 2018 Day 1」帐篷 dp
- 一张图看懂华为2019年关键业务进展
热门文章
- Linux C :线程操作和线程同步的多线程并发编程
- 绿联网卡转接mac设置_物联网卡这样设置一下上网全程4G!建议收藏!
- 电脑管家离线安装包_二号线、南延线TVM病毒客户端离线处理方法
- linux切换图片的代码,cacaview – Linux终端下将图片转换ASCII Art代码图案
- vue-scroll滚动组件
- wps出现安装installer_判断本机是否安装Microsoft Office或者wps
- python restful服务部署_用python为mysql实现restful接口
- 个人永久性免费-Excel催化剂功能第28波-工作薄瘦身,安全地减少非必要冗余
- Hadoop安装过程
- libgdx学习记录27——线段与线段相交检测