当前位置：首页 > news >正文

vue3快速入门

news 2025/8/18 9:01:24

文章目录

1. Vue3简介
- 1.1. 性能的提升
- 1.2.源码的升级
- 1.3. 拥抱TypeScript
- 1.4. 新的特性
2. 创建Vue3工程
- 2.1. 基于 vue-cli 创建
- 2.2. 基于 vite 创建（推荐）
- - vite介绍
  - 创建步骤
  - 项目结构
  - - 安装插件
    - 项目结构
    - 总结
- 2.3. 一个简单的效果
- - Person.vue
  - App.vue
3. Vue3核心语法
- 3.1. OptionsAPI 与 CompositionAPI
- - Options API 的弊端
  - Composition API 的优势
- 3.2. 拉开序幕的 setup
- - setup 概述
  - setup 的返回值
  - setup 与 Options API 的关系
  - setup 语法糖
- 3.3. ref 创建：基本类型的响应式数据
- 3.4. reactive 创建：对象类型的响应式数据
- 3.5. 【ref 创建：对象类型的响应式数据】
- 3.6. 【ref 对比 reactive】
- - 宏观角度
  - 区别
  - 使用原则

1. Vue3简介

2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n
经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者
官方发版地址：Release v3.0.0 One Piece · vuejs/core
截止2023年10月，最新的公开版本为：3.3.4

1.1. 性能的提升

打包大小减少41%。
初次渲染快55%, 更新渲染快133%。
内存减少54%。

1.2.源码的升级

使用Proxy代替defineProperty实现响应式。
重写虚拟DOM的实现和Tree-Shaking。

1.3. 拥抱TypeScript

Vue3可以更好的支持TypeScript。

1.4. 新的特性

Composition API（组合API）：
- setup
- ref与reactive
- computed与watch
  
  …
新的内置组件：
- Fragment
- Teleport
- Suspense
  
  …
其他改变：
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符
  
  …

2. 创建Vue3工程

2.1. 基于 vue-cli 创建

点击查看 Vue-Cli 官方文档，（基于vue-cli创建，其实就是基于webpack来创建vue项目）

备注：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli 
npm install -g @vue/cli## 执行创建命令
vue create vue_test##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x## 启动
cd vue_test
npm run serve

2.2. 基于 vite 创建（推荐）

vite介绍

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

轻量快速的热重载（HMR），能实现极速的服务启动。
对 TypeScript、JSX、CSS 等支持开箱即用（不用配置，直接就可以用）。
真正的按需编译，不再等待整个应用编译完成。
webpack构建与 vite构建对比图如下：

创建步骤

具体操作如下（点击查看官方文档）

## 1.创建命令（基于vite创建vue3项目，前提是需要安装nodejs环境）
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

构建过程如下：

在这里插入图片描述

访问vue3项目如下：

在这里插入图片描述

项目结构

安装插件

安装官方推荐的vscode插件：

在这里插入图片描述

项目结构

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

main.ts

import './assets/main.css'// 引入createApp用于创建应用
import { createApp } from 'vue'// 引入App根组件
import App from './App.vue'createApp(App).mount('#app')

App.vue

<!-- 自己动手编写的一个App组件 -->
<template><div class="app"><h1>你好啊！</h1></div>
</template><script lang="ts"> // 添加lang="ts", 里面写ts或js都可以export default {name:'App' //组件名}</script><style>.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

总结

Vite 项目中，index.html 是项目的入口文件，在项目最外层。
加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
Vue3在main.ts中是通过 createApp 函数创建一个应用实例。

2.3. 一个简单的效果

Vue3向下兼容Vue2语法，且Vue3中的模板中可以没有根标签

Person.vue

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script lang="ts">export default {name:'App',data() {return {name:'张三',age:18,tel:'13888888888'}},methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}},}
</script>

App.vue

