VUE框架前置知识总结

已于 2024-05-29 13:55:24 修改
阅读量1k 收藏 14
点赞数 14
分类专栏： 前端 文章标签： 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
关注
  • 14
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue前置必会知识点
qq_41152805的博客
01-07 554
学习vue前置知识点
vue框架使用
qq_45645848的博客
01-11 1123
前端vue基础知识总结，汇总
前端vue框架基础知识
06-11
Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。vue是一套构建用户界面的渐进式（用到哪一块就用哪一块，不需要全部用上）前端框架，Vue 的核心库只关注视图层；Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性，但它支持所有兼容 ECMAScript 5 的浏览器。本文档包含前端工程化与 webpack、vue基础（指令、组件、计算属性、侦听器、生命周期等）、动态组件 & 插槽 & 自定义指令、路由等知识，范围广泛，基础易懂。 根据你的需求场景，你可以用不同的方式使用 Vue： 无需构建步骤，渐进式增强静态的 HTML 在任何页面中作为 Web Components 嵌入 单页应用 (SPA) 全栈 / 服务端渲染 (SSR) Jamstack / 静态站点生成 (SSG) 开发桌面端、移动端、WebGL，甚至是命令行
学习vue之前应该有哪些基础知识
qq_63533863的博客
01-14 5919
一、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开发页面（前置知识）
最新发布
Annaday的博客
06-23 559
学习Vue的基础知识，简单快速入门
【vue2】vue框架学习前置必备基础知识
嗨，朋友你好！我是前端领域的工作者
02-04 3281
在学习vue阶段必须会的知识体系：数组 | 字符串中常用方法、对象解构语法、function |箭头函数的this指向问题、展开运算符、原型链、本地存储
学习Vue你需要知道的前置知识
weixin_45445088的博客
07-25 6527
在国内Vue盛行的今天,很多想转行入门前端的同学，以为掌握Vue开发，便能走上人生巅峰，在前端界有容身之所？所以不打基础直接上手Vue?遇到问题上交流群截图，当伸手党？ 作为前端开发的一份子，直接学Vue等于入门前端？告诉你，事实是不存在的。 掌握Vue是帮助前端开发人员敏捷开发的一种技能，Vue框架是一种高效解决通用业务场景的方案，在前端开发的发展长河中，他是目前受欢迎的，主流的方案之一。很多...
vue前置知识
wuzhanhui0715的博客
07-18 1436
文章目录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 768
1、ES6模块化 1、回顾一下 node.js中我们所遵守是commonJS模块化规范 导入其他模块语法是require()方法 使用module.exports对象导出模块 2、模块化的优点 降低了沟通的成本 极大的方便了各个模块之间的相互调用 3、分类 AMD和CMD是适用于浏览器的模块化规范 CommonJS是适用于服务端的模块化规范 ES6的模块化规范既适用于浏览器又适用于服务器 4、ES6模块化 1、定义 一种适用于浏览器和服务器端的模块化规范。 2、语法 每一个单独的js文件都是一
【Vue前置必备知识篇】 --- ES6模块化与异步编程高级用法
battledao的博客
04-11 3540
前言 ❤️ 都在为生活求一个善终，而正是因为不终，才有了序章，慢慢写吧 ❤️
vue2知识点总结
m0_71933813的博客
11-05 419
b.模板（template）(疼婆里特)：用于存放标签的地方（只能由一个父容器）a.插槽 相当于是a标签 视图窗口，相当于是组件要现实的地方1）.this.$router.push()跳转到指定的url，在指定history添加一个记录，点击后退会返回上一个页面2）.this.$router.replace()跳转到指定的url,不会向history里面添加新的记录，点击返回，
vue-router知识点讲解源码
03-21
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue Router是官方的路由管理器，它与Vue.js深度集成，使我们能够管理应用的导航和页面状态。在本篇文章中，我们将深入探讨Vue Router的核心概念和关键...
vue路由拦截器和请求拦截器知识点总结
10-16
Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的功能来构建用户界面。在开发过程中，我们经常需要处理路由管理和网络请求。Vue路由拦截器和请求拦截器是两种关键机制，用于增强应用的安全性和用户体验。 **...
Vue知识点汇总【持更】
qq_45605043的博客
09-14 5818
一个前端小白的自学之路，完结之日即成为大白之日。
学Vue前的前置知识-Promise
星星阿虎的博客
09-16 408
Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
学习Vue前了解前端知识
liudachu的博客
09-19 611
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 一、前端核心分析 1. VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，
Vue 入门指南：从零开始学习 Vue 的基础知识
Kuangtian的博客
11-28 771
Vue 是一个前端框架，它使得构建交互式应用程序变得更加容易，让前端开发者能够更好地处理复杂的数据，并使得用户界面更加美观、可应对各种设备。使用 Vue 可以在较短的时间内构建出具有雄心壮志的单页应用程序，它也很容易与其他工具协同工作。
关于学习Vue的前置工作/技术储备
weixin_33809981的博客
04-22 262
关于学习Vue的前置工作/技术储备 1.GitBatch 2.Sublime Text 3.Node-----npm 命令 本人用的idea GitBatch: GitBatch是一个可以编写shell脚本的工具，今天我们学习的内容在cmd下是不支持的。你要么选择gitbatch，要么你选择Linux系统 SublimeText: SublimeText:一款高级记事本 常用的主...
Vue学习--入门篇
star_zhang_jx的博客
12-16 588
这篇文章的内容可以作为学习Vue之前的前置知识点了解，Vue包含的知识面远不及于此，想要搞前端的小伙伴还是去B站上面看时长长的视频，不要看狂神的，本篇文章就是基于狂神的视频总结的一些知识点，搞后端的小伙伴可以猫一眼，我们了解一下就行，专业的事情还是交给前端来做吧。
学习vue的前置知识
09-08
在学习Vue之前，有几个前置知识是需要了解的。首先是基本的HTML、CSS和JavaScript知识，因为Vue是基于这些技术的。其次是对于模块化开发的理解，Vue使用了ES6模块化规范，如果想在Node.js中体验和学习ES6的模块化语法，可以按照相应的配置步骤进行设置，并了解ES6模块化的基本语法。另外，了解Node.js的基本概念和使用方法也是有帮助的，因为Vue可以在Node.js环境下进行开发和构建。如果想在Node.js中基于Promise的方式读取文件内容，可以安装第三方包then-fs并使用其提供的readFile()方法。此外，了解Promise的特性，比如链式调用和通过.catch()捕获错误，可以帮助更好地理解和处理异步操作。综上所述，学习Vue之前建议掌握基本的HTML、CSS和JavaScript知识，了解模块化开发和ES6模块化规范，熟悉Node.js的基本概念和使用方法，以及对Promise的特性有一定的了解。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值