一.操作dom错误
1. UncaughtTypeError:document.getElementsByClassName(...).addEventListener is not a function
原因:
选择器没有正确选择元素对象
document.getElementsByClassName(…)捕捉到的是该类名元素的数组
解决方法
document.getElementsByClassName(…)[0].addEventListener…
通过 [0] 选定需要的元素对象
与之相似的还有document.querySelectorAll('选择器'),返回的也是个伪数组,注意用下标取值后才能进行操作
2.Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')
报错信息,在说undefined没有 innerHtml 这个属性
原因:操作dom时 , 没有获取到dom对象, 得到的是undefined 解决方法: 找到innerHTML前面的dom元素, 查看自己是否真的获取到
注意:
document.querySelectorAll('选择器')选择器基本与css保持一致 在获取类名选择器及id选择器时不要忘了前面的 . 和 #,否则获取不到,返回undefined,会出现以上报错
二.发起接口错误
1.Failed to load resource: the server responded with a status of 404 (Not Found)
原因:报404,客户端出现问题,一般情况都是因为接口地址没有调正确
最常见错误,多打个字母,多个空格等
如:
解决方案:
检查接口路径是否正确,尽量直接复制黏贴接口文档中的路径
三.不了解语法特性所引起的bug(非报错bug)
1.数组.push()语法了解不透彻
const fs =require('fs')
const path = require('path')
let url = path.join(__dirname, 'db','data.json')
let arr = JSON.parse(fs.readFileSync(url, 'utf8'))
console.log(arr);
newArr = arr.push({ name:"小张" })
console.log(newArr);
fs.writeFileSync(url,JSON.stringify(newArr))
原因: 数组.push()方法返回的添加后新数组的长度,而不是新数组,理解错了,就会导致后面一系列问题如上: newArr打印出来是数组长度,那变量接收到的是长度,不是新数组,导致写入的文件为一个数字
解决方案: 数组.push()后原数组已经发生变化,直接用就可以
const fs =require('fs')
const path = require('path')
let url = path.join(__dirname, 'db','data.json')
let arr = JSON.parse(fs.readFileSync(url, 'utf8'))
console.log(arr);
arr.push({ name:"小张" })
fs.writeFileSync(url,JSON.stringify(arr))
2.对象字符串拼接后,数据会改变
自己用express写的接口,用jsonp方式,给前端传一个fn()函数,里面传要给前端的数据:
前端报错信息:
原因:对象经过字符串拼接后,会发生变化,测试demo:
模板字符串也一样的原理,相当于进行了拼接,前端拿不到我们想传的数据
解决方案: 把我们的数据,转为json字符串
四.vue相关
1.父子通信时,vue规定子组件不能直接改父组件传过来的值
原因:子组件直接改了父组件传来的值,就会出现上述报错
解决方案:不建议直接改值,可通过$emit()进行子向父的通信,让父亲来改
补充:父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新；但不能改变引用地址
2.计算属性改值时,需要用完整写法
原因:计算属性,如果只通过逻辑计算获取值时,可简写,当需要改计算属性的值时,需用它的完整写法
简写形式:
computed: {
"计算属性名" () {
return "值"
}
}
解决方案:用他的完整写法,改值时,走set这个回调,并接收值,获取值时走get这个回调
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
3.重复导航引起错误
原因: 当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由,会报错
当前url的hash值
要跳转的hash地址
this.$router.push({
path:'/move',
query:{
id:100,
name:'阿洋'
}
})
解决方案:
方案一: 用catch语法,捕获错误
this.$router.push({
path:'/move',
query:{
id:100,
name:'阿洋'
}
}).catch(err=>err)
方案二: 添加时间戳,每次hash都不会重复
this.$router.push({
path:'/move',
query:{
id:100,
name:'阿洋',
t:Date.now()
}
})
缺点就是传参,会带上时间
