Vue---Vue组件

已于 2022-02-27 19:46:52 修改
阅读量692 收藏 4
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-02-27 16:52:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h18377528386/article/details/123163268
版权

一.现实中的组件化思想体现

* 标准

* 分治

* 重用

* 组合

二.编程中的组件化思想体现

三.组件化开发思想

1.组件化规范：Web Components

* 我们希望尽可能多的重用代码

* 自定义组件的方式不太容易 （html、css、js）

* 多次使用组件可能会导致样式等冲突

Web Components通过创建封装好功能的定制元素解决上述问题

官网： 

Web Components | MDN

Vue部分实现了上述规范 

四.组件注册 

1.全局组件注册语法

 

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    Vue.component('button-counter', {
        data: function() {
            return {
                count: 0
            }
        },
        template: '<button @click="count++">点击了{{count}}次</button>'
    })
    let vm = new Vue({
        el: '#app',
        data: {}
    });
</script>

</html>

 案例改进：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    Vue.component('button-counter', {
        data: function() {
            return {
                count: 0
            }
        },
        template: '<button @click="handel">点击了{{count}}次</button>',
        methods: {
            handel: function() {
                this.count++
            }
        }
    })
    let vm = new Vue({
        el: '#app',
        data: {}
    });
</script>

</html>

2.组件用法

* 每个组件都是一个实例，各个组件之间互不影响，数据相互独立 

 3.组件注册注意事项

①data必须是一个函数

②组件模板内容必须单个根元素

③组件模板内容可以是模板字符串（需要浏览器支持ES6语法）

注意：

  • data必须是一个函数保证组件的数据都是互相独立的

  • 模板内容template必须是单个根元素（当模板中存在两个或多个元素时，需要在 最外层定义一个根元素div）

  • 组件模板使用模板字符串的作用是提高代码可读性，即代码可以换行书写

注意事项：

如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <button-counter></button-counter>
        <hello-world></hello-world>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    Vue.component('HelloWorld', {
        data: function() {
            return {
                msg: 'Hello World'
            }
        },
        template: '<div>{{msg}}</div>'

    })
    Vue.component('button-counter', {
        data: function() {
            return {
                count: 0
            }
        },
        template: `
        <div>
        <button @click="handel">点击了{{count}}次</button>
        <HelloWorld></HelloWorld>
        </div>`,
        methods: {
            handel: function() {
                this.count++
            }
        }
    })
    let vm = new Vue({
        el: '#app',
        data: {}
    });
</script>

</html>

 4.局部组件注册

注意：

 局部组件只能在注册他的父组件中使用

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <hello-one></hello-one>
        <hello-two></hello-two>
        <hello-three></hello-three>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    let HelloOne = {
        data: function() {
            return {
                msg: 'HelloOne'
            }
        },
        template: '<div>{{msg}}</div>'
    }
    let HelloTwo = {
        data: function() {
            return {
                msg: 'HelloTwo'
            }
        },
        template: '<div>{{msg}}</div>'
    }
    let HelloThree = {
        data: function() {
            return {
                msg: 'HelloThree'
            }
        },
        template: '<div>{{msg}}</div>'
    }
    let vm = new Vue({
        el: '#app',
        data: {},
        components: {
            'hello-one': HelloOne,
            'hello-two': HelloTwo,
            'hello-three': HelloThree

        }
    });
</script>

</html>

 五.组件间数据交互

1.父组件向子组件传值 

①子组件内部通过props接受传递过来的值 

 ②父组件通过属性将值传递给子组件

 *子组件内部通过props接受父组件的数据

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <hello-one :msg="msg"></hello-one>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    let HelloOne = {
        props: ['msg'],
        data: function() {
            return {}
        },
        template: '<div>从父组件接受的数据是:{{msg}}</div>'
    }
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '这是父组件的数据'
        },
        components: {
            'hello-one': HelloOne
        }
    });
</script>

</html>

 ③props属性名规则

 *  在props中使用驼峰形式，模板中需要使用短横线的形式

*  字符串形式的模板中没有这个限制

*在html的属性中大小写是不敏感的，不区分的 

④props属性值类型 

* 字符串 String

* 数值 Number

* 布尔值 Boolean

* 数组 Array

