Vue3入门之必会的前置知识总结
作者：李小白66
1.变量和常量
概念介绍
变量: 可以变化的,可以对其多次赋值
常量: 不可变的,不能对其二次赋值,否则会报错
let 声明变量
const 声明常量
代码演示
<script>
//变量
let name = "XiaoBai"
let age = 10
name = "XiaoHei"
age = 20
//常量
const PI = 3.14
const articleList = []
const user = {
name: 'v',
age: 9
}
</script>思考
• const 声明的数组可以添加或删除么？
• const 声明的对象可以添加或修改属性么？
答：可以的，因为数组和对象在JS中属于引⽤类型, 对其做添加、删除等操作, 并不改变其内存地址。只要不改变地址,那么就对其没有影响
const arr = [1,2,3]
//添加
arr.push(4)
console.log(arr)
//删除: shift是删除数组的第一个元素
arr.shift()
console.log(arr)
//
const obj = {
name: 'vue',
age: 9
}
//添加属性
obj.birth = 2019
console.log(obj)
//修改属性
obj.age = 23;
console.log(obj)和内存的关系
2. 模板字符串
概念介绍
普通字符串: 用一对单引号或者双引号申明的
模板字符串: 用一对反引号声明 ``
//普通字符串
let nem = 'ja'
let msg = "Hello"
//模板字符串
let name = `hehi`
let ms = `yes `使用模板字符串的好处
1> 可以任意换行
2> 在字符串中方便嵌入表达式. ${表达式}
//好处
//普通字符串无法换行,所有内容都得写在一行
let htmlStr = '<div class="niubi"><h1>6666</h1><p>黑盒</p></div>'
//反引号可以换行
let htmlStr2 = `<div class="niubi">
<h1>6666</h1>
<p>黑盒</p>
</div>`
let name = "xiaohei"
let age = 9
// let str = "My name is xxx, I am xxx years old, I am 已成年 or 未成年"
let str = 'My name is ' + name + ', I am ' + age + ' years old, I am ' + (age >= 18 ? '已成年' : '未成年')
console.log(str)
//反引号嵌入表达式
let str2 = `My name is ${name}, I am ${age} years old, I am ${age >= 18 ? '已成年' : '未成年'}`
console.log(str2)3. 对象
概念介绍
对象: 一个个的具体的个体. 对象 = 属性 + 方法,一堆属性和方法的集合
取值: 点/中括号
点取值: 对象名.属性名
中括号取值: 对象名['属性名']
能够通过点取值一定可以通过中括号取值,反之不行
<script>
const obj = {
name: 'vue',
age: 4
}
//点取值: 对象名.属性名
console.log(obj.name)
console.log(obj.age)
//中括号取值: 对象名['属性名']
console.log(obj['name'])
console.log(obj['age'])
//注意: 当属性名称是字符串的时候,只能用中括号取值
let x = 'name'
let y = 'age'
//对象名[字符串属性]
console.log(obj[x])
console.log(obj[y])
//我们的当前对象是没有x和y这个属性的
console.log(obj.x)//undefined
console.log(obj.y)
</script>运行结果
简写: 当对象的属性名和属性名字一样的时候,可以只写一个,通常会配合变量使用.
方法的简写, 对象里面的方法,是可以省略function的
let min = 1;
let max = 100;
//不简写
const obj = {
min: min,
max: max//前面的是属性名,后面的是属性值
}
console.log(obj)
//简写
const obj2 ={
min,
max
}
console.log(obj2)
//方法的简写
// const o = {
// name :'xiao',
// age:9,
// fn: function(){
// }
// }
const o = {
name: 'xiao',
age: 9,
fn() {
}
}
o.fn4. 解构赋值
概念介绍
解构赋值: 根据一定的结构从数组或对象中快速取值
目标: 数组或对象
作用: 让数组或者对象的取值更加便捷
数组解构
1> 通过,进行元素的跳过
2> 通过..表示对剩余元素的操作
//数组的解构
const arr = [1,3,6]
//eg1:把数组中的三个元素分别赋值给a,b,c
//老办法
// let a = arr[0]
// let b = arr[1]
// let c = arr[2]
// console.log(a,b,c)
//通过解构: a,b,c是不能交换位置的
// let [a,b,c] = arr;
// console.log(a,b,c)
//eg2: 把arr中的后俩个元素分别赋值给b,c
//通过,来跳过元素
// let [,b,c] = arr
// console.log(b,c)
//eg3: 把arr中的第一个给变量a,第三个元素给变量c
// let [a,,c] = arr;
// console.log(a,c)
//eg4: 把arr中的第一个给变量a,其他元素给到一个数组里
// ...表示对剩下的元素进行操作
let[a, ...rest] = arr
console.log(a,rest)练习:
不管这个数组有多么深,我们只要位置匹配上即可
const arr = [2,[3, 4],5]
// 1、把 arr 中的3, 4赋值给变量 a,b
let[,[a,b],] = arr;
console.log(a,b)对象解构
1> 数组是有序的变量的顺序是不能进行改变的,而我们的对象里面的属性是没有顺序的,因此顺序随意
2> 数组是[],对象是{}
3> 只取一部分的属性值,不需要用逗号来进行占位,直接取即可
4> 操作剩余元素,我们用 ... 来代替剩余元素
5> 当对象的属性名和属性名字一样的时候可以简写,不一样的时候要写全
const obj = {
name: 'xiaobai',
age: 9,
address: "湖南长沙"
}
// eg1: 把 obj 的3个属性值分别赋值给变量 name, age, address
//以前的写法
// let name = obj.name
// let age = obj.age
// let address = obj.address
//现在对对象进行解构
//数组是[],对象是{}
// let{name,age,address} = obj //这个是简写写法,因为属性和value名称一致,完整写法: let{name : name,age: age,adress:adress}
// console.log(obj)
//完整写法
// let{name : name,age: age,adress:address}={
// name: 'xiaobai',
// age: 9,
// adress: "湖南长沙"
// }
// console.log(name,age,address)
// eg2: 把 obj 的 name, age 属性值赋值给变量 name, age
//数组是有序的变量的顺序是不能进行改变的,而我们的对象里面的属性是没有顺序的,因此顺序随意
//只取一部分,不需要用逗号来进行占位,直接取即可
// let{age,name} = obj
// console.log(name,age)
// eg3：把 obj 的 name 属性值赋值给变量 name, 剩余的赋值给变量 rest
// let{name,...rest} = obj
// console.log(name,rest)
// eg4: 把 obj 的 name 属性值 赋值给变量 uname
//当对象的属性名和属性名字一样的时候可以简写,不一样的时候要写全
let{name: uname} = obj
console.log(uname)练习:
如果对象里面还嵌套其他对象,那么我们层层进行解构即可
const obj = {
data: {
code: 10000,
message: '频道列表获取成功',
result: ['HTML', 'CSS', 'JavaScript', 'Vue', 'SprintBoot']
},
status: 200,
statusText: 'Ok'
}
// 解构拿到data
let{data}=obj
//再解构data
let{code,message,result:list}=data
console.log(code,message,list)5. 箭头函数
概念:
箭头函数是对普通函数的一种简写
语法: const 方法名称 = (参数列表) => {};
const fn = ()=>{
}
const add = (x,y) =>{
return x + y;
}
const rs = add(2,4)
console.log(rs)特性:
1> 当参数只有一个的时候,可以省略小括号
2> 当函数体只有一句话的时候,可以省略大括号,此时箭头函数自带return 功能
3> 当直接返回一个对象的时候,简写的时候,为了不产生歧义,我们需要给对象加上一对小括号
//2. 特性
//2.1 当参数只有一个时候,可以省略小括号
const log = arg => {
console.log(arg)
}
log(123)
log("字符串")
//2.2 当函数体只有一句话的时候,可以省略大括号,此时箭头函数自带return功能
const add = (x, y) => x + y
console.log(add(1, 3))
//2.3 当直接返回一个对象时,为了简写,需要给对象加一对小括号
// const state = () => {
// return {
// token: '123',
// userInfo: {
// name: 'xiao',
// age: 19
// }
// }
// }
//进行简写
const state = () =>
({
token: '123',
userInfo: {
name: 'xiao',
age: 19
}
})
//加上小括号是告诉编译器这个是我对象的花括号,不是函数体的花括号
console.log(state())应用: 可⽤于普通函数的声明, 也多⽤于回调函数传参
回调函数（Callback Function）是指通过函数作为参数传递给另一个函数，并在适当的时机由被调用的函数执行的函数。
//3. 应用
// setTimeout(function(){
// console.log(123)
// },1000)
setTimeout(()=>{
console.log(123)
},1000)6. 数组的重要方法
概念:
数组: 用来存放相同类型的一组数据, 用来管理一组有序的集合
语法: const 数组名 = [元素1,元素2] const arr = [11,22,33]
往数组添加元素(头尾)
push(): 尾部添加
unshift(): 头部添加
const arr = [11, 22, 33]
//添加
//尾部添加
const len = arr.push(78)
//首部添加
arr.unshift(90)
console.log(len,arr)
往数组删除元素(头尾)
pop(): 尾部删除
shift(): 头部删除
//删除 pop()尾部删除
const last = arr.pop()
console.log(arr,last)
//头部删除
const first = arr.shift();
console.log(arr,first)
任意位置删除和添加(常用)
splice(startIndex,delCount,...addItem)
startIndex: 起始下标(从哪开始操作)
delCount: 删除元素的个数
addItem: 要添加的元素
const temp = arr.splice(1,1);//从第二个元素开始删除, 删除1个
console.log(arr,temp)
arr.splice(2,0,44)//从第三个元素,删除0个元素,在第三个元素加上44
console.log(arr)数组是否包含这个元素
includes(): 包含就返回true, 否则就返回false. 通常配合if语句做判断
//包含
console.log(arr.includes(33))
console.log(arr.includes(0))数组的遍历 for-each
const arr = [11,22,33,44]
遍历: 把数组中的每一个元素访问一遍
以前: for
现在: for-each
arr.forEach((item,index,array)=>{})
item: 数组每次取的元素, index: 元素在数组的下标, array: 数组
注意: forEach()只遍历数组, 没有返回值,三个参数可写可不写,用到就写上
//遍历
//for
for(let i = 0; i < arr.length;i++){
console.log(arr[i])
}
//for-each
arr.forEach((item,index,array)=>{ //箭头函数
//item: 每次遍历的元素
//index: 当前元素在数组中的下标
//array: 遍历数组本身
console.log(item,index,array)
})数组的过滤 filter()
过滤/筛选: 保留数组的一部分元素, 去掉一部分元素
filter()
arr.filter((item,index,array) => {
//返回布尔值; 返回true就保留; 否则就去掉
})
//过滤
const arr = [11, 22, 33, 99]
arr.filter((item,index,array)=>{
console.log(item,index,array)
})
//保留偶数, 去除奇数
const evenArray = arr.filter((item) => {
if (item % 2 == 0) {
return true;
} else {
return false;
}
})
//简化
const evenArray = arr.filter((item) => {
return item % 2 == 0
})
//箭头函数进一步简化
const evenArray = arr.filter((item) => item % 2 == 0)
console.log(evenArray)小练习: 保留arr里面大于30的元素
//箭头函数进一步简化
const evenArray = arr.filter((item) => item % 2 == 0)
console.log(evenArray)
//把arr中大于30的数留下
const biger = arr.filter((item) => item > 30)
console.log(biger)数组的映射 map()
映射: 由一个数组得到另一个数组, 二者满足俩个条件:
1. 俩个数组长度一致(元素个数一致)
2. 新数组中的每个元素可以由源数组一一对应
arr.map((item,index,array) => {
return 新值
})
//映射
const arr = [11, 22, 33, 44]
//[22,44,66,88],每个元素翻倍
// arr.map((item,index,array)=>{
// })
//省去{}自带返回
const newArr = arr.map((item) => item * 2)
console.log(newArr)
//需求: 得到一个对象数组
// const a= arr.map((item, index) => {
// return {
// index,
// value: item
// }
// })
//简写
const a = arr.map((item, index) => ({ index, value: item }))
console.log(a)练习里面的结果
数组检测每一个every()
检测每一个: 检测数组中每个元素是否都返回条件, 如果都满足就返回true, 只要有一个不满足就返回false, 立即结束执行
arr.every((item,index,array) => {
return 布尔值;//如果返回ture则说明当前元素满足条件,则继续下一次的检测; 否则, 说明当前元素不满足条件, 则立即结束执行,返回false
})
//检测每一个
const arr = [11, 22, 33, 44]
// arr.every((item,index,array)=>{
// //consele.log只会打印一次, 因为返回的是undefied,就是false
// console.log(index,item,array);
// })
//检测每一个元素是否都是奇数
let a = arr.every((item) => {
console.log("打印次数")//俩次
return item % 2 === 1
})
console.log(a)
//需求: 检测数组元素是否都大于10
let b = arr.every((item) => {
console.log("打印次数")//4次
return item > 10
})
console.log(b)数组汇总 reduce()
汇总: 常用语数组求和, 但不限于求和
array.reduce((prev,current,index,array) => {
prev 第一次会被初始值赋值, 第二次就是根据return 语句的返回值进行复制
return 结果;
}, 初始值)
//数组汇总
const arr = [11, 22, 33, 44]
let sum = 0
//以前用forEach进行遍历
arr.forEach(item => {
sum += item
})
// console.log(sum)
//使用reduce进行求和
const s = arr.reduce((prev, item, index, array) => {
console.log(prev, index, item, array)
return prev + item;
//prev第二次开始的值取决于函数体的返回值,如果没有的话,后续就都是undefined
}, 0)//第一次循环的时候这个0就是给prev赋值
console.log(s)
//简写
arr.reduce((prev, item, index, array) => prev + item, 0)
const goodsList = [
{ id: 1, name: '篮球', num: 1 },
{ id: 2, name: '玩具', num: 3 },
{ id: 3, name: '书籍', num: 2 }
]
//求对象数组, 求商品的总数
const s1 = goodsList.reduce((prev, item) => prev + item.num, 0)
console.log(s1)小结: forEach, filter, map, evey , reduce 里面的参数都是回调函数, 都会对数组进行遍历
xx.xx((prev,item, index, array)=>{return xx},初始值) =>主要是写了reduce的结构
7. 对象的重要方法
Object.keys(): 用来获取对象的键,然后形成数组, 从而可以很灵活的遍历对象
之前使用 for-in来进行遍历对象
现在使用 Object.keys()+forEach()来遍历对象 => Object.keys 里面返回的是键形成的数组,我们后续可以对数组进行很多操作,更加灵活
const obj = {
id: 1234,
name: "小白",
age: 22,
address: "xxxx"
}
//使用for in 循环
for (let key in obj) {
// console.log(key, typeof key)
console.log(key, obj[key])
}
//使用Object.Keys+forEach来获取key的数组
Object.keys(obj).forEach((key) => {
// console.log(key)
console.log(key, obj[key])//根据键来进行取值
}) //把obj四个熟悉值放在数组里面,然后返回一个数组,我们再使用数组进行遍历
//需求: 只遍历 obj 中以字母 a 开头的属性
let a = Object.keys(obj);//a = ['id','name','age','address']
let tem = a.filter((item) => item.charAt(0) === 'a')
console.log(tem)
//使用startsWith()方法获取第一个元素
let tem2 = Object.keys(obj).filter((key) => {
return key.startsWith('a')
})
console.log(tem2)
a.forEach((item) => {
console.log(item, obj[item])//取出每个键里面的value
})8. 拓展运算符
...
作用
1> 在解构那里,扩展运算符被用来当作剩下的元素
2> 复制数组或对象
3> 合并数组或对象
//1. 复制数组或对象
//数组
//复制: 也叫拷贝/克隆/备份, 长得一样, 但是不会相互影响
// const arr1 = [11,22,33]
// const arr2 = arr1;
// arr2.push(44)
// console.log(arr1)//arr1收到影响,因为数组是引用类型
//arr1复制一份给arr2,二者值一样, 但是地址不一样,不会相互影响
const arr1 = [11,22,33]
const arr2 = [...arr1]//在数组前加三个点, 就会把数组里面的元素全部取出来
arr2.push(44)
console.log(arr1)//arr1收到影响,因为数组是引用类型
console.log(arr2)
//对象 把1的对象都给2, 然后1,2对象里面的地址不一样,相互独立
const obj1 = {
id : 1234,
name : '小白',
age : 22
}
const obj2 = {
...obj1
}
obj2.age = 0;
console.log(obj1)
console.log(obj2)
//2. 合并数组或对象
//数组
const ar = [1,2,3]
const ar2 = [4,5,6]
const ar1 = [...ar2,...ar]
console.log(ar1)
//对象
let obj = {
age :10,
sex : '女',
calss :'vue3'
}
//同名的后面会覆盖前面
let merge = {
...obj1,
...obj
}
console.log(merge)引用的是一个对象,因此修改引用里面的元素,都会影响
9. 序列化和反序列化
序列化: 把对象转化为json字符串
json格式: 格式很严格. json数据格式的属性名必须使用双引号; 字符串类型必须用双引号
序列化的语法: JSON.stringify(对象),这样就可以把对象转化为json字符串
反序列化: 把json字符串恢复为对象
反序列化的语法: JSON.parse(json格式字符串), 这样就可以把json字符串转化为对象
//普通对象
const obj = {
id: 100,
name: 'xoao',
age: 9
}
//json格式
const s = `{
"id": 200,
"name": "xia",
"age": 8
}`
//序列化
console.log(JSON.stringify(obj))
//反序列化
console.log(JSON.parse(s))
10. Web存储
Web存储: 相当于一个本地数据库, 不超过5M即可. 它可以把一些数据,比如用户的凭证存储在前端
1> sessionStorage: 始于浏览器打开, 终止于窗口的关闭或浏览器的关闭(存储的时间比较短)
2>localStorage: 做到持久化存储, 只要不手动删除, 数据就会永久存储
以localStorage为例子:
存: localStorage.setItem('key','value')
取: localStorage.getItem('key')
删: localStorage.removeItem('key')
注意: 如果要在本地存储数组或对象, 我们必须经过序列化和反序列化
//存 持久化存储
localStorage.setItem('username','小白')
//取
//如果存在Key,就取出数据, 如果为没有则为null
//
console.log(localStorage.getItem('username'))//通过key值取得value
//删
localStorage.removeItem('username')
//数组和对象的存储
const obj = {
id: 100,
name: 'xoao',
age: 9
}
//存对象 序列化
localStorage.setItem('小白',JSON.stringify(obj))
//取对象 反序列化
//没有反序列化, 打印出来是一个字符串
console.log(localStorage.getItem('小白'))
//反序列化后, 打印出来是一个对象
let obj1 = JSON.parse(localStorage.getItem('小白'))
console.log(obj1)存储到的地方
序列化,反序列化取值过程
11. Promise+ Asnc/Await
Promise:
1. 为什么要Promise -> 为了消除回调地狱
需求: 延迟2s后输出1,然后延迟1s输出2.再延迟1s输出3
//1. 为什么要promise
//需求: 延迟2s后输出1,然后延迟1s输出2.再延迟1s输出3
// setTimeout(()=>{
// console.log('setTimeOut')
// },3000)//延迟时间,延迟3s后指向函数体的内容
//同步代码: 串行执行, 前面的代码先执行, 后面的代码后执行.
// 异步代码: 并行执行, 大家同时开始执行, 后面的代码不会等待前面的代码执行完毕才执行
setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2)
setTimeout(() => {
console.log(3)
}, 1000)
}, 1000)
}, 2000)
//回调地狱: 回调函数的嵌套
//为了消除回掉地狱, Promise就出现了这个代码,我们可以看出, 打印的顺序是乱的, 并没有按照写的顺序来, 这个和同步代码,异步代码有关系.
同步代码: 串行执行, 前面的代码先执行, 后面的代码后执行.
异步代码: 并行执行, 大家同时开始执行, 后面的代码不会等待前面的代码执行完毕才执行
此时顺序不一样, 就是和异步代码有关系
此时一个解决办法就是,把setTimeOut()这个方法嵌套执行, 变成同步执行, 但是如果我们想要按照顺序执行很多个数, 那么就会嵌套很多层, 此时代码可读性很差.=> 回调地狱: 回调函数的嵌套.
为了消除回掉地狱, Promise就出现了
2.Promise的基本概念
JS新增的一个类, 用来解决回调地狱(异步嵌套问题). 通过异步成功还是失败, 决定Promise的状态时成功还是失败. Promise 支持链式调用, 用来消除回调地狱
3. Promise的3种状态
1> Pending : 进行中, 此时Promise的状态还不确定
2> Fullfilled: 成功(状态确定了)
3> Rejected: 失败(状态也是确定的)
Promise的状态一旦确定, 就不可以改变了.
并且状态的状态只能由不确定->确定. 如: Pending->Fullfilled
new Promse(()=>{
,xxx)
xx.then(()=>{
成功回调
},()=>{
失败回调
})
//Promise的基本使用, 它本身是一个类
const p = new Promise((resolve, reject) => {//创建Promise -> 状态为pedding
//异步操作成功执行resolve(成功的数据),失败执行reject(错误的原因)
//在这里写异步代码: 定时器, ajax请求
setTimeout(() => {
//调用resolve表示当前Promise成功了
resolve('ok')//状态由pedding -> resolve
// reject('error')//状态由pedding - > reject
}, 2000)
})
//知道是成功还是失败
p.then((msg) => {
//成功回调
console.log('成功了' + msg)
}, (err) => {
//失败回调
console.log('失败了' + err)
})4. 使用Promise 消除回调地狱的嵌套
利用Promise的链式调用
//解决回调地狱
//需求: 延迟2s后输出1,然后延迟1s输出2.再延迟1s输出3
//延迟输出的异步函数, 使用Promise进行包装
//duration: 延迟时间
//n: 延迟输出的数
//封装函数
function delay(duration, n) {
//这里面是异步代码
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(n)
}, duration)
})
}
//Promise的链式调用来消除回调地狱
//使用then来消除回调地狱
//发现then都是平级的,没有嵌套
delay(2000, 1)
.then((n1) => {
console.log(n1)
return delay(1000, 2)
}).then((n2) => {
console.log(n2)
return delay(1000, 3)
}).then((n3) => {
console.log(n3)
})
我们发现代码可读性也不好,因此我们引出Async+Awit
5. Async+Awit配合Promise来解决异步嵌套/回调地狱(掌握这个)
1> 在Promise前添加 await 关键字, 此时await的返回值就是Promise的reslove参数
2> await所在的函数必须被async 修饰. await 和 async 必须一起使用
3> await 所在的函数会按照同步的方式来执行代码, 也就是前面的 await 执行完了, 才会执行后面的 await
<script>
//需求: 延迟2s后输出1,然后延迟1s输出2.再延迟1s输出3
//Promise 封装延迟输出函数
function delay(duration,n){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(n)
},duration)
})
}
//Async+Awit配合Promise来解决异步嵌套/回调地狱
//此时就没有使用回调函数
async function log(){
//1. 在Promise前添加 await 关键字, 此时await的返回值就是Promise的reslove参数
//2. await所在的函数必须被a sync 修饰
//3. await 所在的函数会按照同步的方式来执行代码, 也就是前面的 await 执行完了, 才会执行后面啊 await
const n1 = await delay(2000,1)
console.log(n1)//n1就是Promise成功传过来的参数
const n2 = await delay(1000,2)
console.log(n2)
const n3 = await delay(1000,3)
console.log(n3)
}
log()
</script>12.模板化
1. 概念
模块: 一个文件就是一个模块, 模块=文件
模块化: 一种代码的开发思想. 我们不会把所有代码写在一个文件, 而是根据代码的不同功能进行划分, 分类进管理.
比如: views: 管理页面
api: 管理与后端进行交互的接口函数
utils: 管理公共的工具函数, 比如数组求和, 加减乘除运算等
比如我首页和商品列表页都需要使用数组求和, 我们不必写俩遍, 而是把这个功能写成一个函数, 然后去俩个不同的模块来调用这个函数. 化大为小. 不同模块之间需要通过导入, 导出的方式进行模块通信, 从而提高代码的可复用性, 可维护性, 可测试性, 让JS支持中大型项目的开发能力
2. 准备目录结构
1. 新建 12-es-module ⽬录
2. 命令⾏进⼊ 12-es-module ⽬录
3. 执⾏ npm init , 初始化得到 package.json ⽂件
4. 给 package.json 添加 "type": "module"
5. 根⽬录下新建 src/index.js 、作为代码的⼊⼝⽂件
6. src ⽬录下新建 utils ⽬录
进入终端的方式
输入 nmp init 回车
输入 es-moule (名字随意取,不要带中文)
发现生成了json文件
创建src..包和js文件
在cmd可以用cls清除命令
3. 默认导入和导出(重点)
export default xxxx 导出的成员 默认导出
import xxxx from '模块的相对路径' 默认导入 (记得保存)
然后在终端使用 node + 执行的js路径 点击回车
我们在utils里面写一个min.js 里面写一个min函数, 然后在index.js调用这个函数
注意: 一个模块不能有多个默认导出, 一个模块 export default 只能出现一次
4. 按需导入和导出(重点)
export 导出的成员 按需导入
import {变量名} form '模块的相对路径' 按需导出(变量名必须和导出的变量名一致)
总结
到此这篇关于Vue3入门之必会的前置知识总结的文章就介绍到这了,更多相关Vue3前置知识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！