学习vue笔记（2）

最新推荐文章于 2024-09-20 11:00:29 发布
最新推荐文章于 2024-09-20 11:00:29 发布
阅读量987 收藏
点赞数 1
分类专栏： 笔记 vue学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQQQQQFJQ/article/details/122755593
版权

目录

VUE.set的使用

vue监测数组原理

总结vue检测数组

收集表单数据

过滤器

v-text指令

v-html指令

v-cloak&v-once&v-pre属性

自定义属性

自定义全局属性

生命周期

生命周期之挂载

生命周期之更新

生命周期之销毁

生命周期之总结

组件

非单文件组件

几个注意点

组件的嵌套

VueComponent组件实例对象

单文件组件

VUE.set的使用 

 

vue监测数组原理

 

 总结vue检测数组

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1</button><br />
        <button @click="addSex">添加性别属性，默认值:男</button><br />
        <button @click="student.sex='未知'">修改性别</button><br />
        <button @click="addFriends">在列表首位添加一个朋友</button><br />
        <button @click="updateFirstFriendName">修改第一个朋友的名字为:张三</button><br />
        <button @click="addHobby">添加一个爱好</button><br />
        <button @click='updateHobby'>修改第一个爱好为:开车</button><br />
        <button @click="removePlay"> 过滤掉玩游戏</button>
        <h3>姓名:{{ student.name}}</h3>
        <h3>年龄:{{student.age}}</h3>
        <h3 v-if="student.sex">性别:{{student.sex}}</h3>
        <h3>爱好:</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <h3>朋友们:</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}---{{f.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: "#root",
            data: {
                student: {
                    name: '小麦',
                    age: 12,
                    hobby: ['看书', '踢足球', '玩游戏'],
                    friends: [
                        { name: 'haha', age: 13 },
                        { name: 'xixi', age: 14 }
                    ]
                }
            },
            methods: {
                addSex() {
                    Vue.set(this.student, 'sex', '男')
                    // this.$set(this.student, 'sex', '男')
                },
                addFriends() {
                    this.student.friends.unshift({ name: 'jack', age: 10 })
                },
                updateFirstFriendName() {
                    this.student.friends[0].name = 'nini'
                    this.student.friends[0].age = 102
                },
                addHobby() {
                    this.student.hobby.push('学习')
                },
                updateHobby() {
                    // this.student.hobby.splice(0, 1, '开车')
                    Vue.set(this.student.hobby, 0, '开车')
                    this.$set(this.student.hobby, 0, '开车')
                },
                removePlay() {
                    this.student.hobby = this.student.hobby.filter((h) => {
                        return h !== '玩游戏'
                    })
                }
            }
        })
    </script>
</body>
</html>

 收集表单数据

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            <label for="demo">账号:</label>
            <input type="text" id="demo" v-model.trim="account"><br /><br />
            密码:<input type="password" v-model="password"><br /><br />
            年龄:<input type="number" v-model.number="age"><br />
            性别:
            男:<input type="radio" name="sex" v-model="sex" value="man">
            女:<input type="radio" name="sex" v-model="sex" value="woman"><br /><br />
            爱好:
            学习<input type="checkbox" v-model="hobby" value="study">
            打游戏<input type="checkbox" v-model="hobby" value="play"><br /><br />
            所属校区:
            <select name="" id="" v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select><br /><br />
            其他信息
            <textarea v-model.lazy="other "></textarea><br /><br />
            <input type="checkbox" v-model="agree">
            阅读并接受
            <a href="#">用户协议</a><br />
            <button>提交</button>
        </form>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        new Vue({
            el: '#root',
            data: {
                account: '',
                password: '',
                sex: '',
                hobby: [],
                city: '',
                other: '',
                agree: '',
                age: 18
            },
            methods: {
                demo() {
                    alert(1)
                }
            }
        })
    </script>
</body>
</html>

