VUE框架前置知识总结

一、前言

在学习vue框架中，总是有些知识不是很熟悉，又不想系统的学习JS，因为学习成本太大了，所以用到什么知识就学习什么知识。此文档就用于记录零散的知识点。主要是还是针对与ES6规范的JS知识点。
以下实验环境都是在windows环境下，在vue框架中进行实验，因为这样比较方便，也更方便以后在VUE当中的运用

二、函数

1.回调函数

1.1 概念

如果将 “函数A” 作为"参数"传递给函数B时，我们称函数A为 “回调函数”

1.2 实例

<template></template><script setup>
// test1作为参数传递给了函数2，那么test1就是一个回调函数
function test1(){console.log('我是一个回调函数')
}function test2(fn){fn()console.log("我是test2函数")
}test2(test1)</script>

查看控制台，发现函数执行成功

2.箭头函数

2.1.没有参数的箭头函数

test = () => console.log('这是最简单的箭头函数')
test()

2.2.单参箭头函数

test = x => console.log('x =  ' + x)
test(10)

2.3.多参数箭头函数

多参箭头函数参数的小括号就不能省略了

test = (x,y) => console.log('x =  ' + x,'y = ' + y)
test(10,20)

2.4.函数体只有一行内容

如果只有一行语句，可以同时省略大括号和return。

