Vue js尚硅谷常用方法

于 2023-01-03 15:10:20 发布
阅读量55 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/answero/article/details/128533431
版权

1.定义变量

<!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>
</head>
<body>
    <script>
        {
 // 定义变量
        var a =1;
        let b =2;
        }
       console.log(a)
       console.log(b) //b在代码块中定义只能在代码块中使用不能在外边使用
    //    var定义可以声明多次 
    //     let定义只能声明一次
    var m = 1;
    var m = 2;
    // let n = 10;
    // let n = 20;
    console.log(m)
   console.log(n)
    </script>
</body>
</html>

2声明对象

<!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>
</head>
<body>
    <script>
        // 传统方式定义一个对象
        const name="lucy"
        const age =20
        const user1={name:name ,age:age}
        console.log(user1)
        // es6 语法 直接取值
        const user2={name ,age}
        console.log(user2)
    </script>
</body>
</html>

3定义常量

<!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>
</head>
<body>
    <script>
        // const定义常量
        // 常量定义了就不可以改变
        const PI="3.14"
        // PI = 3
        // const MY
    </script>
</body>
</html>

4定义常量const

<!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>
</head>
<body>
    <script>
        const PI="3.14"
        PI=3
        // 必须赋值 
        const MY=2
    </script>
</body>
</html>

5模板字符串

<!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>
</head>
<body>
    <!-- 模板字符串 直接用$来取值  模板中可以直接进行换行操作 -->
    <script>
        let name = "Lucy"
        let age=20
        let info = `My name is ${name},
        I am ${age+1}`
        console.log(info)
    </script>
</body>
</html>

6对象拓展运算符

<!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>
</head>
<body>
    <script>
        // 对象复制
        // 相当于复制上边的值someone1直接获取person1的值
      let person1={name:"Amy",age:15}
      let someone1 ={ ...person1}
      console.log(someone1)
    //   2.合并对象 合并两个的值
    let name ={name:"Amy"}
    let age ={age:15}
    let person2={...age,...name}
    console.log(person2)
    </script>
</body>
</html>

7箭头函数

<!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>
</head>
<body>
    <!-- 多用于匿名函数的定义
    参数=>函数体
    -->
    <script>
        // 传统方式
        // var f1 =function(a){
        //         return a
        // }
        // console.log(f1(3))
        // es6 使用箭头函数定义
        // 参数=》函数体
        var f2 =(a)=>a
        console.log(f2(4))
        // 多个参数
        var f3=function(m,n,b){
            return m=+n+b
        }
        // es6 箭头函数
        var f4 =(m,n,b)=>m+n+b
        console.log(f4(4,1,2))
    </script>
</body>
</html>

8解构赋值

<!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>
</head>
<body>
    <script>
let a =1,b=2,c=3
console.log(a,b,c)
// ES6
    let[x ,y ,z]=[1,2,3]
    console.log(x,y,z)

    // 对象解构
    let user={name:'helen',age:18}
    // 传统
    let name1 =user.name
    let age1 =user.age
    console.log(name1,age1)
    // ES6
    let{name,age}=user //注意：结构的变量必须是user中的属性
    console.log(user)
    </script>
</body>
</html>
answero
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值