Vue完整版（三）

最新推荐文章于 2022-06-09 11:18:34 发布
最新推荐文章于 2022-06-09 11:18:34 发布
阅读量274 收藏 2
点赞数
分类专栏： 前端开发 文章标签： vue vue.js 前端 大前端 mvvm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46990523/article/details/109428133
版权

Vue完整版（三）

八、Axios异步通信

  1. 什么是Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API [JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

中文文档：http://www.axios-js.com/

  1. 为什么要使用Axios

由于Vue.js是一个 视图层框架 且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !

  1. 导入Axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  1. 实例 demo

咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 data.json的文件并填入上面的内容，放在项目的根目录下。

{
  "name": "roc",
  "url": "https://blog.csdn.net/",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "南昌",
    "city": "江西",
    "country": "中国"
  },
  "links": [
    {
      "name": "博客园",
      "url": "https://www.cnblogs.com/"
    },
    {
      "name": "GitHub",
      "url": "https://github.com/"
    },
    {
      "name": "Gitee",
      "url": "https://gitee.com/"
    }
  ]
}

新建一个demo.html，来试试Axios的异步通信：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--v-clock 解决闪烁问题-->
    <style>
        [v-clock] {
            display: none;
        }
    </style>

</head>
<body>

<!--view层 模板-->
<div id="vue" v-clock>
    <div>名称：{{info.name}} </div>
    <div>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}} </div>
    <div>博客：<a v-bind:href="info.url">{{info.url}}</a></div>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--导入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm = new Vue({
        el: "#vue",
        //Model：数据
        data: {
        },
        //data   : vm的属性
        //data() : vm方法
        data(){
            return{
                //请求的返回参数,必须和json字符串一样
                info:{
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        //钩子函数，链式编程，ES6新特性
        mounted(){
            axios.get("../data.json").then(response => (this.info = response.data))
            axios.get("../data.json").then(response => (console.log(response.data)))
        }
    });
</script>

</body>
</html>
  • data: vm的属性
  • data() : vm方法
    • return{}: 请求的返回参数,必须和json字符串一样
  • mounted(){}: 钩子函数，链式编程，ES6新特性

说明:

  1. 在这里使用了 v-bind将a:href 的属性值与 Vue 实例中的数据进行绑定
  2. 使用 Axios 框架的 get 方法请求AJAX并自动将数据封装进了 Vue 实例的数据对象中
  3. 我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！
  4. 关于代码中的v-clock 解决闪烁问题，可参考 Vue指令：v-clock解决页面闪烁问题

九、计算属性

文档：https://cn.vuejs.org/v2/guide/computed.html

  1. 什么是计算属性
  • 计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个属性其次这个属性有 计算的能力（计算是动词），这里的 计算 就是个函数；
  • 简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！
  1. 实例 demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <!-- 调用methods里的方法,得用() -->
    <p>currentTime1: {{currentTime1()}}</p>
    <!-- 调用计算属性computed的方法,不能用() -->
    <p>currentTime2: {{currentTime2}}</p>
</div>

<!--1. 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        //Model：数据
        data: {
            message: "Hello,Roc!"
        },
        methods: {
            currentTime1: function () {
                return Date.now(); //返回当前时间戳
            }
        },
        //计算属性
        computed: { //methods、computed中的方法名不能重名;重名后，只会调用methods中的方法
            currentTime2: function () {
                return Date.now(); //返回一个时间戳
            },
        }
    });
</script>

</body>
</html>

说明：

  • 调用methods里的方法,得用()
    • methods是方法
  • 调用computed的方法,不能用()
    • computed是计算属性，是属性
  • methods、computed中的方法名不能重名;重名后，只会调用methods中的方法
  1. 进阶
//计算属性
computed: { //methods、computed中的方法名不能重名;重名后，只会调用methods中的方法
    currentTime2: function() {
    //currentTime1: function() {
        this.message;
        return Date.now(); //返回一个时间戳
    }
}

属性返回前，如果有数据刷新，缓存页也刷新！

  1. 结论

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？

此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

十、插槽slot：内容分发

文档：https://cn.vuejs.org/v2/guide/components-slots.html

  1. 什么是插槽

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot>元素作为承载分发内容的出口。

它允许你像这样合成组件：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 <navigation-link>的模板中可能会写为：

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

当组件渲染的时候，<slot></slot>将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

甚至其它的组件：

<navigation-link url="/profile">
  <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

如果 <navigation-link> 的 template 中 没有 包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

  1. 内容分发

在 Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中。

  1. 实例 demo

比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

  • 第一步: 定义一个待办事项的组件
<!-- 组件：todo -->
<div id="app"">
    <todo></todo>
</div>
              
<!-- 1.导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
<script>
    Vue.component('todo', {
        template: '<div>\
                    <div>待办事项</div>\
                    <ul>\
                        <li>Linux</li>\
                        <li>Spring Boot</li>\
                        <li>Vue</li>\
                    </ul>\
                   </div>'
    });
</script>
  • 第二步: 我们需要让,待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!
  1. 将上面的代码留出一个插槽,即<slot>：
Vue.component('todo', {
    template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
               </div>'
});
  1. 定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件：
Vue.component('todo-title', {
    props: ['title'],
    template: '<div>{{title}}</div>'
});
Vue.component('todo-items', {
    //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
    props: ['index', 'item'],
    template: '<li>{{index + 1}}. {{item}}</li>',
});
  1. 实例化 Vue 并初始化数据：
var vm = new Vue({
    el: '#app',
    data: {
        todoTitle: 'Jerry学JavaWeb',
        todoItems: ['Linux', 'Spring Boot', 'Vue'],
    }
});
  1. 将这些值，通过插槽插入：
<!-- 组件：todo -->
<div id="app"">
    <todo>
        <todo-title slot="todo-title" 
            v-bind:title="todoTitle">
        </todo-title>
        <todo-items slot="todo-items" 
            v-for="(item, index) in todoItems" 
            v-bind:item="item" 
            v-bind:index="index":key="index"></todo-items>
        </todo-items>
    </todo>
</div>

说明：
我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title和 todo-items 插槽中。

十一、自定义事件

文档：https://cn.vuejs.org/v2/guide/components-custom-events.html

  1. 什么是自定义事件

通过上面"插槽slot：内容分发"的代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？

此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题：

使用this.$emit ('自定义事件名',参数)
在这里插入图片描述

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。

  1. 自定义组件的v-model

2.2.0+ 新增

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

  1. 实例 demo
  • 在vue的实例中,增加了 methods 对象并定义了一个名为 removeTodoItems 的方法：
    var vm = new Vue({
        el: '#app',
        data: {
            todoTitle: 'Jerry学JavaWeb',
            todoItems: ['Linux', 'Spring Boot', 'Vue'],
        },
        methods: {
            //该方法可以被模板中自定义事件触发
            removeItems: function (index) {
                console.log("删除 " + this.todoItems[index] + " 成功");
                // splice():方法 向/从 数组中 添加/删除 项目，然后返回被删除的项目，其中 index 为 添加/删除 项目的位置，1 表示删除的数量
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
  • 修改 todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件：
    Vue.component('todo-items', {
        //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
        props: ['index', 'item'],
        // “:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符
        //只能绑定当前组件的方法
        template: '<li>{{index + 1}}. {{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                //这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
                this.$emit('remove', index);
            }
        }
    });
  • 修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中：
    <!--增加了 v-on:remove="removeItems(index)" 自定义事件，该事件会调用 Vue 实例中定义的名为 removeItems 的方法-->
    <todo-items slot="todo-items"
                v-for="(item, index) in todoItems"
                v-bind:item="item"
                v-bind:index="index"
                v-on:remove="removeItems(index)"></todo-items>
    </todo-items>
  • 完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 组件：todo -->
<div id="app">
    <todo>
        <todo-title slot="todo-title"
                    v-bind:title="todoTitle">
        </todo-title>
        <!--增加了 v-on:remove="removeItems(index)" 自定义事件，该事件会调用 Vue 实例中定义的名为 removeItems 的方法-->
        <todo-items slot="todo-items"
                    v-for="(item, index) in todoItems"
                    v-bind:item="item"
                    v-bind:index="index"
                    v-on:remove="removeItems(index)"></todo-items>
        </todo-items>
    </todo>
</div>

<!--1. 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    Vue.component('todo', {
        template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
               </div>'
    });
    Vue.component('todo-title', {
        props: ['title'], //props传递参数不能使用驼峰命名法则，不然数据没法渲染到页面上
        template: '<div>{{title}}</div>'
    });
    Vue.component('todo-items', {
        //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
        props: ['index', 'item'],
        // “:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符
        //只能绑定当前组件的方法
        template: '<li>{{index + 1}}. {{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                //这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
                this.$emit('remove', index);
            }
        }
    });

    //再实例化
    var vm = new Vue({
        el: '#app',
        data: {
            todoTitle: 'Jerry学JavaWeb',
            todoItems: ['Linux', 'Spring Boot', 'Vue'],
        },
        methods: {
            //该方法可以被模板中自定义事件触发
            removeItems: function (index) {
                console.log("删除 " + this.todoItems[index] + " 成功");
                // splice():方法 向/从 数组中 添加/删除 项目，然后返回被删除的项目，其中 index 为 添加/删除 项目的位置，1 表示删除的数量
                this.todoItems.splice(index, 1);//一次删除一个元素
            }
        }
    });
</script>

</body>
</html>
@Corgi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的使用（下载vue.min.js+创建测试用的项目+Vue实例创建）
我爱编程持之以恒
08-05 6911
Vue.js是一套构建用户界面的渐进式框架。只关注视图层， 采用自底向上增量开发的设计。 官网：https://vuejs.org/ VUE文档：https://vuejs.org/v2/guide/ 简介 Vue是一个用于构建用户界面的渐进式框架，从一开始就被设计为可逐步采用。核心库只关注于视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够支持复杂的单页应用程序。 ...
Vue基础（三）
weixin_59675867的博客
07-29 237
计算属性和侦听器的总结，事件绑定v-on和语法糖写法，v-on参数传递，v-on修饰词，常用按键别名，
Vue完整版（一）
Roc的博客
10-31 1340
Vue完整版（一）一、Vue概述二、前端知识体系2.1、前端三要素2.1.1、什么是CSS预处理器2.1.2、**Native原生JS开发**2.1.3、**TypeScript微软的标准**2.2、JavaScript框架2.3、UI 框架2.4、JavaScript构建工具2.5、三端统一2.5.1、混合开发（Hybid App）2.5.2、微信小程序2.6、后端技术2.7、主流前端框架2.7.1、iView2.7.2、ElementUI2.7.3、ICE2.7.4、VantUI2.7.5、AtUI2.
浅析Vue完整版与非完整版区别
Dax1_的博客
08-25 156
最佳实践：使用非完整版，配合vue-loader 思路： 1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数 2.保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数 3.脏活loader做，vue-loader把vue文件里的HTML转化为h函数 如果vue.js错用成vue.runtime.js：无法将HTML编译成视图； 如果vue.runtime.js错用成vue.js：代码体积变大，因为vue.js有编译HTML的功能。 template和render怎么使用 vue.
vue完整版和非完整版的区别和使用
小峰同学的前端小屋
06-19 625
文章目录两个版本对应的文件名template 和 render 怎么用如何用 codesandbox.io 写 Vue 代码 官网最全：https://cn.vuejs.org/v2/guide/installation.html 两个版本对应的文件名 完整版：vue.js 内含compiler，编译器可以把试图上的html转成DOM节点，转成html中的内容，所以体积大，不建议用，是从HTML获得视图。 非完整版：vue.runtime.js 非完整版中的html只是字符串，且不能从html中获取视图
Vue官网下载Vue.js和Vue.min.js
热门推荐
醉梦洛的博客
09-16 3万+
1.打开Vue官网 https://vuejs.org/ 2.下载步骤 ①第一步 ②第二步 ③第三步 ④第四步，下载完成
vue(三）
weixin_45824445的博客
02-13 142
vue复习笔记tabbar 118 tabbar基本结构的搭建 把之前的一些不需要的东西清空删掉 重新打包 没有封装思想的情况 文字没有挨到边上因为有margin距离 解决以上问题 方法如下 把这个文件在main.js中生成依赖 这个是设置样式有关的 把它挪到app.vue里面去 require('./assets/css/base.css') 如上也行 但如果初始化的样式特别多...
Vue.js 最新官方下载地址与项目导入
LlanyW的专栏
06-09 3万+
在官网上下载vue.js或者是vue.min.js。并用标签引入。下载网址是https://vuejs.org/v2/guide/installation.html。进入官网后，点击下载这两个，其中这两个有一个是vue.js 有一个是vue.min.js。 2者的区别：vue.js没有经过压缩，适合开发测试Debug时使用，vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。** 导入vue的方法非常简单, 然后直接拖到项目里的js目录，.........
前端框架 Vue.js
hl404的博客
07-09 785
一、MVC模式和MVVM模式的区别 由于vue框架采用的是mvvm模式的开发，这里把MVC模式和MVVM两种模式做一个详细的解释说明。 在解释两种模式之前，首先要先理解一个概念，MVC是一种设计模式，这个模式既可以用在前端也可以用在后端，基于这个模式衍生出许多mvc框架，比如SpringMVC、Struts2、Tapestry、JSF等。但是千万不要把mvc错误认为就是SpringMVC，模式是模式，模式是可以复用到很多地方的，框架是框架，框架的出现是为了解决某一特定的问题的。比如springmvc就是为了
vue的使用（引用/创建vue项目）（一）
weixin_38797742的博客
02-28 1607
在程序开发中，有三种方式创建vue项目，本地引入vuejs、使用cdn引入vuejs、使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用，大大方便了开发步骤，使用广泛。 一、vue本地引用 在官网下载vue.js，通过script标签引入。 开发版本：https://vuejs.org/js/vue.js 包含完整的警告和调试模式 生产版本：https://vuejs.org/js/vue.min.js 删除了警告，30.90KB min+gzip 注意：在开发环境下不要
vue.min.js官方2.6.14版本
03-11
vue.min.js官方2.6.14版本
vue.min.js 文件直接引入就可以
12-30
vue源文件vue.js
vue.min.js文件
小汤圆
07-06 2073
/*! Vue.js v2.6.14 © 2014-2021 Evan You Released under the MIT License. / !function(e,t){“object"typeof exports&&“undefined”!=typeof module?module.exports=t():"function"typeof define&&define.amd?define(t):(e=e||self).Vue=t()}(this,function
Vue 获得 vue.min.js 文件
卡尔特斯
03-23 3296
有时候局部使用 Vue 进行开发，需要用到 vue.min.js，方便导入使用。 1、打开 Vue Git 地址 下载。 2、下载的 Vue 项目中找到 dist 文件，该文件中就有 vue.js(未压缩)、vue.min.js(压缩) 文件，拖出来使用即可。 3、(附带) 也可以从当前已有的 Vue 项目中拿到第 2 步中的文件，node_modules -> vue -> dist，该文件跟第 2 步一样。 ...
Vue.js的基本使用01
qq_41328653的博客
06-04 133
新建项目 (普通项目即可) 创建目录，引入Vue.js (开发用vue.js,上线用vue.min.js) 创建Vue对象 双向数据绑定 ：v-model 显示数据：{{xxx}} <html> <head> <meta charset="utf-8"> <title></title> </head> &lt...
Vue.js 01 概述
loetca
04-30 261
Vue.js 01 概述
引入vue.min.js
小汤圆
07-06 1963
** 导入vue的方法非常简单，只需要去官网下载vue.min.js即可 ** 然后直接拖到项目里 加入如下代码
vue.js库使用
大白的博客
06-29 2000
1. vue.js介绍 Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。 Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。 Vue的核心库只关注视图层，Vue的目标是通...
Vue入门教程 第一篇 （概念及初始化）
Hi-Jimmy
10-16 931
注：为了本教程的准确性，部分描述引用了官网及网络内容。 安装Vue 1、使用npm安装vue： npm install vue 2、下载使用js文件： https://vuejs.org/js/vue.min.js Vue概念 Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vu...
vue千途面经完整版
最新发布
06-09
Vue千途面经（也称为Vue全栈开发实战或Vue全栈教程）是一系列全面学习Vue.js框架及其前后端技术集成的实践课程，通常涵盖了从基础入门到高级应用的全过程。它通常包括以下几个部分： 1. Vue基础知识：介绍Vue的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值