組件中的data必須是一個函數。因為組件是可以服用的，如果組件中的data定義為對象的話，那么修改某一個組件的data會影響另外的組件。

前后端的交互需要通過ajax請求，通過vue-resource庫可以實現ajax請求。

安裝vue-resource，在amin.js中import ，通過Vue.use（）全局注冊,在App.vue中的cteated（）鉤子函數中發送ajax請求，獲取數據。this相當于App的一個實例，vue-resource為組件定義了一個$http的方法。

import VueResource from 'vue-resource';

Vue.use(VueResource);

created() {
? this.$http.get('/api/seller').then((response) => {
? ? response = response.body;
? ? if (response.errno === ERR_OK) {
? ? ? this.seller = response.data;
? ? }
? });
}

用v-bind指令，可以從父組件傳遞數據給子組件，在子組件中用props接收父組件傳遞過來的數據。

<img>一般會指定寬高，如<img width="64" height="64" :src="seller.avatar">

<img>和<div class="content">是并列顯示的，通過設置display:inline-block實現的。這兩個元素之間會有間隔，這是由于中間有空白字符，要消除這些空白字符可以把父元素<div class="content-wrapper">的font-size設置為0，然后在子元素中設置各自的font-size。這個技巧在后面多次用到了。

<div>是行內元素，指定寬高是不會生效的，要設置為display：inline-block后，指定寬高才會生效。

根據不同的dpr，原則背景圖片的像素，在mixin.styl文件下寫bg-image($url)

bg-image($url)
? background-image: url($url + "@2x.png")
? @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
? background-image: url($url + "@3x.png")

?

圖片和文字并排排列時，需要將兩者對齊，項目中用到的方式是設置圖片在的span vertical-align：top

supports中要根據活動的內容顯示圖片，返回的數據時type，使用一個數組classMap將type映射到對應的圖片，然后用v-bind綁定classMap。

?

bulletin-wrapper包含三部分，要實現公告內容的這種效果，要設置不換行，超出的內容隱藏，用省略號代替超出的文本

white-space: nowrap
overflow: hidden
text-overflow: ellipsis

要實現背景的模糊效果，可以給背景圖片加一個容器，然后在外層容器使用filter。背景圖片要置于底部，這可以通過設置z-index來實現。這樣子設置后在.background的父元素會有陰影漏出來，需要給其父元素設置overflow：hidden

<div class="background">
? <img :src="seller.avatar" width="100%" height="100%">
</div>

?

.background
? position: absolute
? top: 0
? left: 0
? width: 100%
? height: 100%
? z-index: -1
? filter: blur(10px)

浮層用到了經典的CSS sticky footers布局。浮層相對于窗口fixed布局，注意overflow要設置為auto。浮層的顯示和隱藏通過v-show指令來實現<div v-show="detailShow" class="detail">

?

sticky footers布局是指：如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；如果內容足夠長時，頁腳塊會被內容向下推送。這個文章里列了兩種方法。http://www.w3cplus.com/css3/css-secrets/sticky-footers.html

這個項目中用了另外一種比較復雜但是兼容性更好的方法。內容區域需要加一個容器，這種方法的結構一般是這樣子的

?

<div v-show="detailShow" class="detail">
? <div class="detail-wrapper clearfix">
? ? <div class="detail-main"></div>
? </div>
? <div class="detail-close"></div>
</div>

在base.styl中寫class clearfix的樣式

.clearfix
? display: inline-block
? &:after
? ? display: block
? ? content: "."
? ? height: 0
? ? line-height: 0
? ? clear: both
? ? visibility: hidden

設置容器detail-wrapper的大小為100%，detail-main設置一個padding-bottom，給頁腳detail-wrapper留出位置，頁腳detail-close設置負 margin拉到視口中。

.detail
? position: fixed
? z-index: 100
? Top: 0
? left: 0
? width: 100%
? height: 100%
? overflow: auto
? backdrop-filter: blur(10px)
? background: rgba(7, 17, 27, 0.8)

? .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

生成star組件，star組件從父元素接收參數score和size，根據size增加class starType，根據score生成數組itemClasses，來確定星星的狀態（on、half、off）。starType和itemClasses都在計算屬性中定義。

小標題的布局。主要有兩點要注意，第一標題固定布局，兩邊的線自適應布局；第二標題兩邊的間隔用padding來設置。布局用flex來實現，元素用了<div>,因為用<span>的話在有些手機上可能會存在兼容性問題。

<div class="title">
? <div class="line"></div>
? <div class="text">優惠信息</div>
? <div class="line"></div>
</div>

?

.title
? display: flex
? width: 80%
? margin: 28px auto 24px auto
? .line
? ? flex: 1
? ? position: relative
? ? top: -6px
? ? border-bottom: 1px solid rgba(255, 255, 255, 0.2)
? .text
? ? padding: 0 12px
? ? font-weight: 700
? ? font-size: 14px

在vue中動畫可以通過<transition>來實現

轉載于:https://www.cnblogs.com/dingzibetter/p/7259225.html

總結

以上是生活随笔為你收集整理的4header组件开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。