* 对象 Object

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <hello-one :str="str" :number="number" :boolean="boolean" :arr="arr" :obj="obj"></hello-one>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    let HelloOne = {
        props: ['str', 'number', 'boolean', 'arr', 'obj'],
        data: function() {
            return {}
        },
        template: '<div>{{str}}{{number}}{{boolean}}{{arr[0]}}{{obj.name}}</div>'
    }
    let vm = new Vue({
        el: '#app',
        data: {
            str: '这是字符串',
            number: 0,
            boolean: true,
            arr: [0],
            obj: {
                name: '黄某某'
            }
        },
        components: {
            'hello-one': HelloOne
        }
    });
</script>

</html>

 2.子组件向父组件传值

①子组件通过自定义事件向父组件传递信息

 ②父组件监听子组件的事件

 *props传递数据原则：单项数据流（只能从父组件传递到子组件，而不能相反，如果子组件需要修改父组件的数据，则通过给父组件发消息让父组件自己修改）

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        {{count}}
        <hello-one @add-count="count++"></hello-one>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    let HelloOne = {
        data: function() {
            return {}
        },
        template: `<button @click="$emit('add-count')">增加父组件的count值</button>`
    }
    let vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        components: {
            'hello-one': HelloOne
        }
    });
</script>

</html>

  3.子组件向父组件传值（带参数）

①子组件通过自定义事件向父组件传递信息 

②父组件监听子组件的事件 

 （$event为固定写法，接受子组件传递的参数）

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        {{count}}
        <hello-one @update-count="count=$event"></hello-one>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 组件注册
    let HelloOne = {
        data: function() {
            return {}
        },
        template: `<button @click="$emit('update-count',3)">修改父组件的count值</button>`
    }
    let vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        components: {
            'hello-one': HelloOne
        }
    });
</script>

</html>

 4.非父子组件传值

 案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <test-tom></test-tom>
        <test-jan></test-jan>
        <button @click="handel">点击销毁tom和jan的通信</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 提供事件中心
    let hub = new Vue();
    Vue.component('test-tom', {
        data: function() {
            return {
                num: 0
            }
        },
        template: `
        <div>
        Tom:{{num}}
        <button @click="handel">点击添加Jan的数据</button>
        </div>
        `,
        methods: {
            //向Jan发消息通信，添加Jan的数据
            handel: function() {
                hub.$emit('jan-event', 2);
            }
        },
        mounted: function() {
            // 监听修改自己数据,通过val参数获取兄弟传过来的数据
            hub.$on('tom-event', (val) => {
                this.num = this.num + val
            })
        }
    })
    Vue.component('test-jan', {
        data: function() {
            return {
                num: 0
            }
        },
        template: `
        <div>
        Jan:{{num}}
        <button @click="handel">点击添加Tom的数据</button>
        </div>
        `,
        methods: {
            //向Tom发消息通信，添加Tom的数据
            handel: function() {
                hub.$emit('tom-event', 3);
            }
        },
        mounted: function() {
            // 监听修改自己数据,通过val参数获取兄弟传过来的数据
            hub.$on('jan-event', (val) => {
                this.num = this.num + val
            })
        }

    })

    let vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            handel() {
                hub.$off('tom-event')
                hub.$off('jan-event')
            }
        }
    });
</script>

</html>

六.组件插槽

 1.组件插槽作用：父组件向子组件传递模板内容

 2.组件插槽的基本用法

①插槽位置

②插槽内容

 

 案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <alert-box>出错啦</alert-box>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('alert-box', {
        data: function() {
            return {
                num: 0
            }
        },
        template: `
        <div>
        <strong>ERROR:</strong>
        <slot></slot>
        </div>
        `
    })

    let vm = new Vue({
        el: '#app',
        data: {}
    });
</script>

</html>

运行：

注意：当传递内容为空时，slot会显示默认内容，不为空时就替换slot的内容 

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <alert-box>出错啦</alert-box>
        <alert-box></alert-box>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('alert-box', {
        data: function() {
            return {
                num: 0
            }
        },
        template: `
        <div>
        <strong>ERROR:</strong>
        <slot>默认内容</slot>
        </div>
        `
    })

    let vm = new Vue({
        el: '#app',
        data: {}
    });
</script>

</html>

 运行结果：

3. 具名插槽用法

①插槽定义

 ②插槽内容

 

