- px, rpx, rem转换
- Vue父组件嵌套子组件生命周期
- 不知道子div宽高,上下左右都居中
- mixin作用,参数,有重复的method,使用哪个?
5.Vue filter作用,用法
6.Vue组件全局注册
另外:
项目截图发给面试的人
答案:
- 设计师以iphone6为标准出设计稿的话,1rpx=0.5px=1物理像素
【分辨率】分辨率是屏幕像素的数量,一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334.
【物理分辨率】是硬件所支持的分辨率,【逻辑分辨率】是软件可以达到的分辨率。
物理分辨率 / 逻辑分辨率 = 像素倍率dpr,也就是常说的几倍屏。
iphone6的分辨率写着375667,这里指的就是它的逻辑分辨率。我们上面提的7501334则是它的物理分辨率。所以iphone6的像素倍率=(7501334)/(375667)=2
【px】像素, 作为图片采样的基本单位
【rem】rem是根据html的fontsize去动态计算实际的px的。
所以常常应用这点,做反向使用。即根据屏幕大小动态的设置fontsize.来达到不同的分辨率下有一样的效果。
【rpx】rpx其实是微信对于rem的一种应用的规定,官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx。
所以在微信小程序中1rem=750/20rpx。
如果以iphone6为标准,并且在iphone6上将fontsize设置成62.5%。那么1rem就等于10px,我们只要将设计师标注的尺寸(一般标注的是物理分辨率)除以20就可以得到单位为rem的数值了。
在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
在iPhone6上,1rpx=1物理像素=0.5px。
- 创建的时候,子组件创建过程,夹在父组件的 beforeMount, mounted之间。
销毁的时候,子组件销毁过程夹在父组件的beforeDestroy, Destroyed之间。
示例代码参考: https://www.jianshu.com/p/768d0d1aaf90
- 给外层div设定如下css, 关键是这3条规则:
display: flex;
justify-content: center; /* 水平居中 /
align-items: center; / 垂直居中 */
外层必须有高度,内层不需要高度
考察flex布局: [https://www.runoob.com/w3cnote/flex-grammar.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>box</title>
<style>
div {
border: 1px solid #ccc;
}
body {
font-size: 200px;
}
.container {
display: flex;
/*flex-wrap: wrap;*/
/*flex-direction: column;*/
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 100%;
height: 400px;
}
.inner {
background-color: #2b2b2b;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
x
</div>
</div>
</body>
</html>
效果:
mixin混入对象值为函数的同名函数选项将会进行递归合并为数组,两个函数都会执行,只不过先执行mixin中的同名函数;
filter中写模板中变量,处理函数。在模板中用 | 管道符号调用
先import,然后在components中声明要依赖的组件