vue实现h5过程中积累的知识点

最近应项目需求，在微信企业号上开发年会活动，自己第一次使用vue实现h5页面，在开发过程中积累很多微小的知识点。

1. v-tap vs v-on:click
   使用v-tap会造成按钮点击事件有时不生效，现在只想静静地用vue原生的click事件

2. $t中的特殊字符
   vue中的国际化$t支持特殊字符，需要用{{{ }}}进行处理

3. $t中的format
   vue中的国际化$t支持传入变量，具体可参考vue-i18n的format

4. 多个相同的model提交表单
   需要在data中提前定义好models及每个model具体的数据结构，然后在template中foreach渲染每一个model

5. 定义方法
   实现具体事件的方法时，需要定义在methods中，并将vm作为参数进行传递，实现数据绑定与更新

6. 属性值
   如果是vue自带的指令，填写value值则不需要使用{{......}}
   如果是普通的html元素取值，则需要使用{{......}}

7. foreach 对象

<li v-for="{ val, key } in tabs" v-tap="tab(key)"> 
  {{ val }}
</li>

PS: 这个是我实现切换tabs的部分代码，也可以作为切换tabs的参考

由于自己前端功底不行，所以实现前端页面也走了很多弯路，积累一些很基础的知识点，作为本文的彩蛋特此奉上：

1. 中文名字的正则表达式

/^[\u4E00-\u9FA5]{2,}$/

PS: 这里没有考虑到人名中间包含·等，仅作粗略参考

2. 文字水平和垂直居中
   文字水平居中：

text-align: center;

文字垂直居中：
line-height属性值设置与font-size属性值一样

3. div水平和垂直居中
   div水平居中：

margin: 0 auto;

div垂直居中：
line-height属性值设置与div的height属性值保持一致

4. 背景图片显示局部

background-size: cover; 

5. icon图片显示不合理

background-size: contain; 

6. 设置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;
}

7. div布局

当一些元素的布局默认超过父容器的边界时，可使用如下样式：

display: inline-block;

当一些元素随着当前容器会更改自己的位置，可使用如下样式：

position: fixed;

8. 设置mask背景色为当前页面的背景色

background-color: rgba(255, 255, 255, 0);

9. button的点击样式
   使用:active表示

10. 旋转图片
    添加一个自定义的样式，如下所示：

.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);
}

11. 实现一个自定义头像边框
    如果要添加一个长宽为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的值设置为高宽度的一半即可。

12. min-height属性使用
    当一个div有一些固定加上动态变化的内容，可以使用min-height属性设置