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

vue3快速入门

news 2026/2/10 12:47:43

文章目录

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。发送模版消息： import requests da…...

编程新知 2026/2/8 4:37:13

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...

编程新知 2026/1/23 10:24:30

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...

编程新知 2026/2/1 3:12:03

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。请求方法 ： GET ：用于获取资源，…...

编程新知 2025/10/3 0:42:17

快刀集(1): 一刀斩断视频片头广告

一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。电影嘛，要沉浸，…...

编程新知 2026/1/8 0:40:27

实战三：开发网页端界面完成黑白视频转为彩色视频

一、需求描述设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。效果图二、实现思路总体思路： 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示逐帧…...

编程新知 2026/2/4 3:31:19

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战某短视频点播企业深耕国内用户市场，但其后台应用系统部署于东南亚印尼 IDC 机房。随着业务规模扩大，传统架构已较难满足当前企业发展的需求，企业面临着三重挑战： ① 业务：国内用户访问海外服…...

编程新知 2026/1/29 7:55:37

文章目录

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】

宏观角度

区别

使用原则

相关文章：