注意：没有匹配到的slot的标签会填充到默认的slot里面 

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <base-layout>
            <p slot="header">标题信息</p>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <p slot="footer">底部信息信息</p>
        </base-layout>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('base-layout', {
        template: `
        <div>
            <header>
              <slot name="header"></slot>
            </header>
            <main>
              <slot></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        <slot>默认内容</slot>
        </div>
        `
    })

    let vm = new Vue({
        el: '#app',
        data: {}
    });
</script>

</html>

 运行：

第二种写法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <base-layout>
            <template slot="header">
            <p>标题信息</p>
        </template>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <template slot="footer">
                <p>底部信息信息</p>
            </template>
        </base-layout>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('base-layout', {
        template: `
        <div>
            <header>
              <slot name="header"></slot>
            </header>
            <main>
              <slot></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        <slot>默认内容</slot>
        </div>
        `
    })

    let vm = new Vue({
        el: '#app',
        data: {}
    });
</script>

</html>

4.作用域插槽

应用场景：父组件对子组件的内容进行加工处理 

①插槽定义

 

②插槽内容 

 

* 通过在子组件的插槽中通过v-bind绑定属性，在父组件中通过slot-scope属性获取到子组件的数据，进而对子组件内容进行加工处理 

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <fruit-list :list="list">
            <template slot-scope="info">
                <strong v-if="info.info.id===2">{{info.info.name}}</strong>
                <span v-else>{{info.info.name}}</span>
            </template>
        </fruit-list>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('fruit-list', {
        props: ['list'],
        template: `
        <div>
           <li :key="item.id" v-for="item in list">
           <slot :info="item">{{item.name}}</slot>
           </li>
        </div>
        `
    })

    let vm = new Vue({
        el: '#app',
        data: {
            list: [{
                id: 1,
                name: 'apple'
            }, {
                id: 2,
                name: 'banner'
            }]
        }
    });
</script>

</html>

 运行：

 

