【笔记】Vue快速入门

最新推荐文章于 2024-07-10 18:13:56 发布
最新推荐文章于 2024-07-10 18:13:56 发布
阅读量632 收藏
点赞数
分类专栏： 前端 文章标签： vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gu_jiaguaren/article/details/113105331
版权

Vue

一、Vue基础

1.简介

  • vue是一套构建用户界面的渐进式框架。
  • 只关注视图层， 采用自底向上增量开发的设计。
  • 目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

特点：

①JavaScript框架

②简化DOM操作

③响应式数据驱动

2.第一个Vue程序

  • 导入开发版本的Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 创建Vue实例对象，设置el属性和data属性
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好呀！"
        }
    })
</script>
  • 使用简洁的模板语法把数据渲染到页面上
<div id="app">
    {{message}}
</div>

3.el:挂载点

1）Vue实例的作用范围
  • el命中的元素内部及其内部的后代元素
2）是否可以使用其他选择器
  • 可以。但开发时建议使用id选择器，因为一般约定id选择器是唯一的，而类选择器和标签选择器都可以命中多个元素，会造成语义的不清晰，所以建议使用id选择器。
3）是否可以设置其他的dom元素
  • 可以使用其他的双标签，但不能使用HTML和BODY

4.data:数据对象

  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守js的语法即可。

二、本地应用

  • 用Vue开发网页效果

1.Vue指令

1）内容绑定，事件绑定
（1）v-text
  • 设置标签的文本值(textContent)
  • 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
  • 内部支持写表达式
<div id="app">
    <h2 v-text="message"></h2>
</div>
（2）v-html
  • 设置标签的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么，只会解析为文本
  • 解析文本使用v-text，需要解析html结构使用v-html
<div id="app">
    <h2 v-text="content"></h2>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            content:"<a href='#'>啦啦啦</a>"
        }
    })
</script>
（3）v-on
  • 为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中数据
<div id="app">
    <input type="button" value="v-on" v-on:click="doIt">
    <h2 @click="changeFood">{{food}}</h2>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            food:"番茄炒蛋"
        },
        methods:{
            doIt:function(){
                alert("doIt");
            },
            changeFood:function(){
                this.food+="真好吃！"
            }
        }
    })
</script>
（4）计数器应用

①data中定义数据：num

②methods中添加两个方法：add（递增），sub（递减）

③使用v-text将num设置给span标签

④使用v-on将add，sub分别绑定给+，-按钮

⑤累加的逻辑：小于10累加，否则警告

⑥递减的逻辑：大于0递减，否则警告

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span v-text="num"></span>
        <button @click="add">+</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert("已达最大值！");
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("已达最小值！");
                    }
                }
            }
        })
    </script>
</body>
  • 总结：
    • 创建Vue实例时，el(挂载点),data(数据),methods(方法)
    • v-on指令的作用是绑定事件，简写为@
    • 方法中通过this,关键字获取data中的数据
    • v-text指令的作用是：设置元素的文本值，简写为{{}}
    • v-html指令的作用是：设置元素的innerHTML
2）显示切换，属性绑定
（1）v-show
  • 根据表达式的真假，切换元素的显示和隐藏
  • 原理是修改元素的display，实现显示隐藏
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，为false元素隐藏
  • 数据改变之后，对应元素的显示状态会同步更新
<div id="app">
    <img v-show="true",src="./img/home.jpg" alt="">
</div>
（2）v-if
  • 根据表达值的真假，切换元素的显示和隐藏(操纵dom元素)
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  • 频繁的切换用v-show，反之使用v-if，前者的切换消耗小
<div id="app">
    <p v-if="false">123</p>
</div>
（3）v-bind
  • 设置元素的属性(比如src,title,class)
  • 完整写法为 v-bind:属性名
  • 简写可直接省略v-bind，只保留 :属性名
  • 需要动态的增删class建议使用对象的方式
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc" alt="" :title="imgTitle" :class="{active:isActive}">
</div>
（4）图片切换应用

①定义图片数组

②添加图片索引

③绑定src属性

④图片切换逻辑

⑤显示状态切换

<body>
    <div id="app">
        <div>
            <button style="font-size: 28px;" v-show="index!=0" @click="prev"> < </button>
            <img :src="imgArr[index]" alt=""/>
            <button style="font-size: 28px;" v-show="index<imgArr.length-1" @click="next"> > </button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgArr:[
                    "./images/1.jpg",
                    "./images/2.jpg",
                    "./images/0.jpg",
                    "./images/3.jpg",
                    "./images/4.jpg"
                ],
                index:0
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>
</body>
  • 总结：
    • 列表数据使用数组保存
    • v-bind指令可以设置元素属性，比如src
    • v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
3）列表循环，表单元素绑定
（1）v-for
  • 根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是(item,index) in 数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            {{index+1}} 学习科目：{{item}}
        </li>
    </ul>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            arr:["JavaEE","Python","计算机网络","操作系统"]
        }
    })
