前言
前段时间，我在B站上面自学Vue.js，看的是coderwhy老师的教程！老师讲的真的非常好。如果有朋友想学Vue.js，我推荐coderwhy老师的教程（链接在文章结尾处）
在这个教程里面，老师最后的实战项目是一个移动端的商城，类似淘宝的那种。我把我跟着老师做的这个模拟商城的代码挂载到github上面了，因为老师在教程里面并没有把这个项目全部带我们写完，所以，我有时间也会慢慢完善老师的这个项目，用于锻炼和回顾Vue.js。
有兴趣的朋友，可以去github上面看我的这个项目：Mall-project-sky.learn (链接在文章结尾处)
在跟着老师一边学一边做这个项目的时候，我遇到了一些坑，就是跟老师写的代码一样，但是为啥我的效果跟老师的不一样？有时候找半天，在网上各种查资料，后面才知道是这样原因…… 有时候有些坑真的太坑了！
那么下面，我就分享几个我在这个项目里面的坑吧！希望对大家能有所帮助~
正文
1.position: sticky 的特坑！！！
这个sticky属性其实做吸顶效果是很好的，但是，这个属性是新出来的，很多浏览器还不是很支持，而且，这个属性在使用的时候，有很多很多的限制！
所以大家使用 position: sticky 的时候，一定要特别特别注意下面这5点！
1.sticky不会触发BFC，
2.z-index无效，
3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
4.父元素不能有overflow:hidden或者overflow:auto属性。
5.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一
特别特别是第3点！父元素的height一定不要设置为100%，否则就会出现莫名奇妙的问题！（我就是被这第三点坑了！）
2.VsCode的复制相对路径
有时候，我想在img标签中引用某一张图片，所以就需要在src里面写地址，但是项目文件太多了，我就不想自己看，所以，我就用了VsCode编辑器里面的复制相对路径，只需要选中图片，然后右键，选中“复制相对路径”，比如它的路径是
assets\img\common\top.png
我以为这样就可以了，但是在编译的时候，就会出现以下的报错信息：
To install it, you can run: npm install --save assets\img\common\top.png
我第一次遇到这种情况的时候，找了好久的原因，最后，我万万没想到，竟然是我太信任VsCode了！
因为我们真正需要的src路径是
assets/img/common/top.png
没错！就是 \ 和 / 的区别，有时候找半天都发现不了这个问题。所以，我建议最好不要用vscode的复制相对路径了，真的太坑了！如果要复制也可以，一定要在复制粘贴完以后，把路径里面的 \ 改成 / 这个符号！
3.关于props
传入的东西 都必须用 v-bind 来动态绑定！
比如获取传入的图片地址
props: {
imgSrc: {
type: String,
default: {
return ''
}
}
}
要用这个图片地址，要记得用v-bind动态绑定
![]()
简写：
![]()
4.mock中的Random.dataImage的使用 特坑
错误写法：
image: Random.dataImage('300*400', 'mock的图片' + Random.integer(1, 100))
正确写法：
image: Random.dataImage('300x400', 'mock的图片' + Random.integer(1, 100))
把 * 换成 x (英文字母x)
我TM…… 服了，找了半天原因，结果竟然是因为这个！
5.calc 也是特坑
在css中，用calc设置高度或宽度，书写格式很重要，很重要，很重要！！！
错误写法：
height: calc(100%-44px-49px)
正确写法：
height: calc(100% - 44px - 49px)
calc中计算的两个因子同运算符号之间必须存在空格
结尾
以上就是我目前写这个项目所遇到的比较坑的地方。其实都是一些平常不容易注意的点，但是有时候，正是因为这样，才会让我觉得，这TM也太坑了！
最后，附上本篇文章中所涉及的链接：
coderwhy老师的教程，B站链接：https://www.bilibili.com/video/av91016893
我的Mall-project-sky.learn项目，GitHub链接：https://github.com/LonelyMoonSky/Mall-project-sky.learn