过滤器

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>像是格式化后的时间</h2>
        <!-- 计算 属性实现-->
        <h3> 现在是{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>现在是{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是{{time | timeFormater}}</h3>
        <!-- 过滤器实现传参 -->
        <h3>现在是{{time | timeFormater('YYYY MM DD') | mySlice}}</h3>
    </div>
    <div id="root2">
        <h3>{{msg |mySlice}}</h3>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        //全局过滤,写在最前面
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: '#root',
            data: {
                time: 1621561377603
            },
            computed: {
                fmtTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                getFmtTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            //局部过滤
            filters: {
                timeFormater(value, str) {
                    // console.log('@', value)
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                    return dayjs(value).format(str)
                },
                mySlice(value) {
                    return value.slice(0, 4)
                }
            }
        })
        new Vue({
            el: '#root2',
            data: {
                msg: 'hello,atguigu'
            }
        })
    </script>
</body>
</html>

v-text指令

 

v-html指令

 

 

v-cloak&v-once&v-pre属性

v-cloak

 v-pre

  v-once

 

自定义属性

自定义属性（big）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是:<span v-text="n"></span></h2>
        <h2>放大十倍后的n值<span v-big="n"></span></h2>
        <button @click="n++">
            点我加一
        </button>
        <hr />
        <input type="text" v-fbind:value="n">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        new Vue({
            el: '#root',
            data: {
                name: 'atguigu',
                n: 1
            },
            directives: {
                big(element, binding) {
                    element.innerText = binding.value * 10
                },
                // fbind(element,binding){
                //     element.value =binding.value
                // }
                //fbind不要写成一个函数了，不然只有两种情况被调用
                // （1）指令与元素成功绑定时（一上来）
                // （2）指令所在的模板被重新解析时
                // 所以写成对象
                fbind: {
                    //指令与元素成功绑定
                    bind(element, binding) {
                        console.log('bind')
                        element.innerText = binding.value
                    },
                    //指令所在元素被插入页面时
                    inserted(element, binding) {
                        console.log('inserted')
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding) {
                        console.log('update')
                        element.value = binding.value
                        element.focus()
                    }
                }
            }
        })
    </script>
</body>
</html>

自定义全局属性

 

 

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习vue</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {
            },
            //vue完成模板的解析，并把真实的DOM元素放入页面后（挂载完毕）调用mounted
            mounted() {
                setInterval(() => {
                    vm.opacity -= 0.01
                    if (vm.opacity <= 0) vm.opacity = 1
                }, 16)
            }
        })
        // // 通过外界定时器
        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if (vm.opacity <= 0) vm.opacity = 1
        // }, 16)
    </script>
</body>
</html>

生命周期之挂载

 

beforeCreate（）

created（）

beforeMount（）

mounted（）

生命周期之更新

 

生命周期之销毁

 

生命周期之总结

