vue3 全网最全教程-----(1)

最新推荐文章于 2024-06-13 15:12:44 发布
最新推荐文章于 2024-06-13 15:12:44 发布
阅读量1.2k 收藏 19
点赞数 25
分类专栏： vue3 2024 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63358859/article/details/135282795
版权

目录

1. Vue3简介

1.1. 【性能的提升】

1.2.【 源码的升级】

1.3. 【拥抱TypeScript】

1.4. 【新的特性】

2. 创建Vue3工程

2.1. 【基于 vue-cli 创建】

2.2. 【基于 vite 创建】(推荐)

2.3. 【一个简单的效果】

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】

3.7. 【toRefs 与 toRef】

3.8. 【computed】

1. Vue3简介

1.1. 【性能的提升】

  • 打包大小减少41%。

  • 初次渲染快55%, 更新渲染快133%。

  • 内存减少54%。

1.2.【 源码的升级】

  • 使用Proxy代替defineProperty实现响应式。

  • 重写虚拟DOM的实现和Tree-Shaking。

1.3. 【拥抱TypeScript】

  • Vue3可以更好的支持TypeScript。

1.4. 【新的特性】

  1. Composition API（组合API）：

    • setup

    • ref与reactive

    • computed与watch

  2. 新的内置组件：

    • Fragment

    • Teleport

    • Suspense

  3. 其他改变：

    • 新的生命周期钩子

    • data 选项应始终被声明为一个函数

    • 移除keyCode支持作为 v-on 的修饰符

2. 创建Vue3工程

2.1. 【基于 vue-cli 创建】

点击查看官方文档

备注：目前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 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

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

 

## 1.创建命令
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

 自己动手编写一个App组件

<template>
  <div class="app">
    <h1>你好啊！</h1>
  </div>
</template>

<script lang="ts">
  export default {
    name:'App' //组件名
  }
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

安装官方推荐的vscode插件：

总结：

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

 

2.3. 【一个简单的效果】

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

<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>

3. Vue3核心语法

3.1. 【OptionsAPI 与 CompositionAPI】

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

Options API 的弊端

在了解Composition Api之前，首先回顾下我们使用Option Api遇到的问题，我们在Vue2中常常会需要在特定的区域（data，methods，watch，computed…）编写负责相同功能的代码。

图片

随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，代码可复用性也不高

图片 

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',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

 

setup 的返回值

  • 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
  • 若返回一个函数：则可以自定义渲染内容，代码如下：
setup(){
  return ()=> '你好啊！'
}

setup 与 Options API 的关系

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

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 lang="ts">
  export default {
    name:'Person',
  }
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

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

  1. 第一步：npm i vite-plugin-vue-setup-extend -D
  2. 第二步：vite.config.ts
  3. 第三步：<script setup lang="ts" name="Person">
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

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">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import {ref} from 'vue'
  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串，不是响应式的
  let tel = '13888888888'

  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)

    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    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'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
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 } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>

3.6. 【ref 对比 reactive】

宏观角度看：

  1. ref用来定义：基本类型数据、对象类型数据；

  2. reactive用来定义：对象类型数据。

  • 区别：

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

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

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

3.7. 【toRefs 与 toRef】

  • 作用：将一个响应式对象中的每一个属性，转换为ref对象。
  • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
  • 语法如下：
<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

 

3.8. 【computed】

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import {ref,computed} from 'vue'

  let firstName = ref('zhang')
  let lastName = ref('san')

  // 计算属性——只读取，不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */


  // 计算属性——既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>

 

