vue使用小记(坑)

1、使用vue的过程中,尝试使用js数组之间传值,发现改变一个数组以后,原始的数组也发生了变化。

原来:两个数组的地址因为完全赋值变成了同一个,所以一个产生变化会对另一个也造成影响

解决:通过百度搜索发现可以通过JSON.parse(JSON.stringify(数组))来解决

原理:使用了stringify转化成了string后原先的地址消失,然后使用parse重新格式化就成了一个新的数组了

2、开发的项目中突然发现:项目中使用padding会对元素的宽高造成影响。因为希望能够不影响元素,所以去找了办法:设置 box-sizing: border-box;

原因:造成padding影响盒子的width或者height的原因是我们在设置css样式的时候给定了width或height,如果未设置,就不会受到padding的影响

3、设置文字超过两行隐藏省略的办法:

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

4、box-shadow覆盖问题:在开发中设置阴影如果下方拼接的是其他组件,并且设置了背景,那么阴影就会被覆盖

原因:因为组件的层级高覆盖了阴影

解决:设置position:relative;z-index:100;提高元素层级

5、关于父子组件传值问题:

如果单纯只是在子组件进行使用父组件的传值(比如:展示信息、跳转地址),那么子组件可以直接this. prop中的元素;

如果你想要修改父组件的传值,那么你就要在data中声明一个新的元素在mounted中进行赋值操作

如果你想要动态的在父子组件传值: 父传子---在子组件watch监听prop中的元素然后赋值; 子传父:emit方法,这个不用多说了

6、关于多图片上传的实现:

    (1)、本身不追求实现效果,只是为了多图片上传:

           可以使用原生的input,它的属性accept 以及 multiple 可以控制文件上传的类型以及数量大小,但是类型控制不严谨,需要配合js使用

     (2)、有实现效果要求

            可以使用自己的布局,然后隐藏input,使用伪触发的形式,获取文件后回填url路径展示


----待增加

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.vue怎么实现dom缓存? 通过keep-alive包裹router-view 2.$route和$route...
    阿印_ef04阅读 469评论 0 2
  • client,page和screen的区别? clientX,clientY是触摸点相对于viewport视口x,...
    change_22fa阅读 1,844评论 1 1
  • 2018web前端最新面试题总结 一、Html/Css基础模块 基础部分 什么是HTML?答:​ HTML并不是...
    duans_阅读 4,717评论 3 27
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,622评论 1 5
  • #前端基础 # ## JavaScript基础 ## ###渲染机制与变量 ### script代码为什么放到bo...
    hmg阅读 344评论 1 1

友情链接更多精彩内容