学习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进行定义Vue.protoType. bus进行定义Vue.protoType.bus=new Vue();
然后利用this. b u s . bus. bus.emit(‘事件名’,参数)进行事件发送,
然后用this. b u s . bus. bus.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前端资源库