码迷,mamicode.com
首页 > 其他好文 > 详细

10 Vue - ES6语法补充

时间:2021-04-30 12:02:22      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:span   简写   方法   pre   简化   es6语法   agg   code   原函数   

 let 关键字

用法跟var没区别,但规定变量必须先声明后使用(即:没有变量提升)

 

2 模板字符串

let name = "zhang"
let age = 18
let city = "beijing"
# 使用。用1前面的符号包裹字符串
let str = `姓名:${name } 年龄:${age } 城市:${city }`
console.log(str)

 

3 对象中的简化内容

let name = "zhang"
let city = "beijing"
let person = {
    # 如果属性名和变量名相同,可以简写
    name,  // 相当于name:name
    city,  // 相当于city:city
    # 方法可以写为以下方式
    sayHello(){
        console.log("hello")
    }
}

 

4 箭头函数(可以解决axios请求this赋值that问题)

  • 原则
function 省略掉,替换为 =>
参数只有一个时,可以省略()
函数体只有一行时,可以省略{}
函数体只有一行,并且有返回值时,如果省略了{},必须省略return
  • 无参数,一行代码,无返回

原函数
let func1 = function(){
    console.log("hello")
}
箭头函数
let func1 = () => console.log("hello")
  • 一个参数,一行代码,无返回
原函数
let func2 = function(p1){
    console.log(p1)
}
箭头函数
let func2 = p2 => console.log(p1)
  • 2个参数,多行,无返回
原函数
let func3 = function(p1,p2){
    console.log(p1)
    console.log(p2)
}
箭头函数
let func3 = (p1,p2) => {
    console.log(p1)
    console.log(p2)
}
  • 无参数,一行,有返回
原函数
let func4 = function(){
    return "hello"
}
箭头函数
let func4 = () => "hello"
  • 一个参数,一行,有返回
原函数
let func4 = function(p1){
    return p1 + "hello"
}
箭头函数
let func4 = p1 => return p1 + "hello"
  • 2个参数,多行,有返回
原函数
let func5 = function(p1,p2){
    console.log(p1,p2)
    return p1 + p2
}
箭头函数
let func5 = (p1,p2) => {
    console.log(p1,p2)
    return p1 + p2
}

 

10 Vue - ES6语法补充

标签:span   简写   方法   pre   简化   es6语法   agg   code   原函数   

原文地址:https://www.cnblogs.com/lizitestdev/p/14717808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!