</script>
（2）v-on补充
  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件的后面跟上 .修饰符可以对事件进行限制
  • .enter 可以限制触发的按键为回车
  • 事件修饰符有多种，详细参考
<div id="app">
    <input type="button" value="点击" @click="doIt(111,'冲鸭')">
    <input type="text" @keyup.enter="sayHi">
</div>

<script>
    var app=new Vue({
        el:"#app",
        methods:{
            doIt:function(p1,p2){
                console.log(p1);
                console.log(p2);
            },
            sayHi:function(){
                alert("加油！");
            }
        }
    })
</script>
（3）v-model
  • 获取和设置表单元素的值（双向数据绑定）
  • 绑定的数据会和表单元素值相关联
  • 绑定的数据←→表单元素的值
<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"谢拉机"
        }
        methods:{
            getM:function(){
				alert(this.message)
            },
            setM:function(){
                this.message="谢飞机"
            }
        }
    })
</script>
（4）小黑记事本应用

a.新增

①生成列表结构(v-for 数组)

②获取用户输入(v-model)

③回车，新增数据

b.删除

①点击删除指定内容(v-on splice 索引)

c.统计

①统计数据的个数

d.清空

①点击清除所有信息(v-on)

e.隐藏

①没有数据时，隐藏元素(v-show v-if)

<body>
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
            class="new-todo">
        </header>

        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <il class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{index+1}}</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)">×</button>
                    </div>
                </il>
            </ul>
        </section>

        <!-- 统计和清空 --> 
        <footer class="footer">
            <span class="todo-count" v-show="list.length!=0">
                <strong>{{list.length}}items left</strong>
            </span>
            <button class="clear-completed" v-show="list.length!=0" @click="clear">Clear</button>
        </footer>
    </section>
        


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app=new Vue({
            el:"#todoapp",
            data:{
                list:["qw","qw","qw"],
                inputValue:""
            },
            methods:{
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            },
        })
    </script>
</body>
  • 总结：
    • 列表结构可以通过v-for指令结合数据生成
    • v-on结合事件修饰符可以对事件进行限制，比如 .enter
    • v-on在绑定事件时可以传递自定义参数
    • 通过v-model可以快速的设置和获取表单元素的值
    • 基于数据的开发方式

三、网络应用

  • Vue结合网络数据开发应用

1.axios 文档传送门

  • 功能强大的网络请求库
  • axios必须先导入才可以使用
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取响应内容，或错误信息
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        /*
            接口1：随机笑话
            请求地址：https://autumnfish.cn/api/joke/list
            请求方法：get
            请求参数：num（笑话条数，数字）
            相应内容：随机笑话
         */
        document.querySelector(".get").onclick=function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }

        /*
            接口2：用户注册
            请求地址：https://autumnfish.cn/api/user/reg
            请求方法：post
            请求参数：username（用户名，字符串）
            相应内容：注册成功或失败
         */
        document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"谢拉机"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
    </script>
</body>

2.axios+vue

  • axios回调函数中的this已经改变，无法访问到data中数据
  • 把this保存起来，回调函数中直接使用保存的this即可
  • 和本地应用最大区别就是改变了数据来源
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>

    <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>
        /*
            接口：随机笑话
            请求地址：https://autumnfish.cn/api/joke
            请求方法：get
            请求参数：无
            相应内容：随机笑话
         */
        
         var app= new Vue({
             el:"#app",
             data:{
                 joke:"一个笑话"
             },
             methods:{
                getJoke:function(){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        console.log(response.data);

                        that.joke=response.data;
                    },function(err){})
                }

             }
         })
    </script>
</body>

3.天气预报应用

  • 天气接口请求地址：http://wthrcdn.etouch.cn/weather_mini

（1）回车查询

①按下回车(v-on .enter)

②查询数据(axios接口 v-model)

③渲染数据(v-for 数组 that)

（2）点击查询

①点击城市(v-on 自定义参数)

②查询数据(this.方法())

③渲染数据(this.方法())

<body>
    <div id="app">
        <div>
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather"
                placeholder="请输入查询的天气"/>
                <button>搜索</button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                <a href="javascript:;" @click="changeCity('广州')">广州</a>
                <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
            </div>
        </div>
        <ul>
            <li v-for="item in weatherList">
                <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
                <div class="info_temp"><b>{{item.low}}</b>~<b>{{item.high}}</b></div>
                <div class="info_fate"><span>{{item.date}}</span></div>
            </li>
        </ul>
    </div>



    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/main.js"></script>
</body>

