遇到的一些问题
1.git传输时报错
问题: fatal: Not a git repository (or any of the parent directories): .git 问题。
解决:在命令行 输入 git init 然后回车就好了。
2.图片路径问题。
问题：组件页面未获取到图片
解决：因为在vue.config.js文件中设置了文件别名，设置如下
const path = require('path'); //引入path模块
function resolve(dir){
return path.join(__dirname,dir) //path.join(__dirname)设置绝对路径
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
//set第一个参数：设置的别名，第二个参数：设置的路径
.set('@',resolve('./src'))
.set('assets',resolve('./src/assets'))
.set('components',resolve('./src/components'))
.set('network',resolve('./src/network'))
.set('views',resolve('./src/views'))
}
}
在组件页面图片路径前需要加上@才行，这只是针对图片。
<tab-bar-item path="/home">
<img slot="item-icon" src="@/assets/img/tabbar/home.png" alt="">
<img slot="item-icon-active" src="@/assets/img/tabbar/home_active.png" alt="">
<div slot="item-text">首页</div>
</tab-bar-item>
而在引用vue文件时则不需要
<script>
import TabBar from 'components/common/tabbar/TabBar'
import TabBarItem from 'components/common/tabbar/TabBarItem'
</script>
3.手机端滚动加载效果
问题:解决手机端上拉加载解决
解决：使用BetterScroll插件
需要安装导入bscroll文件，值得注意的是 最外层使用的类名标签里面只能放一个元素标签，如下方例子中所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
height: 200px;
background-color: brown;
overflow: hidden;
}
</style>
<script src="./bscroll.js"></script>
</head>
<body>
<!-- 最外层使用的类名标签里面只能放一个元素标签 -->
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
const bscroll = new BScroll(document.querySelector('.content'), {
// probeType侦测
// 0，1都是不侦测实施的位置
// 2：在手指滚动的过程中侦测，手指离开后的惯性滚动时不侦测
// 3:只要是滚动，都侦测
probeType:2,
// 滑到最底时上拉加载
pullUpLoad:true
});
// bscroll.on('scroll',(position)=>{
// console.log(position);
// })
bscroll.on('pullingUp',()=>{
console.log('上拉加载更多');
// 因为上拉加载更多只是调用一次，
// 当到最下面时发送网络请求，请求更多页数据
// 等请求完成，并将新的数据展示出来后
setTimeout(()=>{
bscroll.finishPullUp()
},2000)
})
console.log(bscroll);
</script>
</body>
</html>
4.Boolean类型转换问题
打印结果全为false
1.String:只有非空字符串为真
2.Number:除了0和NaN之外都为真
3.Boolean：true为真
4.Object：除了null之外为真
5.undefined为false
<script>
debugger
var test = new Boolean();
document.write(test);
document.write("<br/>")
var test = new Boolean(0);
document.write(test);
document.write("<br/>")
var test = new Boolean(null);
document.write(test);
document.write("<br />")
var test = new Boolean("");
document.write(test);
document.write("<br />")
var test = new Boolean(NaN);
document.write(test);
document.write("<br />")
</script>
5.异步打印
打印结果全5
<script>
for(var i =0;i<5;i++){
setTimeout(function(){
console.log(i);
},1000*i)
}
</script>
6.form表单提交会发生页面刷新
为form表单添加阻止默认事件。
<form @submit.prevent="add">
7.Dom尚未渲染，$refs引用不了
案例:点击按钮显示输入框，输入框显示后获取焦点按钮消失;
问题:使用了v-if对框和按钮进行了显示与隐藏，给input添加了ref属性，但当调用 this.$refs.iptRef.focus()时会报错，检查到当调用了showInput方法中的this.inputVisible = true;值已经发生了改变，但此时Dom尚未渲染，所以使用this.$refs.iptRef ，iptRef会undefind。
解决办法:使用 this.$nextTick()进行回调,期间还想到了使用生命周期中的updata，但此方法行不通,因为当点击显示的时候，input显示，此时有$refs属性，但当再次点击时，会隐藏，此时没有input，所以不存在$refs，会报错。
错误:
updated(){
// console.log(this.$refs)
this.$refs.iptRef.focus();
}
案例：
<h5>按钮和文本框的输入</h5>
<input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
<button v-else @click="showInput">输入框切换</button>
data() {
return {
inputVisible:false
};
},
showInput(){
this.inputVisible = true;
// this.$refs.iptRef.focus()
this.$nextTick(()=>{
this.$refs.iptRef.focus()
})
},
showButton(){
this.inputVisible = false
}
console.log('A')
async function getAllFile(){
console.log('B')
const r1 = await thenFs.readFile('./files/1.txt','utf8')
const r2 = await thenFs.readFile('./files/2.txt','utf8')
const r3 = await thenFs.readFile('./files/3.txt','utf8')
console.log(r1,r2,r3)
console.log('D')
}
getAllFile()
console.log('C')
正确执行结果:A B C r1 r2 r3 D
理解： await等到之后，如果不是promise，await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为await表达式结果。
如果不是promise，await也会暂停async后面的代码，先执行，async外面的同步代码，等着promise对象fulfilled。然后把resolve的参数作为await表达式的运行结果。
碰到await 后边的代码都会异步执行，主线程退出当前方法的执行， 进行同步代码执行，接着主线程再进行异步执行。
async/await中真正起作用的是await，async关键字，无论从哪个方面来看，都不过是一个标识符，毕竟函数如果不包含waait关键字，器质性基本上跟普通函数没有区别。