test = () => 10 + 10
console.log(test()

2.5.函数体有多行

如果函数体部分有多行，就需要使用{}，如果有多上的话，其实就没必要使用箭头函数了

test = () => {console.log('1'),console.log('2')}
test()

2.6.return和{}必须并存

test = () =>  {return 10 + 20}
x = test()
console.log(x)

注意：在js中会有很多情况会使用匿名的箭头函数作为函数的参数

三、解构-赋值

1.数组解构

正常的一个例子，将数组的值分别赋值给多个变量

<template></template><script setup>
const arr = [ 100, 60, 80 ]const max = arr[0]
const avg = arr[1]
const min = arr[2]console.log(max,avg,min)</script>

这样赋值在语法上就比较繁琐。
解构赋值的语法如下：

<template></template><script setup>
const arr = [ 100, 60, 80 ]// 对数组进行结构赋值
const [ max,avg,min ] = arrconsole.log(max,avg,min)</script>

2.对象解构

2.1 解构对象

注意点：解构时候的变量名必须要和对象之中的key一致。

<template></template><script setup>
// 解构之前打印
const obj = {name: "zhangsan",age: 20}
console.log(obj.name,obj.age)// 解构之后打印
const {name,age } = obj
console.log(name,age)</script>
2.1.1 解构重命变量

有时候解构的时候，变量名可能和其它的变量冲突了，那么就需要重命名。如下：

<template></template><script setup>
const name = "lisi"
const age = 200const obj = {name: "zhangsan",age: 20}// 解构之后需要给变量重命名,避免和其它变量冲突
const {name:username,age: userage } = obj
console.log(username,userage)</script>

2.2 解构数组对象

<template></template><script setup>
//解构之前打印
const obj = [{name: "zhangsan",age: 20
}]
console.log(obj[0].name,obj[0].age)//解构之后打印
const [{ name,age}] = obj
console.log(name,age)</script>

2.3 多级对象解构

<template></template><script setup>
const obj = {name: "zhangsan",family: {name: "xiaoli",age: 20}
}
console.log(obj.family.name,obj.family.age)// 这里的family是不能省略的,作用是为了指定解构哪个对象
const {name:name1, family: {name,age}} = obj
console.log(name1,name,age)</script>

四、字符串

1.模板字符串

1.1 使用场景：

1.拼接字符串和变量
2.在没有它之前，要拼接变量比较麻烦

1.2 语法

`xxxxx${变量名}xxxxxxx`

2.模板字符串实例

2.1 常规字符串拼接

<template></template><script setup>
let name = "zhangsan"
let age = 20console.log(name + "今年" + age + "岁了")</script>

2.2 模板字符串拼接

<template></template><script setup>
let name = "zhangsan"
let age = 20console.log(`${name}今年${age}岁了`)
</script>

五、模块化

1.分别暴露

1.1 概念和语法：

1.分别暴露就是 每个变量和函数都需要使用 export 暴露出去.
2.语法： export 要暴露的内容
3.引入：引入的时候需要注意，暴漏的变量名是什么，引入的时候就写什么，不能自定义更改名称

1.2 创建分别暴露模块文件

创建test.js，内容如下：每个变量和函数都单独使用export进行了暴漏

export const data1 = "hello"
export const data2 = "world"export function test(){console.log("这是一个test函数")
}

1.3 引入分别暴露模块文件

在app.vue文件中引入模块文件

<template></template><script setup lang="ts">
# 引入模块文件中变量
import { data1,data2,test } from './utils/test'console.log(data1)
console.log(data2)
test()</script>

2.统一暴露

2.1 概念和语法

1.概念: 不需为每个变量都使用单独的export进行暴露，使用一个export即可暴露所有内容
2.语法：export { 要暴露的内容 }

2.2 创建统一暴露模块文件

创建test.js，内容如下：所有的内容需要一个export 暴露即可

const data1 = "hello"
const data2 = "world"function test(){console.log("这是一个test函数")
}export {data1,data2,test
}

2.3 引入统一暴漏模块文件

引入的时候和分别暴漏没有区别，用法完全一致

<template>
</template><script setup lang="ts">import { data1,data2,test } from './utils/test'console.log(data1)
console.log(data2)
test()</script>

3.默认暴露

3.1 概念和语法

1.默认暴露：在一个模块文件中，只能有一个默认暴漏
2.语法： export default 要暴漏的内容
3.引入: 引入默认暴漏的时候，可以自定义名称，而且不用使用{}解构(就是不用分别引入)。

3.1 默认暴露一个内容

function test(){console.log("这是一个test函数")
}export default test

3.2 引入模块文件

这里发现，没有使用{} 也没有和test的变量名对应，而是使用了fn进行接受。结果运行成功

<template>
<div><button @click="send">发送请求</button>
</div>
</template><script setup lang="ts">import fn from './utils/test'fn()</script>

3.3 默认暴漏多个内容

const data1 = "hello"
const data2 = "world"function test(){console.log("这是一个test函数")
}export default {data1,data2,test
}

3.4 引入模块文件

注意：此时当默认暴漏多个内容时，引入的时候，用法和默认暴多一个内容时是不一样的！！！！！
暴露一个内容时：引入的内容就是暴露的内容，可以直接使用
暴露多个内容时: 引入的内容不能直接使用，而是按照对象的使用方法进行使用

<template>
<div><button @click="send">发送请求</button>
</div>
</template><script setup lang="ts">
import test_data from './utils/test'console.log(test_data.data1)
console.log(test_data.data2)
test_data.test()</script>

以上三种暴露方法根据场景进行使用区分使用。

六、axios

这里后端使用的是json-server，json-server默认是允许跨域请求的

1.GET请求

1.1 完整版

带请求参数的完整版axios请求.

<template><button @click="send">发送请求</button>
</template><script setup>
import axios from "axios";function send() {const res = axios({method: "GET",url: "http://192.168.1.10:3000/students/",params: {name: "zhangsan"}})res.then(response => {console.log('-----------')console.log(response.data)},error => {console.log(error)})
}</script>

1.2 简写版

<template><button @click="send">发送请求</button>
</template><script setup>
import axios from "axios";function send(){axios.get("http://192.168.1.10:3000/students",{params: { name: "zhangsan"}}).then(response => {console.log(response.data)},error => {console.log(error)})
}</script>

两种写法的区别点要注意：

1.完整版本中 axios中的参数是一个对象形式的实参
2.简写版本中 axios中的参数不是一个对象，而是两个实参

2.POST请求

2.1 完整版

<template><button @click="send">发送请求</button>
</template><script setup>
import axios from "axios";function send(){const res = axios({method: "POST",url: "http://192.168.1.10:3000/students",data: {id: 4,name: "xiaoqiang",age: 26}})res.then(response => {console.log(response)},error => {console.log(error)})
}</script>

2.2 简写版

<template><button @click="send">发送请求</button>
</template><script setup>
import axios from "axios";function send(){axios.post("http://192.168.1.10:3000/students",{ id: 5, name:"xiaohu",age:23}). then(response => {console.log(response)},error => {console.log(error)}    )
}</script>

3.create方法

axios有一个create方法，可以构建出具有不同配置的axios实例。这样就可以满足不同的请求。
到这里，不直接在APP.vue文件中进行引入axios，而是单独创建一个axios的模块文件进行封装。
上边的GET和POST方法只是为了讲解语法，所有直接在APP.vue文件中进行请求，比较方便。这里使用了create方法就开始涉及到了自定义配置。所以进行了单独的拆分和封装

3.1 创建模块文件

创建src/utils/request.js文件

import axios from "axios";# 创建第一个axios的实例
const request = axios.create({baseURL: "http://192.168.1.10:3000",# 超时时间为8秒timeout: 8000
})# 创建第二个axios的实例
const request1 = axios.create({baseURL: "http://192.168.1.11:3000",# 超时时间为3秒timeout: 3000
})# 暴露两个axios实例
export { request,request1 }

3.2 使用axios实例

在APP.vue中引入axios实例并使用.

<template><button @click="send">发送请求</button>
</template><script setup>
import { request } from './utils/request'function send(){request.get(# 这里不用再写完整的目标地址"/students",{ params: {age: 23} }).then(response => console.log(response.data),error => console.log(error))
}</script>

4.拦截器

4.1.请求拦截器

这里创建了axios的实例 request, 那么就设置request的请求拦截i，如果没有设置任何axios的实例，就设置axios的拦截器.
return config 是必须的，是不能省略的

import axios from "axios";const request = axios.create({baseURL: "http://192.168.1.10:3000",timeout: 8000
})# 请求拦截器
request.interceptors.request.use(config => {console.log('----------')console.log(config)console.log('----------')return config
})export { request }

4.2.响应拦截器

import axios from "axios";const request = axios.create({baseURL: "http://192.168.1.10:3000",timeout: 8000,
})request.interceptors.request.use(config => {console.log('----------')console.log(config)console.log('----------')return config})# 响应拦截器,对数据进行解构
request.interceptors.response.use(response => {console.log('#######')console.log(response)console.log('#######')return response.data})export { request }

这里的两种拦截器只写了语法，没有进行特有配置，在项目中根据情况进行配置

5.async函数

5.1 普通函数的返回值

function test(){console.log('OK')}console.log(test())

结果是：undefined

5.2 async加上函数

async函数 加在任意一个函数的前面：
1.这个函数也会被标记为异步函数
2.函数的返回值会变成一个promise对象，

<script setup>
async function test(){console.log('OK')}console.log(test())
</script>

结果是：

OK
Promise {<fulfilled>: undefined}

6.await函数

await函数主要有两个功能：
1.在异步函数中，阻塞 “await语句后边” 的所有的语句，等待await的语句执行完成后才会继续执行后续的语句
2.能够直接提取 await后边promise中的返回值，可以理解为then函数

6.1 编写python后端

这里没有继续使用json-server，要注意 前端要配置跨域，或者后端允许跨域请求
main.py内容如下：

main.py内容如下：

from flask import Flask
import json,timeapp = Flask(__name__)@app.route('/')
def index():data = json.dumps({ "name": "张三","age": 1000})time.sleep(5)return dataif __name__ == "__main__":app.run(host="0.0.0.0",debug=True)

6.2 配置前端代理

代理的含义就是 把所有的http请求都转发到 127.0.0.1:5137/api接口上。
那么api接口转发的后端是1.18:5000端口。这样就解决了浏览器同源的策略，解决了跨域请求
注意：前端的代理模式 适用于开发环境， 一旦上生产就需要使用nginx进行转发

编辑vite.config.js

import { defineConfig } from 'vite'export default defineConfig({# 新增以下内容server: {port: 5137,         //vite的默认端口（别和后端冲突了）proxy: {"/api": {         //代理的请求target: "http://192.168.1.18:5000",    //后端的地址changeOrigin: true,                 //开启跨域访问rewrite: (path) => path.replace(/^\/api/,''),    //重写前缀（如果后端本身就有api这个通用前缀，那么就不用重写）},},}
})

6.3 封装axios

编辑 src/utils/request.js.
这里的baseurl就不在后端的地址了，而是请求本机的/api接口

import axios from "axios";const request = axios.create({baseURL: "/api",timeout: 8000,
})export { request }

6.4 app.vue文件引入并测试

<template><h1>app.vue</h1><button @click="send">发送请求</button>
</template><script setup>
import { request } from './utils/request'function send(){console.log('before')request.get("/").then(response => { console.log(response)})console.log('---------')console.log('after')
}</script>

这里发现，在浏览器点击 “发送请求”，没有任何阻塞，所有请求全部执行完毕。只是后端的python延时5秒返回数据

6.5 增加await函数

async 可以单独出现，但是await必须和async一起出现

<template><h1>app.vue</h1><button @click="send">发送请求</button>
</template><script setup>
import { request } from './utils/request'async function send(){console.log('before')const {data} = await request.get("/")console.log(data)console.log('---------')console.log('after')
}</script>

这时候发现 awaite后边的所有语句全部阻塞，阻塞的原因是因为request没有执行完，并且加了await函数。
还有一点就是 不用使用then获取值，可以直接获取data的值

7.async和await小实例

异步请求数据后，然后在模板中显示出来

<template><h1>app.vue</h1><button @click="send">发送请求</button><h1>用户名: {{ name }}</h1><h1>年龄： {{ age }}</h1>
</template><script setup>
import {ref} from 'vue';
import { request } from './utils/request'const name = ref()
const age = ref()async function send(){const {data} = await request.get("/")name.value = data.nameage.value = data.age}</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/20357.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

头歌页面置换算法第2关：计算OPT算法缺页率

头歌页面置换算法第2关：计算OPT算法缺页率

2 任务：OPT算法 2.1 任务描述 设计OPT页面置换算法模拟程序：从键盘输入访问串。计算OPT算法在不同内存页框数时的缺页数和缺页率。要求程序模拟驻留集变化过程，即能模拟页框装入与释放过程。 2.2任务要求 输入串长度作为总页框数目，补充程序完成OPT算法。 2.3算法思路 OPT算…
阅读更多...
【Tlias智能学习辅助系统】04 部门管理 删除 和 新增

【Tlias智能学习辅助系统】04 部门管理 删除 和 新增

Tlias智能学习辅助系统 04 部门管理 删除 和 新增 删除部门APIDeptController.javaDeptService.javaDeptServiceImpl.javaDeptMapper.java前端联调 新增部门API有一步简化DeptController.javaDeptService.javaDeptServiceImpl.javaDeptMapper.java前端联调 删除部门API 请求路径…
阅读更多...
31-ESP32-S3-WIFI篇-02 Event Group (事件标记组)

31-ESP32-S3-WIFI篇-02 Event Group (事件标记组)

ESP32-S3-WIFI 事件标记组 介绍 在ESP32-S3的WiFi驱动程序中&#xff0c;事件标记组&#xff08;Event Group&#xff09;是一个非常重要的概念。它是FreeRTOS中的一种同步机制&#xff0c;用于在任务之间传递和同步事件。在WiFi驱动程序中&#xff0c;我们使用事件标记组来通…
阅读更多...
Go 语言字符串及 strings 和 strconv 包

Go 语言字符串及 strings 和 strconv 包

在 Go 语言编程中&#xff0c;字符串是最基本、最常用的数据类型之一。无论是处理用户输入、读取文件内容&#xff0c;还是生成输出&#xff0c;字符串操作无处不在。为了方便开发者对字符串进行各种操作&#xff0c;Go 语言提供了强大的 strings 包和 strconv 包。strings 包包…
阅读更多...
Selenium+Java 环境搭建

Selenium+Java 环境搭建

selenium 介绍 Selenium 是 web 应用中基于 UI 的自动化测试框架&#xff0c;支持多平台、多浏览器、多语言。 早期的 selenium RC 已经被现在的 webDriver 所替代&#xff0c;可以简单的理解为selenium1.0webdriver 构成 现在的 Selenium2.0 。现在我们说起 selenium &#xf…
阅读更多...
适合学生写作业的台灯有哪些？台灯怎么选详细攻略！

适合学生写作业的台灯有哪些？台灯怎么选详细攻略！

在数字化飞速发展的今天&#xff0c;孩子们的学习和生活越来越离不开电子屏幕。然而&#xff0c;长时间盯着屏幕&#xff0c;不仅容易让眼睛感到疲劳&#xff0c;更是近视问题日益严重的元凶之一。每一位家长都希望孩子能拥有健康的视力&#xff0c;因此会为孩子挑选一台护眼灯…
阅读更多...
MySQL十部曲之九：MySQL优化理论

MySQL十部曲之九：MySQL优化理论

文章目录 前言概述查询优化查询执行计划EXPLAIN获取表结构信息获取执行计划信息 EXPLAIN 输出格式如何使用EXPLAIN进行优化 范围访问优化单列索引的范围访问多列索引的范围访问 索引合并优化索引合并交叉访问算法索引合并联合访问算法索引合并排序联合访问算法 索引下推优化连接…
阅读更多...
豆包浏览器插件会造成code标签内容无法正常显示

豆包浏览器插件会造成code标签内容无法正常显示

启用状态&#xff1a;页面的代码会显示不正常 禁用后&#xff0c;正常显示 害得我重置浏览器设置&#xff0c;一个个测试
阅读更多...
spring mvc 中怎样定位到请求调用的controller

spring mvc 中怎样定位到请求调用的controller

前言 在java web开发过程中&#xff0c;正常情况下controller都是我们自己写的&#xff0c;我们可以很方便的定位到controller的位置。但是有些时候我们引入的其他依赖中可能也有controller&#xff0c;为了找到并方便的调试jar包中的controller&#xff0c;我们一般会进行全局…
阅读更多...
golang中移除切片索引位置的元素

golang中移除切片索引位置的元素

golang中移除切片索引位置的元素 方法 1&#xff1a;使用 append func PopSliceElementByIndex(slice []int, index int) (res []int) {res append(slice[:index], slice[index1:]...)return }优点&#xff1a; 简单易读&#xff1a; 使用 append 函数&#xff0c;代码简洁…
阅读更多...
Kotlin 密封类和接口

Kotlin 密封类和接口

文章目录 定义实例化对象when 分支判定 定义 密封类和接口使用sealed修饰。 密封类和接口与其直接子类只能位于同一包内&#xff08;一般是同一文件夹中&#xff0c;也可以是不同文件夹&#xff0c;package声明为同样的包名&#xff09;&#xff1a; sealed class Route(val…
阅读更多...
杂项——32舵机控制

杂项——32舵机控制

180度舵机内部有一个基准电路&#xff0c;产生周期为20ms&#xff0c;高电平宽度为1.5ms的基准信号&#xff0c;这个位置其实是舵机转角的中间位置。通过比较信号线的PWM信号与基准信号&#xff0c;内部的电机控制板得出一个电压差值&#xff0c;将这个差值加到电机上控制舵机转…
阅读更多...
头歌页面置换算法第4关：计算CLOCK算法缺页率

头歌页面置换算法第4关：计算CLOCK算法缺页率

2 任务：CLOCK算法 2.1 任务描述 设计CLOCK页面置换算法模拟程序：从键盘输入访问串。计算CLOCK算法在不同内存页框数时的缺页数和缺页率。要求程序模拟驻留集变化过程，即能模拟页框装入与释放过程。 2.2任务要求 输入串长度作为总页框数目，补充程序完成CLOCK算法。 2.3算法思…
阅读更多...
[机缘参悟-196] - 《道家-水木然人间清醒1》读书笔记 -20-主要内容与核心理念

[机缘参悟-196] - 《道家-水木然人间清醒1》读书笔记 -20-主要内容与核心理念

目录 前言&#xff1a; 一、主要内容 1.1 第一章 真相本质 1. 底层逻辑 2. 人生曲线 3. 价值规律 4. 底层规律 1.2 第二章 认知觉醒 1. 认知要素 2. 幸存者偏差 3. 借假修真 4. 两套秩序 1.3 第三章 关系界限 1. 内 观 2. 独 立 3. 真 爱 1.4 第四章 商业逻辑…
阅读更多...
【CPP】双端队列简介(deque)

【CPP】双端队列简介(deque)

简介&#xff1a;双端队列(deque) 目录 1.概述2.特点3.底层原理 1.概述 双端队列&#xff1a;是一种顺序表和顺序表的结合数据结构&#xff0c;不是队列。 它提供顺序表的[]下标访问和链表的中间头部的较高效率插入删除操作。 2.特点 顺序表的优缺点&#xff1a; 优点&…
阅读更多...
linux之docker- image.tar 的导出和导入

linux之docker- image.tar 的导出和导入

一、情况 docker 镜像有时无法从外网访问&#xff0c;需要把docker 打包导出到本地&#xff0c;然后以文件的形式&#xff0c;发送给其他人&#xff0c;再然后其他人把docker 镜像文件导入到自己的服务器本地镜像仓库&#xff0c;方可使用。也可把镜像上传到公司内网。下面就开…
阅读更多...
ython 2.7 环境配置：深度探索与高效实践

ython 2.7 环境配置：深度探索与高效实践

Python 2.7 环境配置&#xff1a;深度探索与高效实践 在数字化时代的浪潮中&#xff0c;Python作为一种强大而灵活的编程语言&#xff0c;深受开发者们的喜爱。尽管Python 3版本已逐渐成为主流&#xff0c;但Python 2.7依然在某些特定领域和场景中发挥着不可替代的作用。本文将…
阅读更多...
Verilog HDL基础知识（二）

Verilog HDL基础知识（二）

引言&#xff1a;本文继续介绍Verilog HDL基础知识&#xff0c;重点介绍赋值语句、阻塞与非阻塞、循环语句、同步与异步、函数与任务语法知识。 1. 赋值语句 在Verilog中&#xff0c;有两种进行赋值的方法&#xff0c;即连续赋值语句和过程赋值语句&#xff08;块&#xff09…
阅读更多...
Java数据结构-二叉搜索树

Java数据结构-二叉搜索树

目录 1. 概念2. 二叉搜索树的操作2.1 查找2.2 插入2.3 删除 3. 全部代码 1. 概念 二叉搜索树是特殊的二叉树,也叫二叉排序树,它的特点是:每个结点的左子树上的所有结点的值都小于这个结点的值,右子树上的所有结点的值都大于这个结点的值,另外所有的左子树和右子树也分别为二叉…
阅读更多...
详解 Spark 编程之 RDD 依赖关系

详解 Spark 编程之 RDD 依赖关系

一、依赖与血缘关系 依赖&#xff1a;两个相邻 RDD 之间的关系血缘关系&#xff1a;多个连续的 RDD 的依赖由于 RDD 不会保存数据&#xff0c;为了提高容错性&#xff0c;每个 RDD 都会保存自己的血缘关系&#xff0c;一旦某个转换过程出现错误&#xff0c;可以根据血缘关系重新…
阅读更多...
最新文章

Copyright @ 2022~2023