最近應(yīng)項目需求火窒，在微信企業(yè)號上開發(fā)年會活動，自己第一次使用vue實現(xiàn)h5頁面，在開發(fā)過程中積累很多微小的知識點。
v-tapvsv-on:click
使用v-tap會造成按鈕點擊事件有時不生效辉饱，現(xiàn)在只想靜靜地用vue原生的click事件$t中的特殊字符
vue中的國際化$t支持特殊字符，需要用{{{ }}}進(jìn)行處理$t中的format
vue中的國際化$t支持傳入變量拣展，具體可參考vue-i18n的format多個相同的model提交表單
需要在data中提前定義好models及每個model具體的數(shù)據(jù)結(jié)構(gòu)彭沼，然后在template中foreach渲染每一個model定義方法
實現(xiàn)具體事件的方法時，需要定義在methods中备埃，并將vm作為參數(shù)進(jìn)行傳遞姓惑，實現(xiàn)數(shù)據(jù)綁定與更新屬性值
如果是vue自帶的指令，填寫value值則不需要使用{{......}}
如果是普通的html元素取值瓜喇，則需要使用{{......}}foreach 對象
<li v-for="{ val, key } in tabs" v-tap="tab(key)">
{{ val }}
</li>
PS: 這個是我實現(xiàn)切換tabs的部分代碼挺益，也可以作為切換tabs的參考
由于自己前端功底不行，所以實現(xiàn)前端頁面也走了很多彎路乘寒，積累一些很基礎(chǔ)的知識點望众，作為本文的彩蛋特此奉上：
- 中文名字的正則表達(dá)式
/^[\u4E00-\u9FA5]{2,}$/
PS: 這里沒有考慮到人名中間包含·等，僅作粗略參考
- 文字水平和垂直居中
文字水平居中：
text-align: center;
文字垂直居中：
line-height屬性值設(shè)置與font-size屬性值一樣
- div水平和垂直居中
div水平居中：
margin: 0 auto;
div垂直居中：
line-height屬性值設(shè)置與div的height屬性值保持一致
- 背景圖片顯示局部
background-size: cover;
- icon圖片顯示不合理
background-size: contain;
- 設(shè)置placeholder的顏色
/* WebKit browsers */
&::-webkit-input-placeholder {
color: @placeholderFontColor;
}
/* Mozilla Firefox 4 to 18 */
&:-moz-placeholder {
color: @placeholderFontColor;
}
/* Mozilla Firefox 19+ */
&::-moz-placeholder {
color: @placeholderFontColor;
}
/* Internet Explorer 10+ */
&:-ms-input-placeholder {
color: @placeholderFontColor;
}
- div布局
當(dāng)一些元素的布局默認(rèn)超過父容器的邊界時伞辛，可使用如下樣式：
display: inline-block;
當(dāng)一些元素隨著當(dāng)前容器會更改自己的位置烂翰，可使用如下樣式：
position: fixed;
- 設(shè)置mask背景色為當(dāng)前頁面的背景色
background-color: rgba(255, 255, 255, 0);
button的點擊樣式
使用:active表示旋轉(zhuǎn)圖片
添加一個自定義的樣式，如下所示：
.transform {
transform: rotate(180deg);
/* IE 9 */
-ms-transform: rotate(180deg);
/* Safari and Chrome */
-webkit-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
}
- 實現(xiàn)一個自定義頭像邊框
如果要添加一個長寬為140px蚤氏，圖片外圍有2px白色描邊的用戶頭像甘耿，可以添加如下樣式:
.member-logo {
width: 1.8667rem;
height: 1.8667rem;
background-size: contain;
border-radius: 0.9333rem;
box-shadow: 0 0 0 2px #FFFFFF;
}
總結(jié)來說，將border-radius的值設(shè)置為高寬度的一半即可竿滨。
- min-height屬性使用
當(dāng)一個div有一些固定加上動態(tài)變化的內(nèi)容佳恬，可以使用min-height屬性設(shè)置