前端 贾公子
关注
  • 25
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
若依ruoyi ruoyi-vue ruoyi-cloud 微服务全网最全视频教程网盘资源
12-25
若依ruoyi ，ruoyi-vue， ruoyi-cloud， 微服务全网最全视频教程网盘资源 若依框架系列视频教程(RuoVi-Vue前后端分高版本) 01 项目概述,mp4 02 项目运行,mp4 03 构建发布到 RuoYi-Cloud 微服务版本视频课程目录 ├...
Vue3 官方文档速通
weixin_64684095的博客
01-17 8368
Vue3官网文档速通
Vue3学习
最新发布
weixin_47180815的博客
06-13 992
修改名字
Vue 3 介绍
热门推荐
csdn727232616的博客
06-21 7万+
vue3基础
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 1万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
Vue3详细教程
m0_55734030的博客
11-06 2万+
（1）新增组合式api（2）更加接近原生（3）更加解耦（react启发）setup api ref 创建值类型响应式数据方法 在seup内部需要 .value 来访问设置值 reactive 创建引用类型响应式数据方法 defineProps 定义 组传的传参props defineEmits 定义组件发送的事件 watch 监听一个数据的变化 watchEffect 监听多个数据 生命周期 setup中的生命周期，没有beforeCreate与create
Vue3详解大全
weixin_51225684的博客
10-28 1万+
1、核心·-响应式组合式Api要求我们要将响应式的变量声明在setup函数中，setup函数是一个专门用于组合式Api的钩子函数。而且我们需要借助reactive函数来创建响应式的对象1、核心·-响应式如上，即为组合式Api的典型写法。在组合式Api中一定记得将需要暴露到模板的对象return出去（单独使用setup的时候）。更多声明响应式对象的方法前面我们已经了解了data方法（选项式Api中使用）、reactive（组合式Api中使用）两种不同的声明响应式对象的方式，那还有其他方式吗。
若依系列框架RuoYi(110集),RuoYi-Vue（129集）、RuoYi-Cloud（134集）若依全网最全视频教程网盘资
12-20
链接：https://pan.baidu.com/s/1Gjvwrp3lr0nXXv30U5UbOA RuoYi-Cloud 微服务版本视频课程目录 ├──01 项目概述.mp4 20.77M ├──02 微架构概念.mp4 20.99M ├──03 微架构及选型.mp4 21.19M ├──04 目录...
技术学习全网最全资料合集.docx
08-07
1. **Vue核心技术加实战精讲**：Vue.js是当前非常流行的前端框架之一，用于构建用户界面。学习资料包括Vue2.0的基础教程、案例开发、核心技术讲解以及实战项目，如高仿饿了么APP的开发。通过这些资源，你可以深入...
LogicFlow:流程可视化的前端框架
03-08
逻辑流 LogicFlow是一种流程可视化的前端框架，提供了一系列流程图交互，编辑所必需的功能和简单灵活的例程自定义，插件等扩展机制，方便我们快速在业务系统内部满足类流程图的需求。 特性 :bullseye:专业的 ...
Vue3：基础入门
CaptainDrake的博客
04-22 8279
vue简介、vue的基本使用、vue的指令与过滤器、品牌列表案例
vue3.0基本使用 详细说明！！！
^_^
07-14 3万+
一、vue3概述 （1）为什么要学习vue3 vue目前是前端框架中比较火热的，有了vue2为什么还要学习vue3呢，就像打游戏一样，为什么要升级呢，虽然公司大部分使用的还是vue2，还是有少部分公司使用vue3，提前了解使用vue3 也不是坏处 （2）vue3的新变化 1.性能提升，首次渲染更快，diff算法更快，内存占用更少，打包体积更小， 2.更好的Typescript支持(在vue下写TS更方便了) 3.提供新的写代码方式：Composition API (需要成本学习) （3
【vue3基础核心语法】简单学习vue3核心语法加elementPlus，vue3和vue2的区别，有vue2基础的看完这篇快速使用。学习笔记持续更新【详细注释】
seeeeeeeeeee的博客
12-09 6664
一直用的vue2写的。一直没有接触过vue3没有机会使用工作中自己又比较懒，一直拖着没学，因为感觉学了不用，过段时间我就忘得差不多了。这次刚好公司有了这个vue3的项目，我就来学习一波，然后实战练练刚好记得牢一点。中途遇到的各种问题和我学习到的一些vue3的语法等。就在这里记录下来学习笔记。方便自己忘了来看看，一直保持更新！！路由配置 element Plus 组件默认英文 全局转中文
Vue3全网最细介绍使用
主要发布一些日常学习代码及理解
11-02 7220
详细介绍了Vue3创建项目｜Setup｜Ref、Reactive｜context｜计算 监听属性｜Vue3生命周期｜自定义hook｜toRef
Vue3详细讲解
一个前端开发者
12-31 2万+
为什么要学vue3: 1. Vue是国内最火的前端框架, 2.Vue 3 于 2022 年 2 月 7 日星期一成为新的默认版本！ 3. Vue3性能更高，体积更小,4. Vue3.0在经过一年的迭代后，越来越好用. 动机与目的: 1. 更好的逻辑复用 与 代码组织 (composition组合式api) optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护! 2.更好的类型推导 (typescript支持)
Vue3超详细教程
m0_73939789的博客
08-25 5424
其中有许多重复的代码。侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听。通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep。如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的。在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据。
Vue3——vue3的简介
mantou_riji的博客
07-23 4029
httpshttps什么是vite?——新一代前端构建工具。（老大哥是webpack）优势如下。开发环境中，无需打包操作，可快速的冷启动。。轻量快速的热重载(HMR)。。真正的按需编译，不再等待整个应用编译完成。。速度比webpack快很多传统构建与vite构建对比图传统构建将所有的项目文件打包好之后放到服务器上，显示服务器准备好了vite构建上来先显示服务器准备好了，然后根据请求去找路由再去解析相应的模块。...
vue3的学习【超详细】
weixin_50166856的博客
05-18 8170
在Vue2中，数据响应式主要借助Object.defineProperty()来实现，存在的缺陷是无法操作数据的增加和删除，在Vue3中，数据响应式主要借助proxy和Reffect配合实现，可以做到实现数据的增删改查。指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统。
vue-cli3项目搭建与优化全攻略
"vue-cli3 从搭建到优化的详细步骤" 在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值