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
//內容的包裝層//關鍵padding-bottom 64px{{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组件开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果笔记本怎么u启动 苹果笔记本如何进行
- 下一篇： html5倒计时秒杀怎么做,vue 设