ES6是JavaScript的一个版本,因为我们前面用到的vue默认使用ES6语法开发,所以我们在这一节补充ES6的知识点,先了解我们项目经常用到的ES6的一些语法。
ES6文档参考
https://www.runoob.com/w3cnote/es6-concise-tutorial.html
为了方便我们理解,直接在src/pages/index/index.vue文件中编辑,这样可以在微信开发者工具控制台中看到效果。在script部分methods中添加test方法
methods: {
addMark (add) {
this.mark = this.mark + add
console.log("mark为:",this.mark)
},
//新添加的test方法,注意上一行的逗号“,”不要落下哦~
test () {
console.log("测试方法运行成功")
}
},
//mounted是vue生命周期方法,在页面渲染完成后执行
mounted () {
this.test()
}
1)在methods中,每个方法之间需要有逗号间隔
2)mounted是vue生命周期方法,在页面渲染完成后执行,我们在mounted中执行test方法,这样每次修改test方法,都会自动执行,我们就会在微信开发者工具控制台中看到效果。
保存代码后,在项目目录中运行npm run dev
启动项目
~/WeChatProjects/truth_hold$ npm run dev
test () {
console.log("测试方法运行成功")
//let声明变量
let a = 2
{
let a = 3
console.log("第一个a:",a)
}
console.log("第二个a:",a)
}
test () {
console.log("测试方法运行成功")
//const声明常量
const b = 3
b = 2
}
保存代码之后,回到微信开发者工具,效果没有更新。这就可能是报错了,这时我们回到终端,看到返回的结果,常量被const声明了之后,就不可以修改了。
拼接字符串,可以直接在${ }里面写变量,用反引号 ` 包裹字符串。这样可以代替用加号拼接字符串
test () {
console.log("测试方法运行成功")
//字符串拼接
let name = "maoning"
console.log("第一种拼接方法:my name is " + name + "")
console.log(`第二种拼接方法:my name is ${name}`)
}
就是函数的一种简写形式
//函数普通形式
var add = function(a,b) {
return a+b;
};
//箭头函数简写形式
var add = (a,b) => {
return a+b;
};
test () {
console.log("测试方法运行成功")
//数组批量赋值
let arr = [1,2]
let [a,b] = arr
console.log("a的值为:",a)
console.log("b的值为:",b)
}
我们在src/config.js文件里面定义一个常量,通过export的意思是向外暴露接口,然后在index.vue文件中引用这个常量
//定义一个常量
const host = '[http://localhost:5757](http://localhost:5757)'
//通过export的意思是向外暴露接口
export default config
在script和export default {这两行之间,添加import导入代码
//参考代码,无需粘贴
//
//需要添加的代码
import host from '@/config'
//参考代码,无需粘贴
//export default {
test () {
console.log("测试方法运行成功")
console.log("打印出config.js文件中定义的host变量:",host)
}
一个 Promise 是一个等待被异步执行的对象。当它执行成功,状态会变成resolved;执行失败状态会变成rejected
resolved状态说明是正常执行返回的信息,rejected状态相当于抛出错误信息,会被try…catch…捕捉到
什么是异步执行?同步执行?
异步执行,就是执行某项任务时,可以在它完成之前就执行下一个任务
同步执行,就是执行某项任务时,必须等待它完成才能执行下一个任务
添加一个promiseTest方法,里面包含Promise对象。然后在test方法中调用promiseTest方法,查看返回的结果
test () {
console.log("测试方法运行成功")
//调用promiseTest方法
let promise_result = this.promiseTest(3)
console.log(promise_result)
},
//注意两个方法之间要用逗号间隔
promiseTest (num) {
var result = new Promise(function(resolve, reject) {
if (num > 2) {
console.log(`num的值为${num}`)
resolve("我执行成功了,状态变成了resolved");
} else {
console.log(`num的值为${num}`)
reject("我执行失败了,状态变成了rejected");
}
});
return result
}
在test方法中调用promiseTest方法时,参数为3,满足>2的条件,会返回resolve执行成功的结果
将参数改为1,不满足>2的条件,会返回reject执行失败的结果
async就是异步的意思,会作为一个关键字放到函数前面,用来表示函数是一个异步函数
await是等待的意思,后面常放一个promise对象。await关键字只可以放到async函数里面
在test方法前面加上async表明这是一个异步函数,创建setTime方法,里面定义一个延时器,会延时2秒执行程序,方便我们查看效果
async test () {
console.log("测试方法运行成功")
let result = await this.setTime(1);
console.log("await后面的方法执行完成后,才能执行下面的语句");
console.log(result);
},
setTime(num) {
return new Promise(function(resolve, reject) {
setTimeout(function(){
resolve("第" + num + "个延时器");
},2000)
})
}
下面我们看看代码的执行过程:
执行test异步函数,遇到了await, await 表示等一下,要等后面的setTime(1)方法执行完才能继续执行下面的代码,现在代码暂停在await这里;
开始执行setTime(1)方法,setTime(1)方法中有一个setTimeout延时器,等待2000毫秒(2秒)之后,执行resolve拿到了返回值----「第1个延时器」;
将这个返回值赋值给result,await这里的暂停结束,代码继续向下执行console.log语句。
作者:猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录