2020-08-25

最新推荐文章于 2024-08-13 20:57:25 发布

学游泳的飞鱼

最新推荐文章于 2024-08-13 20:57:25 发布

阅读量206

点赞数

文章标签： vue html js

本文链接：https://blog.csdn.net/qq_45140055/article/details/108225897

版权

学习vue过程中踩的坑

1.解决多次点击导航路由报错

const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }

2.img图片的border-radius无效

padding导致的border-radius: 0.1rem;无效，把padding改成margin即可

3.vue中created钩子函数与mounted钩子函数的使用区别

一般creadted钩子函数主要是用来初始化数据。
mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理

4.当元素过多溢出边框的时候

可以使用overflow属性进行处理

5.native属性什么时候使用？

在我们需要监听一个组件的原生事件时，必须在对应的事件后加上.native修饰符才可以进行监听

6.监听img的加载完成情况

原生的js监听图片img.οnlοad=function(){}

vue中监听图片的加载完成情况使用事件@load

7.非父子组件之间的通信

可以使用“事件总线”的方式,首先在main.js中对 $b u s 进行定义 V u e . p r o t o T y p e .$ bus=new Vue();

然后利用this. $b u s .$ emit(‘事件名’,参数)进行事件发送，

然后用this. $b u s .$ on(‘事件名’,(参数) =>{//进行事件的接收

//这里进行业务处理

})

8.防抖动函数起作用的过程

防抖debounce

防抖函数起作用的过程：

如果我们直接执行refresh，那么refresh函数会被执行30次

可以将refresh函数传入debounce函数中生成一个新的函数

之后在调用非常频繁的时候，就使用新生成的函数

而新生成的函数，并不会频繁的调用，如果下一次执行的非常快，那么会将上一次取消掉

	debounce(functionX,delay){//functionX:方法，dealy:延时时间（单位：毫秒）
			let timer=null;
			return function(...args){
				if(timer) clearTimeout(timer)
				timer = setTimeout( () =>{
					functionX.apply(this,args);
				})
			}
		}

9.v-model的使用

https://www.cnblogs.com/mark5/p/11603428.html

10.vue中的slot与slot-scope

https://segmentfault.com/a/1190000012996217?utm_source=tag-newest

11.js的两种定时器setTimeout和setInterval的区别

setTimeout只在指定时间后执行一次，代码如下：

<script> 

//定时器 异步运行 

function hello(){ 

alert("hello"); 

} 

//使用方法名字执行方法 

var t1 = window.setTimeout(hello,1000); 

var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 

window.clearTimeout(t1);//去掉定时器 

</script>

setInterval以指定时间为周期循环执行，代码如下：

//实时刷新时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
}

总结：一般情况下setTimeout用于延迟执行某方法或功能，

setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

12.html让页面自适应不同设备的宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

手机页面中在<head></head>中加入这句话，可以让页面适应设备的宽度。

width=device-width--宽度为设备宽度，如果你的页面宽度小于设备宽度，就需要修改一下这个属性，不然的话会出现可以页面左右滑动，如ipad ios7中客户端页面。

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例   

maximum-scale - 允许用户缩放到的最大比例  

user-scalable - 用户是否可以手动缩放

13.flex属性详解https://www.cnblogs.com/xianxianxxx/p/8086554.html

14.box-shadow盒子边框阴影设置https://www.cnblogs.com/feichengwulai/articles/4788571.html

15.vant组件库地址https://vant-contrib.gitee.io/vant/#/zh-CN/

16.常用素材和插件

echarts中国地图插件https://www.cnblogs.com/demodashi/p/10492708.html

素材：码有料

地图：https://gallery.echartsjs.com/editor.html?c=xv90JyTXfG

echarts：柱状图设置https://www.cnblogs.com/lishuangyun/p/10877443.html

ehcarts的formatter属性https://www.cnblogs.com/padding1015/p/8625168.html

JQueryfuns前端资源库

学游泳的飞鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-08-25

问题1.解决多次点击导航路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 2.img图片的border-radius无效padding导致的border-radius:
复制链接

扫一扫