Vue3快速使用手册

已于 2024-02-05 21:29:45 修改
阅读量1.2k 收藏 21
点赞数 27
分类专栏： vue 文章标签： vue.js
于 2024-01-24 23:52:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ostkakah/article/details/135705994
版权

Vue3的创建

npm create vite@latest

1.设置项目名。

2.选择框架。

3.选择支持的语法，默认使用TS。

......

Vue3的使用

setUp(无法直接修改数据，也就是没有响应式)

在vue3中不不再推荐使用选项式编程而是使用组合式编程。

Vue2写法

<template>
  <div>
    <span>姓名:{{name}}</span>
    <br>
    <span>年龄:{{age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    data() {
        return {
            name: 'tolen',
            age: 18
        }
    },
    methods: {
        setName() {
            this.name = 'ostkaka'
        },
        addAge() {
            this.age++;
        }
    },
}
</script>

Vue3写法

<template>
  <div>
    <span>姓名:{{name}}</span>
    <br>
    <span>年龄:{{age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
    setup() {
        //变量
        let name = 'tolen';
        let age = 18;

        //函数
        function setName() {
            name = 'ostkaka'
        }
        function addAge() {
            age++;
        }
        return {name, age, setName, addAge}
    }
}
</script>

如果data函数和setup中设置的变量名相互冲突的时候会优先读取setup中的数据。

但是每次都需要return对应的数据，写起来非常的麻烦，所以我们可以将setup单独写一个script。

<template>
  <div>
    <span>姓名:{{name}}</span>
    <br>
    <span>年龄:{{age}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">年龄+1</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'Person',
}

</script>

<script lang="ts" setup>
    //变量
    let name = 'tolen';
        let age = 18;

        //函数
        function setName() {
            name = 'ostkaka'
        }
        function addAge() {
            age++;
        }
</script>

ref(用于定义响应式的基本数据，也可以定义对象，但是无法保证嵌套响应)

在我们需要保证响应式的数据赋值上使用ref函数，并且操作其中的vlaue属性,主要就是对value进行操作。

<script lang="ts" setup>
    import { ref } from 'vue'
    //变量，使用ref函数包裹
    let name = ref('tolen');
        let age = ref(18);
        //函数，主要做到响应式的效果就是使用ref中的value属性
        function setName() {
            name.value = 'ostkaka'
        }
        function addAge() {
            age.value++;
        }
</script>

reactive(用于定义响应式的对象)

在我们需要保证对象嵌套式的相应的时候我们就可以使用reactive。

<template>
  <div>
    <span>车牌:{{car.name}}</span>
    <br>
    <span>价格:{{car.cost}}</span>
    <br>
    <button @click="setName()">修改名字</button>
    <button @click="addAge()">加价</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {reactive } from 'vue'
    //对象
    let car = reactive({
      name:'BYD',
      cost: 2000000
    });
        //函数
        function setName() {
            car.name = 'ostkaka'
        }
        function addAge() {
            car.cost+=10000;
        }
</script>

 当要使用响应式对象赋值的时候，我们需要使用toRefs函数来将对象中键值赋值为响应式的数据。

我们每次使用ref中数据的时候都需要添加 .value，写起来非常的麻烦，所以我们可以配置插件进行修改。

computed

 编写计算属性，且计算属性是只读的，不同于普通的属性。

<template>
  <div>
    性:<input v-model="firstName"/>
    <br>
    名:<input v-model="secondName"/>
    <br>
    名字:<span>{{name}}</span>
    <button @click="change()">修改名字</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {ref, computed} from 'vue'
    let firstName=ref("to");
    let secondName=ref("len");
    let name = computed({
      set(val) {
        const[str1, str2] =  val.split('-');
        firstName.value = str1;
        secondName.value = str2;
      },
      get() {
          return firstName.value + secondName.value;
      }
    });
    let change = function() {
      name.value = "ost-kaka";
    }

</script>

在Vue3中主要就是引入computed函数，通这个函数来创建属性，并且在该函数中主要就是编写 set(修改属性)和get(获取属性)函数。

watch

watch是一个监听函数，我们且有三个参数：数据源，回调函数，监听配置。

watch的数据源只能是: ref，reactive，对象，gatter函数(返回一个数据)。

例子

<template>
  <div>
    名字:<span>{{name}}</span>
    <br>
    年龄:<span>{{age}}</span>
    <br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {ref, watch} from 'vue'
    let name = ref("tolen");
    let age = ref(18);
    let changeName = function() {
      name.value +='~';
    }
    let changeAge = function() {
      age.value++;
    }
    watch(name, function() {
      if(name.value != "ostkaka") {
        console.log(name.value);
      }
    })

</script>

暂停监听

//返回值就是暂停函数，通过对应的条件调用暂停函数
let stop = watch(() => person.value.name, function() {
        //编写对应的回调函数
        if(1==1) {
          stop();
        }
    })

 特殊情况

1.数据源是ref的话，直接使用ref就可以，不需要添加.value。

2.数据源是ref定义的对象的话，其默认是不支持深度监听的，所以需要在watch配置中添加deep:true。

    watch(name, function() {
      if(name.value != "ostkaka") {
        console.log(name.value);
      }
    },{deep:true})

3.数据源是reactive定义的话，其是默认开启深度监听的。

4.监听ref或reactive定义的对象中某个属性的时，如果属性是基本类型的话使用getter函数，如果是对象类型的话，可以直接监听，但是还是推荐使用getter函数，是可以在做对象属性监听的时候都使用getter函数进行编写。

//person.value.name对应ref中对象的属性
watch(() => person.value.name, function() {
        //编写对应的回调函数
    })

5.如果需要监听多个数据源的话，直接使用数组进行收集。

当我们需要自动去监听某些数据源的时候，我们就可以使用watchEffect，而watch需要我们手动的指出需要监听的数据源。

<template>
  <div>
    名字:<span>{{name}}</span>
    <br>
    年龄:<span>{{age}}</span>
    <br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {ref, watchEffect} from 'vue'
    let name = ref("tolen");
    let age = ref(18);
    let changeName = function() {
      name.value +='~';
    }
    let changeAge = function() {
      age.value++;
    }
    watchEffect(function() {
        console.log(name.value)
    })

</script>

标签中的ref属性

如果使用标签中的id作为唯一标识的话，在不同的组件之间就会有冲突的风险。使用使用ref作为容器用于间隔。

<template>
  <div>
    名字:<span ref="person">{{name}}</span>
  </div>
</template>

<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
//且person中的值就是该标签的数据。
    let person  = ref();

</script>

如果ref加在html标签上，则其数据就是标签数据，如果ref加在主键标签上，则其数据就是主键数据。

 ts类型规范

自定义接口

//对应的自定义类型
export interface Person {
    name: string,
    age: number,
}

//标识对应类型的数组形式
export type Persons = Array<Person>

在vue中进行使用

<script lang="ts" setup>
    import {Persons, type Person} from '../types/index'
    let ren:Person = {name:'tolen', age: 18};
    let rens:Persons = [
    {name:'tolen', age: 18},
    {name:'tolen', age: 18},
    {name:'tolen', age: 18}
    ];
</script>

props

使用defineProps函数进行参数的传递。

//父组件传入对应的list集合

<template>
  <div>
   <ul>
    <li v-for="item in list" :key="item.age">
      {{item.name}} -- {{item.age}}
    </li>
   </ul>
  </div>
</template>

<!-- 如果没有主键名字的要求，我们甚至可以将此script省略掉 -->
<script lang="ts">
export default {
    name: 'car',
}

</script>

<script lang="ts" setup>
    import {defineProps} from 'vue';
    defineProps(['list']);
    
</script>

将接口写入泛型就可以指定对应类型的数据。

<script lang="ts" setup>
    import {Persons } from '../types';
    import {defineProps} from 'vue';
    defineProps<{list?:Persons}>();
    
</script>

使用withDefaults，设置默认的数据。且需要是个函数返回对应的数据。

<script lang="ts" setup>
    import {Persons } from '../types';
    import {defineProps, withDefaults} from 'vue';
    // defineProps<{list?:Persons}>();
    withDefaults(defineProps<{list?:Persons}>(), {
      list: () => [{name: 'ostkaka', age: 45}]
    });
    
</script>

Vue的生命周期

1.创建：setUp中的代码就是创建时需要执行的代码。

2.挂载前/挂载：使用onBeforeMount和onMounted。

    //挂载前
    onBeforeMount(() => console.log("挂载前"));
    //完成挂载
    onMounted(() => console.log("完成挂载"));

 3.更新前/更新：使用onBeforeUpdated和onUpdated。

    //更新前
    onBeforeUpdate(() => console.log("更新前"));
    //更新完成
    onUpdated(() => console.log("更新"));

4.卸载前/卸载：使用onBeforeUnmount和onUnmounted

    //卸载前
    onBeforeUnmount(() => console.log("卸载前"));
    //卸载完成
    onUnmounted(() => console.log("卸载完成"));

hooks

将相同模块的代码放在同个ts文件中，进行统一的维护。

集中的ts文件

import { ref } from "vue";

export default function() {
    let num = ref(50);

    let add = function() {
        return num.value += 10;
    }
    //返回数据可以存在多个
    return {num, add};
}

在主键中使用

<script lang="ts" setup>
    import useradd from '../hooks/useAdd'
    const {num,add} = useradd();
</script>

路由

安装路由

npm i vue-router

创建router文件/index.ts，创建路由规则。(使用history的工作模式，也可以使用哈希模式（就是路径中带#）)

import {createRouter, createWebHistory} from "vue-router";

import blog from '../page/blog.vue'
import user from '../page/user.vue'

const router = createRouter({
//使用history的工作模式，也可以使用哈希模式（就是路径中带#）
    history: createWebHistory(),
    routes:[
        {   name: 'blog'
            path:'/blog',
            component: blog
        },
        {   
            name: 'user',
            path:'/user',
            component: user
        }
    ]
})

export default router

在main.ts中使用router。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

let app = createApp(App);
app.use(router);
app.mount('#app');

使用router-link标签进行跳转(可以使用字符串，也可以使用 对象形式，对象中可以使用name和path来指定路由)，使用router-view指定渲染vue主键的位置。

App.vue例子

<script setup lang="ts">

</script>

<template>
  <router-link to="/blog">博客区</router-link> <span>||</span>
  <router-link to="/user">用户区</router-link>
  <hr>
  <router-view></router-view>
</template>

测试结果

 如果在子页面中还要展示其他的小页面的话，就可以使用子路由，使用参数 children。

路由传递参数

在router-Link中的to属性可以传入query/params参数。

 <router-link :to="
  {
    name: 'blog',
    query/params: {
      name: 'ostkaka',
      age: 13
    }
  }
  ">博客区</router-link>

在对应的组件上使用useRoute函数进行接收。

import {useRoute} from 'vue-router'
  let route = useRoute();
 // route.query / route.param

可以使用restful风格，在路由配置中编写路径格式，必须使用name进行配置。(如果某个参数非一定存在的话就在其后加`?`)

在对应的组件上使用useRoute.params进行接收。 

编程式路由导航

使用route-Link是在template中进行编写的，如果需要在script中编写的话，我们需要使用useRouter进行编写。useRouter.push函数跳转到对应的路径。（运用场景：定时跳转，划过跳转，等等，在script编程）

重定向

将一个路径直接重定向到另一个路径上。 

pinia(解决重复请求问题，将请求结果先存储到pinia中，然后在去pinia中获取，在每次获取store都需要调用use...Store方法)

作用：集中管理数据。

安装

npm i pania

在main.t中引入并使用pinia。

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'

let app = createApp(App);
//创建pinia
const pinia = createPinia();
//使用pinia
app.use(pinia);
app.mount('#app');

存储数据：创建文件夹 /store，并创建对应模块的文件，在state中编写对应的数据。

import {defineStore} from 'pinia'

export const useAddStore = defineStore('add', {
    state() {
        return {
            sum: 1,
            size: 1
        }
    }
})

修改数据

1.直接修改。

<script setup lang="ts">
    import {useAddStore} from '../store/add'
    
    let addStore = useAddStore();
    console.log(addStore);
    let add = function () {
       addStore.sum += addStore.size;
    }
    let minus = function () {
        addStore.sum -= addStore.size;
    }
</script>

2.使用$patch函数。

<script setup lang="ts">
    import {useAddStore} from '../store/add'
    
    let addStore = useAddStore();
    //修改对应对应的属性
    addStore.$patch({
        sum: 100,
        size: 2
    })
    
</script>

3.通过action属性进行修改。

import {defineStore} from 'pinia'

export const useAddStore = defineStore('add', {
    actions: {
        add(sum, size) {
            this.sum = sum;
            this.size = size;
        }
    },
    state() {
        return {
            sum: 1,
            size: 1
        }
    }
})

在对应的组件中直接调用此函数即可修改。

storeToRefs的使用

如果需要使用store中的数据时为了不破坏响应式，我们就可以使用storeToRefs来保证数据的响应式。（storeToRefs('store')）

组件通信

1.使用自定义事件(子传父常使用)

在传递者进行 定义事件和触发事件

<script setup lang="ts">
    import{onMounted} from 'vue'
    //声明事件
    const emit = defineEmits(['send-toy']);
    onMounted(() => {
        emit('send-toy', 'ostkaka');
    })
</script>

获得数据者进行 事件的绑定

<script setup lang="ts">
  import Add from './components/Add.vue' 
  import Love from './components/Love.vue'
  
  let saveToy = function(value:any) {
    console.log('@', value);
  }
</script>

<template>
  <Add @send-toy="saveToy"/>
  <hr>
  <Love/>
</template>

2.使用mitt组件（任意主件间通信）

下载mitt

npm i mitt

创建mitt工具包

//引入mitt
import mitt from 'mitt'

const emitter = mitt()

export default emitter

在需要进行通信的组件中进行引入

在获取数据的组件中使用emitter.on进行事件的绑定

<script setup lang="ts">
  import emitter from './utils/emitter'
  
  //绑定事件
  emitter.on('send-toy', (value:any) => {
    console.log("@", value)
  })

</script>

在传递数据的组件中使用emitter.emit进行事件的触发

<script setup lang="ts">
    import emitter from '../utils/emitter'
    // 触发事件
    emitter.emit('send-toy', 'ostkaka')
    
</script>

3.使用provide和inject实现爷孙数据传递

在上级处使用provide函数来传递数据给子级。

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

  let money = ref(100);
  //向自己的子孙通过数据
  provide('money', money);

</script>

在子级处使用inject函数来接收上级的数据。

<script setup lang="ts">
    import { inject } from 'vue';

    //使用上级的数据,第二个参数为默认数据
    let money = inject('money', 1);
    
</script>

最终实现上级向子级数据的传递。

插槽

1.默认插槽

 在对应的组件中编写插槽位置。

<template>
    <slot></slot>
</template>

<script lang="ts">
    export default {
        name: 'Add'
    }
</script>

<script setup lang="ts">
    
</script>

在调用处使用。


<template>
  <Add>
    <span>你好</span>
  </Add>
</template>

2.具名插槽

指定标签存放在对应的插槽上。

<template>
    <slot name="s1"></slot>
    <slot name="s2"></slot>
</template>

<script lang="ts">
    export default {
        name: 'Add'
    }
</script>

<script setup lang="ts">
    
</script>

使用标签填充插槽。

<template>
  <Add>
    <template v-slot:s1>
      <span>你好</span>
    </template>
    <template #s2>
      <span>ostkaka</span>
    </template>
  </Add>
</template>

可以使用 # 代替 v-slot: 指定插槽。

3.作用域插槽

当插槽的组件的数据需要传递到调用者时就可以使用此插槽。

<template>
    <slot name="s1" :userName="name"></slot>
</template>

<script lang="ts">
    export default {
        name: 'Add'
    }
</script>

<script setup lang="ts">
    import { ref } from 'vue';
    let name = ref('ostkaka');
</script>

调用者使用传来的数据。

<script setup lang="ts">
  import Add from './components/Add.vue' 
</script>

<template>
  <Add>
    <template v-slot:s1="value">
      <span>你好</span>
      <span>{{value.userName}}</span>
    </template>
  </Add>
</template>

秃狼
关注
  • 27
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3入门指南-基础用法
m0_53266704的博客
07-02 737
Vue3入门指南-基础用法 终于 Vue3 的正式版发布了，两年多的开发，多位贡献者的努力。凝聚了这么多优秀开发者的智慧和努力，注定 Vue3 会成为下一个前端主流开发框架。本篇文章将带领大家一步步学习和了解使用vue3,当然更多的是我的学习过程。 前端就是这样，要时刻保持学习，每个月都有新技术的产生。如果每个知识都学，显然不现实，所以也要有选择性的学习。例如现在主流的三大框架，Vue/React/angular, 基于这三大框架的扩展框架我都应该有所涉及和了解。 有的小伙伴这时候会说，我们公司还没开始使
浏览器扩展工具vue.js快速使用手册
04-25
系统以vue开发模式发布，通过vue工具，可以显示所有url资源，并检测这些url资源页面，是否可以直接打开，不用登陆。本手册教你如何在谷歌浏览器快速部署使用vue.js
VUE3 手册
weixin_40565328的博客
11-26 755
setup setup函数，是在beforeCreate之前执行(创建实例前$el)。由于在执行setup 时尚未创建组件实例，因此在 setup 选项中没有 this。 setup 参数 使用setup时，它接受两个参数： props: 组件传入的属性 context：包含3个属性 props是响应式的， 当传入新的props 时，会及时被更新。由于是响应式的， 所以不可以使用ES6解构，解构会消除它的响应式。这段代码会让props不再支持响应式： import { defineComponent
vue3.0开发手册(实用版)
hgvhjgghv的博客
03-27 1661
块来定义
vue3基础手册，内含setup函数以及setup语法糖代码示例（持续更新中...）
zz_prayer的博客
11-29 862
vue3中，可以使用语法糖的方式进行开发，也可以使用setup函数的方式进行开发。该文章仅记录常用API，后续会不断更新...
vue3最全安装手册
把全世界的花都给一个人
03-02 523
一，cmd 1，win+R打开运行，输入cmd打开命令窗口 2，切换盘符d: f: 3，切换目录，cd目录地址 4，创建目录，md 目录地址 5，删除目录，rd 目录地址，rd/s/q静默删除目录与目录内容 6，/根目录 7，./当前目录 8，../上一层目录 9，help 查看命令 10，help 命令 查看命令用法 11，首字母+tab提示当前目录的文件夹 12，上箭头：上一个命令 13，下箭头：下一个命令 14，其他 ipconfig 查看ip ...
vue安装手册
10-31
可以快速安装vue,包含配置的一些操作，可以把所需要安装的一系列东西按步骤操作即可
Vue3-Admin-Plus:Vue3管理模板
04-01
Vue3 Admin Plus简介是一个后台前端...文件对象列表使用手册：对象表单使用手册： 开发# 克隆项目git clone https://github.com/JaxsonWang/Vue3-Admin-Plus.git# 进入项目目录cd Vue3-Admin-Plus# 安装依赖npm inst
Vue.js 2.0 参考手册.chm
03-12
vue.js 2.0 api离线手册能够帮助快速掌握基础知识并且在开发过程中提供辅助，让你清楚的了解各类函数的用法，各类模板语法的使用效果，从而更好的制作出不错的作品，轻松完成各项工作。
用vue快速开发app的脚手架工具
12-11
使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本文最大特点: webpack4 多页面 跨域Proxy代理 VConsole移动端调试,手机上的开发者工具 es6/es7 babel 转换 项目地址 GitHub 使用手册 ...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
学习vue必须要看的中文文档
Vue3使用讲解（超详细）
常来常往，共同成长
12-14 2624
Vue3 是一种流行的JavaScript框架，用于构建交互式的Web应用程序。它是Vue.js的最新版本，带来了许多新特性和改进，包括更好的性能、更小的包体积和更好的开发体验。本文将详细介绍 Vue3 的使用，包括安装和创建 Vue3 项目、组件的创建和通信、响应式数据和计算属性、模板语法和指令、条件渲染和列表渲染、表单处理、路由和导航、状态管理以及 Vue3 的生态系统。
Vue3手册译稿 - 基础 - 组件基础
zhouyu629的专栏
03-10 135
基础示例 一个Vue组件示例： // 创建一个Vue应用 const app = Vue.createApp({}) // 定义一个叫`button-counter`的全局组件 app.component('button-counter', { data() { return { count: 0 } }, template: ` <but...
VUE3极速上手手册
最新发布
roykingw的专栏
04-01 1055
后端程序员最快速度上手最新的VUE3框架。前端和后端，小孩子才做选择，技术人的选择是都要。
Vue3 详细教程
qq15035899256的博客
05-23 9457
本文是对Vue的学习，学习了Vue的选项式API和组合式API，组件之间的交互，引入swiper第三方插件，网络请求封装，还有Router路由，Vuex状态管理，加载Element-plus组件。之后的学习内容将持续更新！！！
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的基本使用(超详细)
热门推荐
luofei_create的博客
06-06 14万+
2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece特点：无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)开发桌面端、移动端、WebGL，甚至是命令行终端中的界面什么是hook函数： 本质是一个函数，把setup函数中使用的Composition API进行了封装类似于vue2.x中的 mixin。......
vue3手册 pdf下载
08-20
您好！很高兴回答您的问题。 要下载 Vue3 手册的 PDF 版本，您可以按照以下步骤...您还可以使用搜索引擎来搜索 "Vue3 手册 PDF 下载"，并从结果中找到其他可靠的下载来源。 希望以上信息能够帮助到您，祝您学习愉快！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值