<template><div class="app"><h1>你好啊！</h1><Person/></div>
</template><script lang="ts">import Person from './components/Person.vue'export default {name:'App', //组件名components:{Person} //注册组件}
</script><style>.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

3. Vue3核心语法

3.1. OptionsAPI 与 CompositionAPI

Vue2的API设计是Options（配置）风格的。
Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

在这里插入图片描述

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

在这里插入图片描述

3.2. 拉开序幕的 setup

setup 概述

介绍

setup是Vue3中一个新的配置项，值是一个函数。
它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。

特点如下：

setup函数返回的对象中的内容，可直接在模板中使用。
setup中访问this是undefined。
setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><script lang="ts">export default {name:'Person',// 生命周期函数beforeCreate(){console.log('beforeCreate')},setup(){// 先打印的setup..., 再打印的beforeCreate, 说明了setup函数与beforeCreate生命周期函数的执行顺序console.log('setup ...')// 【setup函数中的this是undefined】console.log(this); // undefined// 数据，原来写在data中【注意：此时的name、age、tel数据都不是响应式数据】//                   （不是响应式的意思是：当这些数据变化，并不会触发dom更新，//                                     模板中应用这些变量的地方没有重新渲染）let name = '张三'let age = 18let tel = '13888888888'// 方法，原来写在methods中function changeName(){name = 'zhang-san'        // 注意：此时这么修改name页面是不变化的console.log(name)         // （name确实改了，但name不是响应式的）}function changeAge(){age += 1                  // 注意：此时这么修改age页面是不变化的console.log(age)          // （age确实改了，但age不是响应式的）}function showTel(){alert(tel)}// 返回一个对象，对象中的内容，模板中可以直接使用（将数据、方法交出去，模板中才可以使用这些交出去的数据、方法）return {name,age,tel,changeName,changeAge,showTel}}}
</script>

setup 的返回值

若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
若返回一个函数：则可以直接指定自定义渲染的内容，代码如下：

<template><div class="person">我特么一点都不重要了</div>
</template><script lang="ts">export default {name:'Person',setup(){// setup的返回值也可以是一个渲染函数// （模板什么的都不重要了，直接在页面上渲染成：你好啊！这几个字）// return ()=>'哈哈'}}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}
</style>

setup 与 Options API 的关系

Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。
但在setup中不能访问到Vue2的配置（data、methos…）。
如果与Vue2冲突，则setup优先。

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button><hr><h2>测试1：{{a}}</h2><h2>测试2：{{c}}</h2><h2>测试3：{{d}}</h2><button @click="b">测试</button></div>
</template><script lang="ts">export default {name:'Person',beforeCreate(){console.log('beforeCreate')},data(){return {a:100,// 在data配置项中, 可以使用this.name来使用setup中交出的数据, 因为setup执行时机更早。// 但是在setup中不能使用在data中定义的数据c:this.name, d:900,age:90}},methods:{b(){console.log('b')}},// setup可以与data、methods等配置项同时存在setup(){// 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据let name = '张三'let age = 18let tel = '13888888888'// 方法function changeName() {name = 'zhang-san' // 注意：这样修改name，页面是没有变化的console.log(name)  // name确实改了，但name不是响应式的}function changeAge() {age += 1           // 注意：这样修改age，页面是没有变化的console.log(age)   // age确实改了，但age不是响应式的}function showTel() {alert(tel)}// 将数据、方法交出去，模板中才可以使用return {name,age,tel,changeName,changeAge,showTel}// setup的返回值也可以是一个渲染函数// return ()=>'哈哈'}}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}
</style>

setup 语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changName">修改名字</button><button @click="changAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div></template><!-- 专门单个弄个script标签, 特地来配置组件的名字 -->
<script lang="ts">export default {name:'Person',}
</script><!-- 下面的写法是setup语法糖 -->
<!-- 1. 相当于写了setup函数; 2. 相当于自动把其中定义的变量交出去）-->
<script setup lang="ts">console.log(this) // undefined// 数据（注意：此时的name、age、tel都不是响应式数据）let name = '张三'let age = 18let tel = '13888888888'// 方法function changName(){name = '李四'//注意：此时这么修改name页面是不变化的}function changAge(){console.log(age)age += 1 //注意：此时这么修改age页面是不变化的}function showTel(){alert(tel)}
</script>

扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

第一步：npm i vite-plugin-vue-setup-extend -D
第二步：vite.config.ts

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),VueSetupExtend(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

第三步：<script setup lang="ts" name="Person">

3.3. ref 创建：基本类型的响应式数据

**作用：**定义响应式变量。
语法：let xxx = ref(初始值)。
**返回值：**一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
注意点：
- JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
- 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

<template><div class="person"><!-- 模板中直接使用, 不需要.value --><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>电话：{{tel}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template><!-- 使用了setup语法糖, 会自动将定义的变量和方法交出去, 以供给模板使用 -->
<script setup lang="ts" name="Person">// 引入vue中的ref函数import { ref } from 'vue'// name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。//（所谓的响应式指的是, 对数据的改变后, 能够让模板中使用该数据的地方得到重新渲染更新）// ref是1个函数, 向这个ref函数中传入参数, 返回的是1个RefImpl的实例对象let name = ref('张三')let age = ref(18)// tel就是一个普通的字符串，不是响应式的let tel = '13888888888'function changeName(){// JS中操作ref对象时候需要.valuename.value = '李四' // 页面得到刷新console.log(name.value)// 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。// name = ref('zhang-san')}function changeAge(){// JS中操作ref对象时候需要.valueage.value += 1      // 页面得到刷新console.log(age.value)}function showTel(){// tel是普通数据      tel += '1'          // tel的确改了, 但页面并未刷新alert(tel)}
</script>

3.4. reactive 创建：对象类型的响应式数据

作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
语法：let 响应式对象= reactive(源对象)。
**返回值：**一个Proxy的实例对象，简称：响应式对象。
注意点：reactive定义的响应式数据是“深层次”的。

<template>
<div class="person"><h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2><h2>游戏列表：</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><h2>测试：{{ obj.a.b.c.d }}</h2><button @click="changeCarPrice">修改汽车价格</button><button @click="changeFirstGame">修改第一游戏</button><button @click="test">测试</button></div>
</template><script lang="ts" setup name="Person">import { reactive } from 'vue'// 定义数据// reactive是1个函数, 向这个reactive函数中传入参数（传入对象或数组）, 返回的是1个Proxy的实例对象//（Proxy是原生Js就有的函数）// reactive函数中传入对象let car = reactive({ brand: '奔驰', price: 100 }) console.log('car', car); // car Proxy {brand: '奔驰', price: 100}// reactive函数传入数组let games = reactive([  { id: 'ahsgdyfa01', name: '英雄联盟' },{ id: 'ahsgdyfa02', name: '王者荣耀' },{ id: 'ahsgdyfa03', name: '原神' }])// reactive定义的响应式数据是 深层次 的let obj = reactive({a: {b: {c: {d: 666}}}})// 修改对象中的属性（修改使用reactive包裹对象后返回的对象）function changeCarPrice() {car.price += 10}// 修改数组中的对象的属性（修改使用reactive包裹数组后返回的对象）function changeFirstGame() {games[0].name = '流星蝴蝶剑'}function test() {obj.a.b.c.d = 999}
</script>

3.5. 【ref 创建：对象类型的响应式数据】

其实ref接收的数据可以是：基本类型、对象类型。
若ref接收的是对象类型，内部其实也是调用了reactive函数。

<template><div class="person"><h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2><h2>游戏列表：</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><h2>测试：{{ obj.a.b.c.d }}</h2><button @click="changeCarPrice">修改汽车价格</button><button @click="changeFirstGame">修改第一游戏</button><button @click="test">测试</button></div>
</template><script lang="ts" setup name="Person">import { ref,reactive } from 'vue'// 使用ref定义对象类型响应式数据let car = ref({ brand: '奔驰', price: 100 })// 使用reactive定义对象类型响应式数据let car2 = reactive({brand: '奔驰', price: 100})// reactive只能用来定义对象类型的响应式数据// let name = reactive('zhangsan') // 错误, value cannot be made reactive: zhangsan// 使用ref定义对象(数组)类型响应式数据let games = ref([{ id: 'ahsgdyfa01', name: '英雄联盟' },{ id: 'ahsgdyfa02', name: '王者荣耀' },{ id: 'ahsgdyfa03', name: '原神' }])// 使用ref定义对象类型响应式数据也是深层次的let obj = ref({a: {b: {c: {d: 666}}}})// 若ref接收的是对象类型，内部其实也是使用的reactive函数console.log(car)       // RefImpl {__v_isShallow: false, dep: undefined, //          __v_isRef: true, _rawValue: {…}, _value: Proxy}console.log(car.value) // Proxy {brand: '奔驰', price: 100}console.log(car2)      // Proxy {brand: '奔驰', price: 100}function changeCarPrice() {// 使用ref函数定义的响应式数据, 在js操作时, 需要带上.value, 才能碰到内部的Proxy对象car.value.price += 10console.log(car.value.price);}function changeFirstGame() {// 使用ref函数定义的响应式数据, 在js操作时, 需要带上.value, 才能碰到内部的Proxy对象games.value[0].name = '流星蝴蝶剑'console.log(games.value);   // Proxy {0: {…}, 1: {…}, 2: {…}}}function test() {// 使用ref函数定义的响应式数据, 在js操作时, 需要带上.value, 才能碰到内部的Proxy对象obj.value.a.b.c.d = 999}</script>

3.6. 【ref 对比 reactive】

宏观角度

ref可以定义：基本类型、对象类型的响应式数据
reactive只能定义：对象类型的响应式数据

区别

ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

可以在齿轮->设置->扩展->volar中勾选
，它会在使用ref创建的变量时，自动添加上.value

reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

<template><div class="person"><h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2><button @click="changeBrand">改品牌</button><button @click="changePrice">改价格</button><button @click="changeCar">改car</button></div>
</template><script lang="ts" setup name="Person">import { ref,reactive } from 'vue'let car = reactive({brand:'奔驰', price:100})function changeBrand() {// 正常修改car的brand, 并且是响应式car.brand = '宝马'
}function changePrice() {// 正常修改car的price, 并且是响应式car.price += 10
}function changeCar() {// 错误做法1// 不可以直接给reactive重新分配一个新对象，这会让car直接失去响应式// car = {brand:'奥托', price:10}// 错误做法2// 这样也不行, 因为模板中用的car是上面定义的响应式对象, // 现在car指向的是1个新的响应式对象, 而模板中压根就没有使用这个新的响应式对象// car =  reactive({brand:'奥托', price:10})// 正确做法（car仍然是响应式的）// API介绍: Object.assign(obj1, obj2, obj3, ..), //         将obj2中的每一组属性和值设置到obj1中, 然后obj3的每一组属性和值设置到obj1中Object.assign(car, {brand:'奥托', price:10})
}</script>

<template><div class="person"><h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2><button @click="changeBrand">改品牌</button><button @click="changePrice">改价格</button><button @click="changeCar">改car</button></div>
</template><script lang="ts" setup name="Person">import { ref,reactive } from 'vue'let car = ref({brand:'奔驰', price:100})function changeBrand() {// 正常修改car的brand, 并且是响应式car.value.brand = '宝马'
}function changePrice() {// 正常修改car的price, 并且是响应式car.value.price += 10
}function changeCar() {// 错误做法1// 不能直接给car换了个ref, 因为模板中压根就没有使用这个新的RefImpl对象// car = ref({brand:'奥托', price:10})// 正确做法1（car仍然是响应式的）// API介绍: Object.assign(obj1, obj2, obj3, ..), 将obj2中的每一组属性和值设置到obj1中, //         然后obj3的每一组属性和值设置到obj1中// Object.assign(car.value, {brand:'奥托', price:10})// 正确做法2//（这里相比于对car使用reactive定义而言, 使用ref定义则可以直接给car.value整体赋值// 原因在于car.value获取的是Proxy响应式对象, 凡是对Proxy响应式对象的操作都可以被拦截到）car.value = {brand:'奥托', price:10}}</script>

使用原则

若需要一个基本类型的响应式数据，必须使用ref。
若需要一个响应式对象，层级不深，ref、reactive都可以。
若需要一个响应式对象，且层级较深，推荐使用reactive。

vue3快速入门

文章目录 1. Vue3简介1.1. 性能的提升1.2.源码的升级1.3. 拥抱TypeScript1.4. 新的特性 2. 创建Vue3工程2.1. 基于 vue-cli 创建2.2. 基于 vite 创建（推荐）vite介绍创建步骤项目结构安装插件项目结构总结 2.3. 一个简单的效果Person.vueApp.vue 3. Vue3核…...

编程日记 2024/2/3 22:14:50

go 问题记录（日志丢失）

问题描述： 在go程序中，通过执行一个命令启动一个子命令，并通过pipe读取子程序的标准输入和输出，通过scanner默认按行读取，此时如果子程序输出时没有携带’\n’，scanner就不会打印输出，而是会累…...

编程日记 2024/2/3 22:13:49

彻底解决 MAC Android Studio gradle async 时出现 “connect timed out“ 问题

最近在编译一个比较老的项目，git clone 之后使用 async 之后出现一下现象： 首先确定是我网络本身是没有问题的，尝试几次重新 async 之后还是出现问题，网上找了一些方法解决了本问题，以此来记录一下问题是如何解决的。 …...

编程日记 2024/2/3 22:09:45

计算机网络第4章（网络层）

4.1、网络层概述简介网络层的主要任务是实现网络互连，进而实现数据包在各网络之间的传输这些异构型网络N1~N7如果只是需要各自内部通信，他们只要实现各自的物理层和数据链路层即可但是如果要将这些异构型网络互连起来，形成一个更大的互…...

编程日记 2024/2/3 22:04:41

SpringbootWeb案例

准备工作需求说明部门管理部门管理功能开发包括：查询部门列表、删除部门、新增部门、修改部门员工管理功能开发包括：查询员工列表(分页、条件)、删除员工、新增员工、修改员工环境搭建环境搭建步骤：1. 准备数据库表(dept、emp)…...

编程日记 2024/2/3 22:00:36

【初中生讲机器学习】4. 支持向量机算法怎么用？一个实例带你看懂！

创建时间：2024-02-02 最后编辑时间：2024-02-03 作者：Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏，很高兴遇见你~ 我是 Geeker_LStar，一名初三学生，热爱计算机和数学，我们一起加…...

编程日记 2024/2/3 21:57:31

CentOS下安装vlc

一、引言 vlc是一跨多媒体播放器，可以播放本地媒体文件和网络串流，帮助我们排查音视频开发过程中遇到的问题。大部分情况下，我们只需要在Windows系统下安装vlc就可以了。但有一种情况是需要在Linux下安装vlc的：我们的音视频拉流软…...

编程日记 2024/2/3 21:56:30

概率论中的全概率公式、贝叶斯公式解析

全概率公式定义全概率公式是用来计算一个事件的概率，这个事件可以通过几个互斥事件的并集来表示。这几个互斥事件称为“完备事件系”。实质是由原因推结果。公式用途全概率公式通常用于计算一个事件的总概率，特别是当这个事件与几个不同的因素相关…...

编程日记 2024/2/3 21:54:28

亿赛通-数据泄露防护(DLP)UploadFileList；login接口存在任意文件读取漏洞附POC软件

@[toc] 亿赛通-数据泄露防护(DLP)UploadFileList;login接口存在任意文件读取漏洞附POC软件免责声明：请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失，均由使用者本人负责，所产生的一切不良后果与文…...

编程日记 2024/2/3 21:51:25

如何使用 Google 搜索引擎保姆级教程（附链接）

一、介绍 "Google语法"通常是指在 Google 搜索引擎中使用一系列特定的搜索语法和操作符来精确地定义搜索查询。这些语法和操作符允许用户过滤和调整搜索结果，提高搜索的准确性。二、安装 Google 下载 Google 浏览器 Google 官网https://www.google.c…...

编程日记 2024/2/3 21:45:20

SpringBoot实现轻量级接口反向代理、转发

目录 1、基本的对象1.1 配置类1.2 实体DTO1.3 路由代理拓展器1.4 请求对象 RestTemplate 2、核心转发代码3、暴露接口4、基础配置前言：想实现一个轻量级的接口反向代理和转发的一个接口服务，可以通过这个服务做一些需要认证才能访问的接口给到前端使用&…...

编程日记 2024/2/3 21:40:15

77. 组合 func combine(n int, k int) [][]int { //存储全部集合 result : make([][]int, 0) //存储单次集合 path : make([]int, 0) var backtrace func(n int, k int, startIndex int) backtrace func(n int, k int, startIndex int) { //当单次集合大小和k值相等&#xff…...

编程日记 2024/2/3 21:39:14

延伸与应用（三）婚姻与经济、运动、宗教、科技与经济

53．幸福婚姻的经济ABC方程式夫以信先其妇，则妇以信顺其夫。上秉常以化下，下服常而应上，其不化者，百未有一也。 ——《傅子》，傅玄（217—278） 在现代的小家庭中，由于家庭…...

编程日记 2024/2/3 21:38:13

mac上，配置bundletool，将aab转为apk

1.第一步打开终端，安装brew 2.安装bundletool brew install bundletool 3.aab转apk bundletool build-apks --bundle/MyApp/my_app.aab --output/MyApp/my_app.apks 如果下载了bundletool--xxx.jar，脚本命令前加 java -jar bundletool-all-1.5.0.j…...

编程日记 2024/2/3 21:37:11

wangEditor v4的简单使用

当前文档是 wangEditor v4 版本的。 wangEditor v5 已经正式发布，可参考文档。 v5 发布之后，v4 将不再开发新功能。介绍 English documentation wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。官网&#…...

编程日记 2024/2/3 21:30:04

简单实践 java spring boot 自动配置模拟

1.概要 1.1 需求，自己写一个redis-spring-boot-starter模拟自动配置自动配置就是在引入*-starter坐标后，可以已经spring框架的规则实现一些Bean的自动注入，并设置一些参数的默认值，且也可以在引入的工程中修改这些配置的值。这…...

编程日记 2024/2/3 21:28:02

BeanDefinition学习

Spring版本5.1.x Spring中的BeanDefinition是一个接口，用于描述Spring容器中Bean的元数据。BeanDefinition描述了Bean的各种属性，如名称、依赖关系、初始化方法等。这个接口通常用于在Spring的IoC容器中注册Bean，并且当容器需要创建Bean实例…...

编程日记 2024/2/3 21:26:00

ASP.NET的GridView控件中，实现同列内容合并

在ASP.NET的GridView控件中，实现同列内容合并的方法主要有两种：一种是使用RowDataBound事件，另一种是使用自定义定义函数使用RowDataBound事件这种方法是在GridView的每一行绑定数据时，比较当前行和前一行的同一列的值&#x…...

编程日记 2024/2/3 21:23:57

【文本到上下文 #8】NLP中的变形金刚：解码游戏规则改变者

一、说明欢迎来到我们对不断发展的自然语言处理 （NLP） 领域的探索的第 8 章。在本期中，我们将重点介绍一项重塑 NLP 格局的突破性创新：Transformers。在我们之前对 seq2seq 模型、编码器-解码器框架和注意力机制的讨论之后&#…...

编程日记 2024/2/3 21:19:54

mysql主流版本5.5/5.6/5.7/8.0重置修改密码方法

最近几天来回切换各个Mysql版本重置密码，记录一下各个版本重置密码的方法。 MySql 5.5 SET PASSWORD FOR usernamelocalhost PASSWORD(new_password);MySql5.6 SET PASSWORD FOR usernamelocalhost new_password;MySql5.7 ALTER USER usernamelocalhost IDENT…...

编程日记 2024/2/3 21:17:52

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍软件包管理工具dpkg dpkg核心指令详解安装软件包卸载软件包查询软件包状态验证软件包完整性手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核的 Linux 发行版&#xff…...

编程新知 2025/8/3 0:05:05

Objective-C常用命名规范总结

【OC】常用命名规范总结文章目录【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...

编程新知 2025/7/27 12:13:59

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2025/8/16 18:41:47

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...

编程新知 2025/8/12 1:10:14

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/8/16 1:38:31

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路： 分别把 tabledata 和表尾相关数据 console.log() 发现更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/8/15 15:51:25

免费PDF转图片工具

免费PDF转图片工具一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。工具截图主要特点 🚀 快速转换：本地转换，无需等待上…...

编程新知 2025/7/31 8:59:44

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/7/6 1:26:33

文章目录

1. Vue3简介

1.1. 性能的提升

1.2.源码的升级

1.3. 拥抱TypeScript

1.4. 新的特性

2. 创建Vue3工程

2.1. 基于 vue-cli 创建

2.2. 基于 vite 创建（推荐）

vite介绍

创建步骤

项目结构

安装插件

项目结构

总结

2.3. 一个简单的效果

Person.vue

App.vue

3. Vue3核心语法

3.1. OptionsAPI 与 CompositionAPI

Options API 的弊端

Composition API 的优势

3.2. 拉开序幕的 setup

setup 概述

setup 的返回值

setup 与 Options API 的关系

setup 语法糖

3.3. ref 创建：基本类型的响应式数据

3.4. reactive 创建：对象类型的响应式数据

3.5. 【ref 创建：对象类型的响应式数据】

3.6. 【ref 对比 reactive】

宏观角度

区别

使用原则

相关文章：