最近应项目需求，在微信企业号上开发年会活动，自己第一次使用vue实现h5页面，在开发过程中积累很多微小的知识点。
v-tapvsv-on:click
使用v-tap会造成按钮点击事件有时不生效，现在只想静静地用vue原生的click事件$t中的特殊字符
vue中的国际化$t支持特殊字符，需要用{{{ }}}进行处理$t中的format
vue中的国际化$t支持传入变量，具体可参考vue-i18n的format多个相同的model提交表单
需要在data中提前定义好models及每个model具体的数据结构，然后在template中foreach渲染每一个model定义方法
实现具体事件的方法时，需要定义在methods中，并将vm作为参数进行传递，实现数据绑定与更新属性值
如果是vue自带的指令，填写value值则不需要使用{{......}}
如果是普通的html元素取值，则需要使用{{......}}foreach 对象
<li v-for="{ val, key } in tabs" v-tap="tab(key)">
{{ val }}
</li>
PS: 这个是我实现切换tabs的部分代码，也可以作为切换tabs的参考
由于自己前端功底不行，所以实现前端页面也走了很多弯路，积累一些很基础的知识点，作为本文的彩蛋特此奉上：
- 中文名字的正则表达式
/^[\u4E00-\u9FA5]{2,}$/
PS: 这里没有考虑到人名中间包含·等，仅作粗略参考
- 文字水平和垂直居中
文字水平居中：
text-align: center;
文字垂直居中：
line-height属性值设置与font-size属性值一样
- div水平和垂直居中
div水平居中：
margin: 0 auto;
div垂直居中：
line-height属性值设置与div的height属性值保持一致
- 背景图片显示局部
background-size: cover;
- icon图片显示不合理
background-size: contain;
- 设置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布局
当一些元素的布局默认超过父容器的边界时，可使用如下样式：
display: inline-block;
当一些元素随着当前容器会更改自己的位置，可使用如下样式：
position: fixed;
- 设置mask背景色为当前页面的背景色
background-color: rgba(255, 255, 255, 0);
button的点击样式
使用:active表示旋转图片
添加一个自定义的样式，如下所示：
.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);
}
- 实现一个自定义头像边框
如果要添加一个长宽为140px，图片外围有2px白色描边的用户头像，可以添加如下样式:
.member-logo {
width: 1.8667rem;
height: 1.8667rem;
background-size: contain;
border-radius: 0.9333rem;
box-shadow: 0 0 0 2px #FFFFFF;
}
总结来说，将border-radius的值设置为高宽度的一半即可。
- min-height属性使用
当一个div有一些固定加上动态变化的内容，可以使用min-height属性设置