组件

 

 

                非单文件组件

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <hello></hello>
        <h2>{{msg}}</h2>
        <hr>
        <!-- 第三步编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
    //第一步： 创建school组件
    const school = Vue.extend({
        // 一定不要写el配置项
        // 组件必须用data的函数式
        template: `
        <div>
             <h2>学校名称 :{{schoolName}}</h2>
        <h2>学校地址: {{address}}</h2>
        <button @click="showName">点我提示学校名</button>
            </div>
        `,
        data() {
            return {
                schoolName: '尚硅谷',
                address: 'beijing'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        }
    })
    // 第一步：创建student组件
    const student = Vue.extend({
        template: `
        <div>
             <h2>学生姓名:{{studentName}}</h2>
        <h2>学生年龄:{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        }
    })
    // 第一步：创建hello组件
    const hello = Vue.extend({
        template: `
        <div>
            <h2>nihao{{name}}</h2>
            </div>
        `,
        data() {
            return {
                name: 'alice'
            }
        }
    })
    // 第二部：全局注册组件
    Vue.component('hello', hello)
    // 创建vm
    new Vue({
        el: '#root',
        data: {
            msg: '你好啊'
        },
        //第二部：注册组件（局部注册）
        components: {
            school,
            student
        }
    })
    new Vue({
        el: '#root2',
    })
// 创建vm
    // new Vue({
    //     el: '#root',
    //     data: {
    //         schoolName: '尚硅谷',
    //         address: 'beijing',
    //         studentName: '张三',
    //         age: 18
    //     }
    // })
</script>
</html>

几个注意点

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>{{msg}}</h1>
        <!-- 两种写法 -->
        <school></school>
        <school />
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
    //定义组件
    // const s = Vue.extend({
        // 简写
    const s = {
        // 开发者工具看这个名
        name: 'atguihu',
        template: `
    <div>
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
    </div>
    `,
        data() {
            return {
                name: '少硅谷',
                address: 'beijing'
            }
        }
    }
    new Vue({
        el: '#root',
        data: {
            msg: 'huanyig'
        },
        //注册的时候用什么名，用标签用什么名
        components: {
            school: s
        }
    })
</script>
</html>

 

组件的嵌套

Vue>app>school>student

                >hello


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
    // 定义student组件
    const student = {
        name: 'student',
        template: `
    <div>
    <h2>学生名称:{{name}}</h2>
    <h2>学生年龄:{{age}}</h2>
    </div>
    `,
        data() {
            return {
                name: '哈哈哈',
                age: 18
            }
        }
    }
    //    定义sxhool组件
    const school = Vue.extend({
        name: 'school',
        template: `
    <div>
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
    <student></student>
    </div>
    `,
        data() {
            return {
                name: '少硅谷',
                address: 'beijing'
            }
        },
        components: {
            student
        }
    })
    const hello = Vue.extend({
        template: `<div> <h1>{{msg}}</h1>  <div>`,
        data() {
            return {
                msg: '欢迎你ya'
            }
        }
    })
    const app = Vue.extend({
        template: `
    <div>
        <school></school>
        <hello></hello>
        </div>
    `,
        components: {
            school,
            hello
        }
    })
    // 创建vue
    new Vue({
        template: '<app></app>',
        el: '#root',
        components: {
            app
        }
    })
</script>
</html>

VueComponent组件实例对象

 

 

单文件组件

暴露有单个暴露，统一暴露，默认暴露

2

3

Aliceblle
关注
专栏目录
【Vue学习笔记】vue实现呼吸灯效果
qq_44862029的博客
04-06 2948
目录一.代码二.效果 一.代码 <!-- 呼吸效果 --> <div class="root"> <h2 :style="{opacity}">呼吸效果 </h2> </div> const vm = new Vue({ el: '.root', data() { return {
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue学习：生命周期总结（4对-8个钩子）+常用的
weixin_47295886的博客
02-20 132
mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息【等初始化操作】beforeDestory:清除定时器、解绑自定义事件、曲线订阅消息等【收尾工作】一般不会在beforeDestory操作数据，因为操作了，也不会触发更新流程。查看原生DOM 上的事件，发现原生DOM事件失效，原因在于 v2.7.14使用的版本大于2.7。当没有按钮的时候，使用生命周期可以进行定时器的关闭，等善后工作。但是响应式还在，还可以操作透明度。点击停止透明度变化，并且透明度不能设置了，无法进行响应式了。
网页前端第三次培训-CSS选择器
weixin_63710451的博客
02-05 643
1.学习视频： 【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili 2.学习笔记： 一、CSS的定义 选择器名{ 属性名:属性值; 属性名:属性值; ... } 注意点： 1.声明需要使用{}括起来，每个声明以分号;结尾 2.一行建议一个声明 3.如果样式的属性由多个单词组成，则用引号引起来 二、CSS的注释 /*注释内容*/ /* 设置所有的h2标签的文本为红色 *
Vue基础（2）
asa134124的博客
11-07 336
目录 深度监视 简写形式 绑定样式 条件渲染 基本列表： 列表过滤 列表排序： Vue.set使用 收集表单数据 过滤器 内置指令 v-text v-html v-cloak v-once v-pre 自定义指令： 组件 非单文件组件 组件的嵌套 VueComponents 深度监视 在vue中可以配置watch来开启监视，它可以得到数据修改前的值和数据修改后的值，但默认不监视对象内部值的改变。 深度监视： ​ (1)...
Vue基础知识总结 2：vue 动态绑定
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
学习笔记：尚硅谷Vue2基础篇
D_boj的博客
04-22 1160
通过B站尚硅谷学习，了解Vue2基本概述，以及基本使用。本章节主要了解选项式API以及组件化编程
狂神说Vue笔记整理
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
个人学习vue笔记自己整理精华
02-18
本人学习vue时候的学习笔记，以及工作共遇到的我认为需要记录的一些知识点
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
vue 中如何实现鼠标拖动出发滚动条的跟随移动？
最新发布
sinat_33255495的博客
09-20 221
如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。在做弹窗、表单或 tab 切换需求的时候，有时候因为内容过长会导致出现滚动条，但是只能拖动滚动条时会导致操作不便，我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。为方便复用，我们可以创建一个类来封装鼠标事件，使用时把事件挂载到指定容器即可。这样就实现啦，就是如此简单！
Vue 3:实现页面返回上一页的功能
weixin_73060959的博客
09-15 227
在Vue 3中，可以使用Vue Router库来实现页面返回上一页的功能。首先，确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后，我们定义了一个。函数会被触发，从而使浏览器返回到上一个访问的页面。在这个例子中，我们使用。
Vue 常用高级指令解析
前端梦工厂
09-18 1021
本文简要介绍了Vue框架中几个常见的高级指令，它们在某种特定场景下发挥了各种妙用，提供了更复杂的功能场景方案，但是在使用高级指令时，需要注意掌握各个指令的用法和特点，合理选择和搭配不同的指令，从而实现所需的功能。同时，还需要注意控制指令的使用粒度，避免过度使用指令导致代码难以维护。指令的使用也远不止这些，这些仅仅涉及到在Vue中内置的某些指令，当我们发现如果内置指令满足不了我们在项目中的使用场景时，Vue允许开发者创建自定义指令，以满足特定的需求或扩展Vue的功能。自定义指令可以用于操作DOM。
基于Vue 3组合函数的分页、搜索与排序实践 —— nbsaas-boot项目的实际应用
nbsaas-boot基于Request-Response的企业级快速开发框架
09-17 1534
Vue 3的组合函数是用于封装功能逻辑的一种模式。与Vue 2的选项式API不同，组合函数允许开发者将组件逻辑集中封装在独立的函数中，便于在不同的组件间共享。在大型项目中，像这样的电商系统，组件往往需要实现复杂的数据交互逻辑，例如分页、搜索、排序等功能。如果将这些功能重复写在多个组件中，代码将会变得臃肿且难以维护。组合函数可以有效解决这一问题。
vue 案例使用
buhuidage的博客
09-17 298
加上show-password就行。el-switch 按键的使用。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 712
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
基于python+django+vue的旅游网站系统
计算机学姐的博客
09-17 1948
【2025最新】基于协同过滤+python+django+vue+MySQL的旅游网站系统，前后端分离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值