Cirrod
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue组件基础
sdrfsef的博客
05-18 257
目录 1.组件的概念 2.全局注册组件 3.局部注册组件 4.注册组件优化 1.组件的概念 组件:是由html.css.JavaScript以及一些图片资源组成,能够实现局部的界面效果;Vue中的组件是可复用的 Vue 实例,就类似于小型的Vue实例 注意 1: template中只能有一个根标签,如果有多个标签,需要在外层套一个div 注意 2:组件中的data必须是一个函数,不能是对象 因为组件的最大意义就是复用,如果data是对象形式,那么每一次使用这个组件,得到的都是同一..
Vue 组件
奇奇的博客
05-20 91
组件化规范:Web Components 注册组件 组件注册注意事项 1、组件参数的data值必须是函数 2、组件模板必须是单个跟元素 3、组件模板的内容可以是模板字符串 4、在使用组件的时候，只能在字符串模板中用驼峰的方式使用(不建议使用) 5、在普通的标签模板中，必须使用短横线的方式使用组件 语法: Vue.component('组件名称', { data: 组件数据, ...
VUE
weixin_39363320的博客
10-09 98
VUE 一、基本介绍 1.基础 1.设计模式 MVC 业务逻辑，数据，界面显示分离，改变交互不需要改变业务逻辑。 优点：耦合性低，生命周期成本低，重用性高 缺点：模型视图严格分离 MVP 数据层，视图层，发布层，在视图中不直接使用model,之间的通信通过Presenter进行，交互都在其中，而MVC中直接从model中读取数据。 MVVM 利用一些指令绑定，就能在model和viewModel保持不变的情况下，将ui与逻辑分离，model代表我们所需要的数据模型，不会影响浏览器如何展示数据。 2.双向
vue 购物车demo 用到了计算属性computed v-for @click
冲锋
04-30 4119
template模板 &lt;template&gt; &lt;div class="two"&gt; &lt;table border="1px solid #666" style="width:500px;"&gt; &lt;thead&gt; &lt;tr&gt;
运用vue的方法，计算属性，监听实现计算器
m0_67587581的博客
03-30 78
methods属性用来定义方法通过在input上添加@click属性来绑定事件，当数据改变的时候触发方法来改变数据。Vue提供了computed来观察和响应数据变化，当数据需要随着其他数据变化时会重新进行计算返回新的结果。watch状态监听功能可以在数据变化的同时调用当前数据绑定的事件处理方法。
【Vuex 的 详细讲解 】与【count++的案例实现】
hannah2233的博客
01-20 1094
看vuex官网持续懵逼状，案例看不懂且无法实现？？？连个count++都不会整？？？ 看过来 看过来，用人话讲vuex 学习资源： vuex 慕课vuex入门
Vue组件
小毛驴的博客
05-14 274
1.父组件和子组件传值 1.1 父组件向子组件传值 子组件 &amp;amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;div&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;button @click=&a
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
以上代码展示了如何在Vue组件中引入Vue-Cron，通过`v-model`双向绑定Cron表达式，并监听`@change`事件来响应定时任务设置的变化。 总的来说，Vue-Cron是Vue.js开发中的一个实用工具，它简化了Cron表达式的使用，...
vue-devtools
03-27
1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件的状态，包括props、data、computed属性、methods以及生命周期钩子函数。点击组件可以查看其模板和渲染后的DOM结构。 2. **状态管理**：...
vue-ydui使用文档
01-11
Vue-YDUI是一款基于Vue.js开发的前端组件库，它为开发者提供了丰富的UI组件，用于构建现代化的Web应用。在 Vue 开发过程中，Vue-YDUI 可以极大地提高开发效率，提供统一的界面风格和交互体验。由于官方文档无法访问...
vue-element-admin中文版本
07-20
Vue.js 是一款轻量级且功能强大的前端JavaScript框架，它以组件化开发为核心，使得构建用户界面更加便捷高效。Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI ...
vue 翻页组件vue-flip-page效果
10-15
Vue Flip Page是一个用于创建翻页效果的组件，适用于Vue.js框架。这个组件允许开发者实现类似纸质书籍的翻页效果，为用户带来更加直观和交互性强的体验。在本文中，我们将深入探讨Vue Flip Page的基本使用、核心功能...
vue 点击第一下没有触发事件_Vue.js从零开始——入门（5）
weixin_42394257的博客
01-22 648
Vue 的事件处理器又是个什么样子的，今天的章节内容主要就是这一部分了。1 监听器前面其实提及了监听器，v-on （以及简写 @），尽管并不详细，但是也已经说明了用法，这里可以再看一个例子（来自官网，不过我按照自己的习惯稍稍改了一下）：<!DOCTYPE html> <html> <head> <meta charset="utf-8">...
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
Vue代码
qq_47913347的博客
02-01 59
Vue代码
关于Vuex的一些理解
qq_44625142的博客
03-11 134
@Vue学习思考总结之---------Vuex的理解 我是一名大学学生，第一次写博客，只想巩固一下自己的知识点，其中可能有不正确的地方还请大家不吝指出，鄙人定当受教，谢谢大家。 组件间的通信 在开始讲Vuex之前，我们必须先知道 组件间通信 是什么。简单来说，组件间通信指的就是Vue各组件之间状态数据的相互传递。就是你的数据我要用，那么就要涉及到你怎么把这个数据给我的问题了，往下看。 组件间通信...
vue 模板的含义 作用 写法
qq_45560350的博客
07-10 1240
模板：被vue实例控制的页面片段 1.模板的作用是什么？ 为了提高渲染效果，vue会把模板编译成为虚拟DOM树（VNode），然后再生成真实的DOM 从左至右 依次是模板、虚拟DOM树、真实的DOM 2.模板写在哪？ 在挂载的元素内部直接书写 <div id="app"> <p>{{title}}</p> </div> <script> var vm = new Vue({ data: { title: "g1",
react 精华之mobx 意味着只要我们state的状态在store中被修改了 this.count 这个 参数就会被监听到 就可以直接渲染页面了
gwdgwd123的博客
12-16 3231
理解 Mobx 虽然 Mobx 和 Redux 有很大不同，但是至少还有一个共同点——这两个工具都和 React 没有任何直接关系，只不过凑巧 React 社区大量使用它们罢了。从技术上说，Mobx 和 Redux 都是中立的状态管理工具，他们能够应用于 React，也可以用于其他需要状态管理的场景。 还是用 create-react-app 产生的应用来演示 Mobx 吧，要使用 Mobx，...
vuejs v-for和v-if同时使用报变量未定义
业余程序猿
07-14 316
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
vue使用x6画流程图，简单使用
最新发布
qq_34631220的博客
07-18 231
【代码】vue使用x6画流程图，简单使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值