VUE框架前置知识总结

已于 2024-05-29 13:55:24 修改
阅读量1.1k 收藏 16
点赞数 15
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2024-05-29 11:13:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smile_pbb/article/details/139290338
版权

一、前言

在学习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 ] = arr

console.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 = 200

const 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 = 20

console.log(name + "今年" + age + "岁了")

</script>

2.2 模板字符串拼接

<template>

</template>

<script setup>
let name = "zhangsan"
let age = 20

console.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,time

app = Flask(__name__)

@app.route('/')
def index():
  data = json.dumps({ "name": "张三","age": 1000})
  time.sleep(5)
  return data

if __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.name
    age.value = data.age
 
}


</script>
smile_pbb
关注
专栏目录
Vue前置必会知识点
qq_41152805的博客
01-07 597
学习vue前置知识点
vue框架使用
qq_45645848的博客
01-11 1229
前端vue基础知识总结，汇总
vue前置知识
wuzhanhui0715的博客
07-18 1470
文章目录1 ES6 模块化1 在 node.js 中体验 ES6 模块化 "type":"module"2 ES6 模块化的基本语法1 默认导出： export default 导入： import 接收名称 from '模块标识符'1.默认导出的注意事项：只允许使用唯一的一次 export default2 按需导出： export 导入： import { s1 } from '模块标识符'1 按需导出与按需导入的注意事项2 Promise1 解决回调地狱的问题2 Promise 概念3 基于回调
01、VUE前置知识
执手天涯@的博客
03-01 787
1、ES6模块化 1、回顾一下 node.js中我们所遵守是commonJS模块化规范 导入其他模块语法是require()方法 使用module.exports对象导出模块 2、模块化的优点 降低了沟通的成本 极大的方便了各个模块之间的相互调用 3、分类 AMD和CMD是适用于浏览器的模块化规范 CommonJS是适用于服务端的模块化规范 ES6的模块化规范既适用于浏览器又适用于服务器 4、ES6模块化 1、定义 一种适用于浏览器和服务器端的模块化规范。 2、语法 每一个单独的js文件都是一
学习Vue你需要知道的前置知识
weixin_45445088的博客
07-25 6691
在国内Vue盛行的今天,很多想转行入门前端的同学，以为掌握Vue开发，便能走上人生巅峰，在前端界有容身之所？所以不打基础直接上手Vue?遇到问题上交流群截图，当伸手党？ 作为前端开发的一份子，直接学Vue等于入门前端？告诉你，事实是不存在的。 掌握Vue是帮助前端开发人员敏捷开发的一种技能，Vue框架是一种高效解决通用业务场景的方案，在前端开发的发展长河中，他是目前受欢迎的，主流的方案之一。很多...
前端知识分享---Vue前置基础知识
weixin_71171795的博客
12-01 617
Vue前置基础知识
【vue2】vue框架学习前置必备基础知识
嗨，朋友你好！我是前端领域的工作者
02-04 3437
在学习vue阶段必须会的知识体系：数组 | 字符串中常用方法、对象解构语法、function |箭头函数的this指向问题、展开运算符、原型链、本地存储
vue2知识点总结
m0_71933813的博客
11-05 439
b.模板（template）(疼婆里特)：用于存放标签的地方（只能由一个父容器）a.插槽 相当于是a标签 视图窗口，相当于是组件要现实的地方1）.this.$router.push()跳转到指定的url，在指定history添加一个记录，点击后退会返回上一个页面2）.this.$router.replace()跳转到指定的url,不会向history里面添加新的记录，点击返回，
vue常用知识总结
Debug的博客
05-27 667
vue常用知识总结 vue简介 vue 响应式原理：Object.defineProperty。 vue 的作者：尤雨溪 java 出身。 vue 是什么：以数据驱动视图的单页面（spa）渐进式 MVVM 框架。 特性：数据双向绑定 模块化开发：为了不让所有的代码放在同一文件内看着不舒服（降低开发时间，提高开发效率）,每个部分都是一个独立的文件,哪里使用就引入到哪里，目的是好控制，减少代码复用 vue常用指令 -v-text 渲染文本，等价插值写法 插值：{{内容}} v-html 既可以渲
Vue知识点汇总【持更】
qq_45605043的博客
09-14 5963
一个前端小白的自学之路，完结之日即成为大白之日。
vue-router知识点讲解源码
03-21
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue Router是官方的路由管理器，它与Vue.js深度集成，使我们能够管理应用的导航和页面状态。在本篇文章中，我们将深入探讨Vue Router的核心概念和关键...
【Vue前置必备知识篇】 --- ES6模块化与异步编程高级用法
battledao的博客
04-11 3559
前言 ❤️ 都在为生活求一个善终，而正是因为不终，才有了序章，慢慢写吧 ❤️
vue源码分析前置知识必备
sunhonghui9527的博客
07-13 978
转载自：https://juejin.im/post/5d36d39bf265da1ba6482e52 最近利用空闲时间又翻看了一遍Vue的源码，只不过这次不同的是看了Flow版本的源码。说来惭愧，最早看的第一遍时对Flow不了解，因此阅读的是打包之后的vue文件，大家可以想象这过程的痛苦，没有类型的支持，看代码时摸索了很长时间，所以我们这次对Vue源码的剖析是Flow版本的源码，也就是从Github上下载下来的源码中src目录下的代码。不过，在分析之前，我想先说说阅读Vue源码所需要的一些知识点，掌握这些
vue前置知识, generator、promise、async。。。
jser修仙之路
01-13 1929
异步解决方案 回调 等函数执行完成在执行某一个（回调）； function test(x){ setTimeout(function(){ console.log(111) x(); }, 1000) } function f
封装Vue组件库（一）、前置知识
皮蛋很白的博客
09-21 647
CDD - 组件优先开发方式 CDD（Component-Driven Development）：组件驱动开发 自上而下构建UI的过程 从组件级别开始，到页面级别结束 先从相对完善的设计中，抽象出组件。先隔离开发组件，然后开发页面。 CDD 的好处： 组件在最大程度被重用 并行开发 对单个组件的开发，使用CDD，可以让以页面级开发无法实现的方式在不同团队之间共享任务，这个任务就是开发相对隔离的组件。 可视化测试 通过一些工具可以直接浏览组件，而不需要到业务系统中再测试组件，可以对组件的不
【vue2】vue框架学习前置必备基础知识_vue2
最新发布
2401_84411767的博客
05-01 503
arr.splice(开始下标,删除几个元素)// 传递的形参有有三个，我们最后的形参可以省略不写。arr.splice(开始下标,删除几个元素,…arr.pop() : 删除数组最后一个元素, 返回删除的那个元素。map会遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组。用于判断数组中是否存在满足条件的元素,遇到满足的就返回，停止遍历。shift() : 删除数组第一个元素, 返回删除的那个元素。filter用于筛选数组中满足条件的元素，返回筛选后的新数组。1.升序（形参里面前者减去后者）
学习vue之前应该有哪些基础知识
qq_63533863的博客
01-14 5988
一、ES6语法规范 1.什么是ES6 ES6就是ECMAScript6是新版本JavaScript语言的标准，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 2.语法规范 es6语法规范1： var和let的区别 相同点：var和let都是申明变量的 区别： let是申明块级的变量（简单理解就是在某个代码块中生效，离开该代码块就没有效果了） var a = 3; let b = 4; console.debug(a,
学Vue前的前置知识-Promise
星星阿虎的博客
09-16 424
Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
学习Vue前了解前端知识
liudachu的博客
09-19 627
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 一、前端核心分析 1. VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，
Vue框架核心技术详解与实战
"Vue核心技术总结" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。它以其易学性和灵活性而闻名，特别适合开发单页应用程序(SPA)。Vue的核心技术包括数据绑定、指令系统、事件处理机制等，这些是理解...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值