$vue项目中的写法$

最新推荐文章于 2024-09-30 14:28:41 发布

‌Aurora

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量613

点赞数 19

文章标签： vue.js

本文链接：https://blog.csdn.net/2402_82657845/article/details/141336193

版权

【vue项目中的写法】

【1】let、const

# let :定义变量
# const ：定义常量
------块级作用域----
# var 以后尽量少用，用它声明的都是全局作用域

# 在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

# ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束


# "暂时性死区"（Temporal Dead Zone，简称 TDZ）是指在 ES6 中使用 let 或 const 声明变量时，变量存在但无法访问的区域。这种行为是为了在 JavaScript 中引入块级作用域而设计的。

# 在 JavaScript 中，使用 var 声明的变量在其声明语句之前就可以被访问，这种行为称为"变量提升"。而在使用 let 或 const 声明变量时，变量虽然存在于作用域中，但是在声明语句之前访问这些变量会导致引发 ReferenceError 异常。
	# 下面是例子	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>

</body>
<script>
    function one(){
        console.log(two)
         var two=76 // 得到的是undefined
         let two=76 // 会报错
    }
    one()
</script>
</html>

# 暂时性死区的产生原因是，let 和 const 声明的变量在进入作用域时就已经被创建，并且被绑定到了该作用域中，但是在变量的声明语句之前，访问这些变量会进入暂时性死区，因为此时变量尚未初始化


# python的LEGB---》查找顺序

【2】箭头函数

简化了代码
想了解细节的话，笔记里面写了

# 记住一句话：箭头函数内部没有自己的this---使用上一级

【3】this指向的问题

在全局上下文中，this之现象全局对象[可以放值取值]
- 放值取值：
在浏览器环境中通常是window对象，在Node.js中是global对象

函数调用：

如果函数作为普通函数调用，this指向全局对象（在严格模式下为undefined）
- 什么是严格模式：是 JavaScript 中的一种运行模式，它通过对语言的某些特性进行限制或改进来帮助开发者写出更安全、更规范的代码
- ```
<script>
    function one(){
        console.log(this)
        // window对象
    }
    one()
</script>
```
如果函数作为对象的方法调用，this指向该方法的对象
- 尽头函数内部没有this，会往上找

<script>
    let this_one = {
            name: "jack",
            age: 18,
            one: () => {
                // 这里的this就是window对象
                console.log(this)
            },
        two: function(){
                // 这里的this是one的对象
            console.log(this)
        }
        }

    this_one.one()
    this_one.two()
</script>

只要记住：箭头函数没有this，会往上找，找不到就是window（在严格模式下为undefined）
箭头函数的 this 指向定义时所在的作用域的 this 值，而不是调用时的 this 值。换句话说，箭头函数的 this 是词法作用域，而不是动态作用域
在 ES6 类方法中，this 指向调用该方法的对象实例

【4】模板字符串

插值表达式

const name = "Alice";
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

【5】解构赋值

解构赋值允许从数组或对象中提取数据，并将其赋值给变量
如果结构的值在对象中没有，就会的到undefind，可以赋初值
解构赋值可以方便地交换变量的值，同时还支持默认值

<script>
    // 解对象
    let resume={name:"lsk",age:18,hobby:["dance","sing"]}
    // 这里必须是个大括号
    // 可以赋初值
    let {name,age,one=666,hobby,two}=resume
    console.log(name) // lsk
    console.log(age) // 18
    // 也可以用作赋值
    console.log(one) // 666
    hobby.pop()
    // 就会将最后一个给pop掉
    console.log(hobby)// [["dance"]
    console.log(two) // undefined
    
    // 解数组
        let data=[67,11,99]
        let [a,b]=data
        console.log(a) //67
    	console.log(b) //11
    // 结构函数返回值
    	function l(){
        return {name:"lsk",age:18,hobby:["dance","sing"]}
        }
        let {name,age,hobby}=l()
        console.log(name) // lsk
        console.log(age) // 18
        console.log(hobby) // ["dance","sing"]
</script>

【6】默认参数

ES6 允许在函数参数中设置默认值，当调用函数时未提供参数时，将使用默认值

function dom(name,age=22){
        console.log(name)
        console.log(age)
    }
// 没有传age，使用默认的
dom('lsk')

【7】展开算法

记住展开算法的符号...
可以将可迭代对象（如数组，字符串，对象）展开为多个参数或元素，也可以用作函数的参数

    // 对象
    let l = {name: "lsk", age: 18}
    let i = {hobby: ["dance", "sing"],...l}
    console.log(i) //{hobby:["dance","sing"],name:"lsk",age:18}
    // 列表
    let l = [1,2,3,4]
    let i = [5,6,7,8,...l]
    console.log(i) // [5,6,7,8,1,2,3,4]
    // 函数
    function l(a,...b){
        console.log(a) // 接受一个值
        console.log(b) // 接收剩下的所有
    }
    // 方法一
    // l(1,2,3,4,5,6,7)
    //方法二
    let i=[1,2,3,4,5,6,7]
    l(...i)

【8】模块化

（1）默认导入和导出

// 创建一个one.js文件 导出
// 定义一个常量
const NAME='lsk'
// 又名函数
function add(a,b){
    return a+b
}
// 默认的导出对象只能有一个
export default {NAME,add,dmo(){
        console.log("lsk")
    }}


// 在其他的vue的js里面使用
import one from "@/lsk/one";

// 

console.log(one.add(1,2))
console.log(one.NAME)
one.dmo()

（2）命名导入导出

// 命名导出
function dom1(){
    console.log('dom1')
}
function dom2(){
    console.log('dom1')
    dom1()
}
export const f=dom2
export const NAME='lsk'


// 导入
// 方式一
// import {f,NAME} from "@/lsk/one";
// 方式二
import * as a from "@/lsk/one";
// 这个a是一个对象
a.f()
console.log(a.NAME)

（3）导入路径

如果在一个文件夹下，js的名字为index.js，你只需要导入到这一层的文件就可以

import index from "@/lsk";

console.log(index.add(1,2))
console.log(index.NAME)
index.dmo()

@的意思就是当前的是src文件路径

# import index from "@/lsk"; 和 import index from "./lsk/index.js"; 一样

定制别名

import one from "@/lsk/one";
// 这个import后面的one只是一个你别名，可以自定义定制

起别名

import {f,NAME as a} from "@/lsk/one";
// 给NAME起别名叫a

（4）module使用

这个方法是在html中是使用的

// 定义一个js文件
export default {
    function dom1(a,b){
    return a+b
	}}


// 在html中使用
// 如果不加上type="module"就会就会报错，加上就不会
<script type="module">
    import lsk from './lsk'
    console.log(lqz.dom1(4,5))
</script>
// 给NAME起别名叫a

（4）module使用

这个方法是在html中是使用的

// 定义一个js文件
export default {
    function dom1(a,b){
    return a+b
	}}


// 在html中使用
// 如果不加上type="module"就会就会报错，加上就不会
<script type="module">
    import lsk from './lsk'
    console.log(lqz.dom1(4,5))
</script>