/*
    请求地址：http://wthrcdn.etouch.cn/weather_mini
    请求方法：get
    请求参数：city（城市名）
    响应内容：天气信息
 */

 var app=new Vue({
     el:"#app",
     data:{
         city:'',
         weatherList:[]
     },
     methods:{
         searchWeather:function(){
             //保存this
             var that=this;
             //调用接口
             axios.get('http://wthrcdn.etouch.cn/weather_mini?city='
             +this.city)
             .then(function(response){
                 that.weatherList=response.data.data.forecast;
             })
             .catch(function(err){})
         },
         changeCity:function(city){
             this.city=city;
             this.searchWeather();
         }
     }
 })
  • 总结：
    • 应用的逻辑代码建议和页面分离，使用单独的js文件编写
    • axios回调函数中this指向改变了，需要额外的保存一份
    • 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
    • 自定义参数可以让代码的复用性更高
    • methods中定义的方法内部，可以通过this关键字点出其他的方法

学习视频

AppleQiu_00
关注
专栏目录
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
HTML-b站-前端基础必会教程-4个小时带你快速入门vue
yt_xy的博客
10-10 383
导入Vue <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> el-挂载点 用来设置Vue实例挂载（管理）的元素 <div id="app"> {{ message }} </div> <script> var app = new Vue({ el:"#app
前端三板斧: HTML+CSS+JS笔记 摘自b站狂神说
qhy_97的博客
07-13 5182
参考b站狂神说的前端视频，做的笔记 视频地址：https://www.bilibili.com/video/BV1x4411V75C HTML 5 什么是HTML? hyper text markup language(超文本标记语言)，包括：文本/图片、音频、视频、动画等； 目前HTML5 W3C标准 World Wide Web Consortium(万维网联盟) W3C标准包括 结构化标准语言(HTML、XML) 表现标准语言(CSS) 行为标准(DOM、ECMAScript) 网页基本信息： &
菜鸟教程 --- Vue3 教程
freeking101的博客
07-17 8524
​Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
vue的学习
l10711097061的博客
06-22 7793
title: VUE 一、Vue简介 1.1 简介 ::: tip Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。 ::: 1.2 MVVM 模式的实现者——双向数据绑定模式 Model：模型层，在这里表示 JavaScri
Vue介绍与入门（一篇就可入门）
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/
Vue入门day01笔记
10-27
### Vue入门day01笔记详解 #### 库与框架的区别 在软件开发中，库（library）和框架（framework）都是提高开发效率、简化开发流程的重要工具，但它们有着本质的区别。 - **库（Library）**： - 库通常为开发者...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
VUE入门学习项目资料与学习笔记.zip
02-12
这个名为“VUE入门学习项目资料与学习笔记.zip”的压缩包包含了一份详细的学习资源，帮助初学者深入理解Vue.js的核心概念和技术。以下是对这些资源的详细解读： 1. **Vue环境搭建**：Vue的安装通常有两种方式，一种...
Vue入门笔记以及项目源码
04-18
这个压缩包中的“Vue入门笔记以及项目源码”提供了从基础到实践的全面学习材料，覆盖了Vue的核心概念和技术。 首先，让我们按照文件名的顺序逐个解析学习内容： 1. **Day 01**：通常会涵盖Vue的基础知识，包括Vue...
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 7385
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
VUE超详细入门
最新发布
zhangpeixuan的博客
07-10 3783
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
Vue的简单学习（一文快速上手Vue2.0！）
an_gentle_killer的博客
08-08 3635
页内目录 一，Vue的介绍 二，基于vue.js的学习 三，Vue的使用模板 四，Vue的简单实用 五， 六， 一，Vue的介绍（Vue官网） 来看看官方的解释 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（概括官网的话就是易用.
Vue学习-Vue入门
weixin_59357453的博客
04-02 4391
这是一篇vue学习记录
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 2万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue学习
doyoudooo的博客
05-05 4260
VUE 文章目录VUE@[toc]1、前端核心分析2、前端知识体系2.1 HTML(结构层)2.2 CSS（表现层）2.3JavaScript（行为层）**Typescript 微软的标准**javascrip框架UI框架javascript构建工具2.4三端统一混合开发（Hybrid App）微信小程序2.5后端技术2.6主流前端框架混合开发3、了解前后端分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MVC时代3.4、Node JS带来的全栈时代3.5、总
Vue，超详细整理，适合新手入门
你好, 我在学java的博客
07-12 1万+
Vue入门教学笔记
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入门教程
tttalk的博客
12-23 5179
一、Vue介绍 简介：Vue.js（ /vjuː/） 是一套构建用户界面的渐进式框架, Vue只关注视图层， 采用自底向上增量开发的设计。 特点：响应式编程、组件化。 优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 注：这里是基于Vue2的教程，现在已经出了Vue3,但是还没完全普及，并且Vue3基本兼容Vue2，所以可以先学Vue2，再去了解Vue3的更新，后面会更新这部分内容。 二、安装 一般有三种方式：本地下载、CDN和NPM(推荐)。 1.本地下载地址：
Vue入门笔记：前端与后端必读
这篇笔记主要面向0基础的前端和后端开发者，旨在帮助他们快速理解和掌握Vue的基本用法。 1. **模板语法**：Vue的模板语法基于HTML，允许在其中插入JS表达式，如data属性中的值。例如，三目运算符可以用于简洁地进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值