【vue】餓了麽項目-header組件開發
1.數據傳遞的理解
在App.vue中用到了header組件，首先註冊組件
components: { ‘v-header‘: header }
然後才能引用
<v-header :seller="seller"></v-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 }
引用： <div class="star-wrapper"> <star :size="48" :score="seller.score"></star> </div>
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 < LENGTH) { result.push(CLS_OFF); } return result; } } };
即可對應顯示相應的星星：
<div class="star-item" :class="starType">
<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" ></span>
</div>
star組件（評星的星星，多處使用，寫成組件）
<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" ></span> :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固定高度的解決方案
為容器推算出其高度,我們可以使用一個容器將<header>和<main>元素包裹起來，這樣我們只需要計算頁腳的高度
好文推薦：http://www.w3cplus.com/css3/css-secrets/sticky-footers.html?utm_source=tuicool&utm_medium=referral
.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
<div v-show="detailShow" class="detail" @click="hideDetail" transition="fade">
<div class="detail-wrapper clearFix"> //內容的包裝層
<div class="detail-main"> //關鍵padding-bottom 64px
<h1 class="name">{{seller.name}}</h1>
<div class="star-wrapper">
<star :size="48" :score="seller.score"></star>
</div>
<div class="title">
<div class="line"></div>
<div class="text">優惠信息</div>
<div class="line"></div>
</div>
<ul v-if="seller.supports" class="supports">
<li class="support-item" v-for="(item, index) in seller.supports">
<span class="icon" :class="classMap[seller.supports[index].type]"></span>
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
<div class="title">
<div class="line"></div>
<div class="text">商家公告</div>
<div class="line"></div>
</div>
<div class="bulletin">
<p class="content">{{seller.bulletin}}</p>
</div>
</div>
</div>
<div class="detail-close" @click="hideDetail">//底層
<i class="iconfont icon-cha"></i>
</div>
</div>
4.2Flexbox解決方案，Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
Flexbox是最完美的方案。我們只需要幾行CSS代碼就可以完美的實現，而且不需要一些奇怪的計算或添加額外的HTML元素。首先，我們需要在<body>元素上設置display:flex。
flex屬性是flex-grow、flex-shrink和flex-basis三個屬性縮寫。任何元素設置了flex大於0，元素就會靈活的控制自己的尺寸，來適配容器的剩余空間。例如，如果<main>設置了flex:2，<footer>設置了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的塊級元素，從而達到清除浮動的作用。
after是個偽元素，意思就是在class為clear的元素後面加入新內容好文推薦:http://blog.csdn.net/puncha/article/details/10174683
.clearFix display inline-block &:after display block content "." height 0 line-height 0 clear 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 < LENGTH) { //空星 result.push(CLS_OFF); } return result; }
8.自適應線條-采用flex布局
<div class="title">
<div class="line"></div>
<div class="text">優惠信息</div>
<div class="line"></div>
</div>
.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 <--文字根據內容自動撐開，不用flex-->
padding 0px 12px
font-size 16px
font-weight 700px
9.遍歷
v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麽也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下， v-show 就簡單得多——不管初始條件是什麽，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。
<ul v-if="seller.supports" class="supports"> //v-if條件渲染，傳進來true或false <li class="support-item" v-for="(item, index) in seller.supports"> <span class="icon" :class="classMap[seller.supports[index].type]"></span> //icon是本身的class <span class="text">{{seller.supports[index].description}}</span> </li> </ul>
10.vue中設置過渡、動畫，可以使用現成的transition組件
好文推薦：http://www.cnblogs.com/nzbin/p/6380679.html
通常采用給過渡命名的方式（這裏沒有選用v-方式），這樣如果我想應用到另一個動畫時就不會有沖突。這是不難做到的，正如你所看到的，我們只是簡單地給過渡組件添加了一個 name 屬性:name="fade" 。
<transition name="fade"> <div v-show="detailShow" class="detail" @click="hideDetail" transition="fade"> ... </div> </transition>
既然有了鉤子，我們就可以利用它們創建過渡，我們可以在 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)
【vue】餓了麽項目-header組件開發