vue基础知识

最新推荐文章于 2024-07-19 14:16:29 发布
最新推荐文章于 2024-07-19 14:16:29 发布
阅读量141 收藏
点赞数
分类专栏： vue基础知识 文章标签： vue.js 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45144083/article/details/129294719
版权

vue实例

1.创建vue实例：

（1）引入vue

（2）定义作用范围

（3）实例化vue

<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>

<!-- 1、引入vue:

注意：引入vue有三种方式：

1)、CDN方式

2)、本地方式

3)、npm命令安装vue: npm i vue@2

-->

<script src="../../vue.js"></script>

</head>

<body>

<!-- 2、定义vue的作用范围 -->

<div id="app">

<div>电话： {{tel}}</div>

<div>商品价格：<input v-model="price" type="text"></div>

<div>商品数量：<input v-model="num" type="text"></div>

<div>总价：{{price*num}}</div>

</div>

<p>{{tel}}</p>

<!-- 3、创建vue实例 -->

<script>

new Vue({

el: '#app', //挂载点

data: { //定义数据：这里的数据通常是ajax请求返回的接口数据

tel: 10086,

price: 99,

num: 2

}

});

</script>

</body>

2.el:挂载点

（1）如果定义了多个vue实例的使用范围则默认只有第一个使用范围有效。

（2）不能将vue实例挂载到body或html标签上。

（3）一个页面最好只定义一个vue实例。

3.data和methods

data:数据，这里的数据通常是通过ajax请求的服务端的接口数据；

methods：方法，这里用来定义事件的方法

<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>

<!-- 1、引入vue:

注意：引入vue有三种方式：

1)、CDN方式

2)、本地方式

3)、npm命令安装vue: npm i vue@2

-->

<script src="../../vue.js"></script>

</head>

<body>

<!-- 2、定义vue的作用范围 -->

<div id="app">

<!-- <div class="app"> -->

<div>电话： {{tel}}</div>

<div>商品价格：<input v-model="price" type="text"></div>

<div>商品数量：<input v-model="num" type="text"></div>

<div>总价：{{price*num}}</div>

<hr>

<p>{{goodsArr}}</p>

<div>商品名称：{{goodsArr[1].gname}}</div>

<!-- 调用方法时如果没有传参则可以省略圆括号 -->

<div><button v-on:click="mydemo">请单击我</button></div>

<div><button v-on:click="test(30)">请再单击我</button></div>

</div>

<p>{{tel}}</p>

<!--

<div id="app2">

<div>姓名：{{usr}}</div>

</div> -->

<!-- <div class="app">

<div>电话:{{tel}}</div>

</div> -->

<!-- 3、创建vue实例 -->

<script>

// new Vue({

// el: '#app2',

// data: {

// usr: '老六'

// }

// });

new Vue({

//注意：

//1)如果定义了多个vue实例的使用范围则默认只有第一个使用范围有效；

//2)不能将vue实例挂载到body或html标签上

el: '#app', //挂载点

//el: '.app', //挂载点

// el: 'body',

methods: { //定义方法

// mydemo: function() {

mydemo() { //es6的简写形式

alert('hello');

},

test(n) {

alert(100 + n);

}

},

data: { //定义数据：这里的数据通常是ajax请求返回的接口数据

tel: 110,

price: 38,

num: 3,

goodsArr: [{

id: 1,

gname: '华为手机',

price: 3000

}, {

id: 2,

gname: '笔记本电脑',

price: 6600

}]

}

});

</script>

</body>

4.{{}} 模板语法

{{}} 可以用来解析数据、调用函数、运算。

注意：{{}}中的语法要遵守javascript代码语法、{{}}只能使用于非表单元素，如:div、p、h1-h6 、ul li等。

<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>

<!-- 1、引入vue -->

<script src="./vue.js"></script>

</head>

<body>

<!-- 2、定义vue的使用范围 -->

<div id="app">

<div>姓名为：{{uname}}</div>

<div>{{'姓名：'+uname}}</div>

<div>手机号码：{{mobile.slice(0,3)+'****'+mobile.slice(7)}}</div>

</div>

<script>

//3、创建vue实例

new Vue({

el: '#app',

data: {

uname: '老六',

mobile: '13688889999'

}

});

</script>

</body>

vue指令

标签属性以v-开头的称为指令

非表单元素绑定数据:

非表单元素是指：div标签、p标签、span标签、ul/li标签、ol/li标签等

{{}}: 优点：使用简单 缺点：不能解析html代码、会出现闪屏问题

v-text: 优点： 不会出现闪屏问题 缺点：不能解析html代码

v-html： 优点：可以解析html代码、不会出现闪屏问题

<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>

<!--

闪屏问题:是指当vue.js文件因为网络慢或服务器卡的时候导致vue.js文件不能加载到用户本地，这时使用{{}}解析的数据会原样出现到屏幕上，如果vue.js文件后来又成功加载到用户本地时使用{{}}解析的数据则会正常解析了

-->

<!-- <script src="./vue.js"></script> -->

</head>

<body>

<div id="app">

<h4>{{}}</h4>

<div>姓名为：{{uname}}</div>

<p>{{desc}}</p>

<h4>v-text</h4>

<p v-text="'姓名为：'+uname"></p>

<div v-text="desc"></div>

<h4>v-html</h4>

<div v-html="'姓名：'+uname"></div>

<div v-html="desc"></div>

</div>

<script>

new Vue({

el: '#app',

data: {

uname: '小明',

desc: '<div><h3>商品详情</h3><img src="

'," target="_blank">https://img10.360buyimg.com/n5/jfs/t1/191432/5/25747/278614/62a86b47E0d89e58f/f9bea2c71c4b2fd0.jpg.avif"></div>', //商品详情

}

});

</script>

表单元素绑定数据：

表单元素是指：输入框、密码框、单/复选框、下拉列表、文本域。

v-mode

<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 src="./vue.js"></script>

</head>

<body>

<div id="app">

<h3>修改用户信息</h3>

<div>昵称：<input v-model="userObj.nicheng" type="text"></div>

<p>{{userObj.nicheng}}</p>

<div>邮箱：<input v-model="userObj.email" type="text"></div>

<div>电话：<input v-model="userObj.tel" type="text"></div>

<div><button v-on:click="modify">修改</button></div>

</div>

<script>

new Vue({

el: '#app',

methods: {

modify() {

console.log(this.userObj, 11111);

// alert('修改');

// $.ajax({

// url: '',

// data: this.userObj,

// // data: {

// // nicheng: this.nicheng ,

// // email: this.email ,

// // tel: this.tel

// // },

// dataType: 'json',

// success() {}

// });

}

},

data: {

// nicheng: 'demo',

// email: 'demo@qq.com',

// tel: 110

userObj: {

nicheng: 'demo',

email: 'demo@qq.com',

tel: 110

}

}

});

</script>

</body>

属性绑定

v-bind可以简写为冒号（:）。

v-bind指令既可以给预定义的属性绑定数据也可以给自定义的属性绑定数据。

v-bind

<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 src="./vue.js"></script>

</head>

<body>

<div id="app">

<p><a xy="100" v-bind:href="urls">跳转</a></p>

<!-- v-bind可以简写为冒号 -->

<div><img :curuid="uid" v-bind:src="imgurl" alt=""></div>

<!-- v-bind也可以给自定义的属性绑定数据 -->

<div><img v-bind:curuid="uid" v-bind:src="imgurl" alt=""></div>

</div>

<script>

new Vue({

el: '#app',

data: {

uid: 321, //用户id

urls: 'https://www.baidu.com',

imgurl: 'https://img10.360buyimg.com/seckillcms/s250x250_jfs/t1/197023/32/25098/119568/62a95736Eeadc6258/f9fea63e169830f2.jpg',

},

methods: {

}

});

</script>

</body>

一次性绑定

当数据只想在界面中渲染一次时可以使用一次性绑定。

v-once

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="../../vue.js"></script>

</head>

<body>

<div id="app">

<div>电话：<input v-model="tel" type="text"></div>

<p>{{tel}}</p>

<!-- 一次绑定 -->

<div v-once>{{tel}}</div>

</div>

<script>

//创建Vue实例,得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

tel: 110

},

methods: {}

});

</script>

</body>

事件绑定

v-on的语法：v-on:事件名="方法名"

v-on的简写形式为：@事件名

v-on

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="../../vue.js"></script>

</head>

<body>

<div id="app">

<!-- v-on的简写形式为：@事件名 -->

<div><button @click="mytest">单击我111</button></div>

<div><button v-on:click="mytest">单击我</button></div>

<div><input v-on:keydown="demo" type="text" placeholder="请输入邮箱"></div>

</div>

<script>

//创建Vue实例,得到 ViewModel

var vm = new Vue({

el: '#app',

data: {},

methods: {

demo() {

console.log('按键了...');

},

mytest() {

alert('Hello...');

}

}

});

</script>

</body>

条件渲染

v-if与v-show的区别：

1)、v-if如果有多个分支判断时代码之间要连续、中间不能有其他代码；

2)、如果v-if的条件值为false时则DOM元素直接消失，而v-show是通过display:none来控制DOM元素不显示/显示；

v-if v-else-if v-else

v-show

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="../../vue.js"></script>

<style>

.box {

width: 200px;

height: 200px;

border: 1px solid blue;

margin: 10px;

}

.box2 {

width: 200px;

height: 200px;

border: 1px solid red;

margin: 10px;

}

</style>

</head>

<body>

<div id="app">

<p v-if="score>=80">优秀</p>

<!-- 注意： v-if如果有多个分支判断时代码之间要连续、中间不能有其他代码 -->

<!-- <span>测试一下</span> -->

<p v-else-if="score>=60">一般</p>

<p v-else>不及格</p>

<!-- <div><button @click="toggles">切换</button></div> -->

<div><button @click="isShow=!isShow">切换</button></div>

<div><button @click="isShow2=!isShow2">切换2</button></div>

<div v-if="isShow" class="box"></div>

<div v-show="isShow2" class="box2"></div>

</div>

<script>

//创建Vue实例,得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

score:78,

isShow: true,

isShow2: true

},

methods: {

toggles() { //

//this指向当前Vue实例

// console.log(this);

//console.log(this.isShow, 999);

this.isShow = !this.isShow;

}

}

});

</script>

</body>

列表渲染

v-for可以遍历对象或数组，在使用v-for时要定义key属性并且要保证key属性的属性值为唯一的，这样可以提高渲染效率。

v-for key

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="../../vue.js"></script>

</head>

<body>

<div id="app">

<table border="1" cellspacing="0" width="40%">

<tr>

<td>序号</td>

<td>姓名</td>

<td>邮箱</td>

<td>电话</td>

<td>操作</td>

</tr>

<!-- <tr v-for="item in stuArr"> -->

<tr v-for="(item,ind) in stuArr" :key="item.id">

<td>{{ind+1}}</td>

<td>{{item.xingming}}</td>

<td>{{item.email}}</td>

<td>{{item.tel}}</td>

<td><button @click="changname(ind)">将姓名改为小明</button>&nbsp;&nbsp;<button @click="delone(ind)">删除</button></td>

</tr>

</table>

<p>商品名称：{{goodsObj.gname}}</p>

<div v-text="'商品名称为：'+goodsObj.gname"></div>

<!-- v-for:遍历对象 -->

<p v-for="x in goodsObj">{{x}}</p>

<p v-for="(item,key) in goodsObj" :key="key">{{item}}|{{key}}</p>

</div>

<script>

//创建Vue实例,得到 ViewModel

var vm = new Vue({

el: '#app',

methods: {

delone(n) { //删除一个学生

this.stuArr.splice(n, 1);

},

changname(n) { //修改姓名

this.stuArr[n].xingming = '小明';

// console.log(this.stuArr[n], n);

}

},

data: {

stuArr: [{

id: 11,

xingming: "老六",

email: "liu@qq.com",

tel: 110

}, {

id: 12,

xingming: "八戒",

email: "qi@163.com",

tel: 119

}, {

id: 16,

xingming: "唐僧",

email: "tangseng@qq.com",

tel: 123

}],

goodsObj: {

id: 1,

gname: '华为手机',

price: 4000

}

}

});

</script>

</body>

动态类名

:class="变量"

:class="三目运算符"

:class="{类名1:true,类名2:false,... }"

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="../../vue.js"></script>

<style>

.trbg {

background-color: aquamarine;

}

.box1 {

float: left;

width: 150px;

height: 150px;

border: 1px solid red;

margin: 10px;

background-color: blueviolet;

}

.box2 {

float: left;

width: 150px;

height: 150px;

border: 1px solid blue;

margin: 10px;

background-color: green;

}

.box3 {

float: left;

width: 150px;

height: 150px;

border: 1px solid blue;

margin: 10px;

background-color: yellow;

}

</style>

</head>

<body>

<div id="app">

<p><button @click="changclass">切换样式</button></p>

<div :class="classname"></div>

<div :class="{box1:ind%3==0,box2:ind%3==1,box3:ind%3==2}" v-for="(item,ind) in goodsArr" :key="item.id">

<h3>商品名称:{{item.gname}}</h3>

<div>价格：{{item.price}}</div>

</div>

<table border="1" width="30%" cellspacing="0">

<tr>

<td>充号</td>

<td>商品名称</td>

<td>价格</td>

</tr>

<tr :class="ind%2==1?'trbg':''" v-for="(item,ind) in goodsArr" :key="item.id">

<td>{{ind+1}}</td>

<td>{{item.gname}}</td>

<td>{{item.price}}</td>

</tr>

</table>

</div>

<script>

//创建Vue实例,得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

classname: 'box1',

goodsArr: [{

id: 1,

gname: '苹果',

price: 5000

}, {

id: 2,

gname: '梨',

price: 6

}, {

id: 3,

gname: '香蕉',

price: 10

}, {

id: 4,

gname: '西瓜',

price: 7

}, {

id: 5,

gname: '西瓜',

price: 7

}, {

id: 6,

gname: '西瓜',

price: 7

}]

},

methods: {

changclass() {

this.classname = 'box2';

}

}

});

</script>

</body>

</html>

单页面（SPA）和多页面（MPA）的区别

单页面（SPA）

多页面（MPA）

刷新方式

页面局部刷新或更改

整页刷新

url 模式

a.com/#/pageone a.com/#/pagetwo

a.com/pageone.html a.com/pagetwo.html

用户体验

页面片段间的切换快，用户体验良好

页面切换加载缓慢，流畅度不够，用户体验比较差

转场动画

容易实现

无法实现

数据传递

容易

依赖 url传参、或者cookie 、localStorage等

搜索引擎优化(SEO)

需要单独方案、实现较为困难、不利于SEO检索 ，可利用服务器端渲染(SSR)优化

实现方法简易

适用范围

高要求的体验度、追求界面流畅的应用

适用于追求高度支持搜索引擎的应用

开发成本

较高，常需借助专业的框架

较低 ，但页面重复代码多

维护成本

相对容易

相对复杂

前端-邵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue源码：vue实例挂载篇
老司机的后备箱
06-28 2229
在new一个Vue对象的时候，内部究竟发生了什么？Vue的构造类只做了一件事情，就是调用_init函数进行初始化。 2._init，初始化 _init主要做了这两件事： initData 首先判断data是不是函数，如果是函数的话执行getData。getData做的事情很简单：，因为vue推荐我们把data定义为一个函数然后返回具体的data对象，因此getData只需执行一次data拿到返回值即可。 判断是否与props属性名冲突，然后将data挂载到vue实例中。这里是通过proxy对vue实例的g
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue的使用，详细教程
ccl020312的博客
06-15 599
找到安装的目录，在安装目录下新建两个文件夹 node_global 和 node_cache。打开命令提示符窗口输入这两行代码 每行代码后面的路径为刚刚新建的路径，注意区分。安装完成后，在项目中的main.js中引入elementui。使用npm i element-ui -S。在命令提示符窗口中查看是否安装成功。下面显示版本号就说明安装成功了。在命令提示符窗口输入。
Vue.js 学习笔记: 第二课
luolvzhou的博客
04-29 139
关于Vue.js相关知识，我们连载第二课 首先来说说关于vue.js调用函数的问题，即computed和methods，举个例子 <div id="app-1"><h1>{{details()}}</h1></div> 我们都知道双大括号中封装的是内容，所以对于当前details()后面加了括号这种，默认...
Vue动态创建组件实例并挂载到body
小匠的Blog
03-08 3986
方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(comp.$el) com
Vue实例挂载的实现
qq_44997147的博客
05-05 563
问题：src/core/instance/init.js的$mount是从哪来的？ 关键词：$mount、el、render、template 逻辑：mountComponent会完成整个渲染工作，最核心的2个方法：vm._render和vm._update。 Vue实例挂载的实现 也就是执行vm.$mount方法做了那些事情？ 以 Runtime + Compiler 版的 vue.js 为例，所以入口文件为src/platforms/web/entry-runtime-with-compiler.js
VUE基础知识
m0_60027772的博客
07-16 1856
vue框架是一个轻量级，渐进式的前端框架。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue基础知识
weixin_45838066的博客
02-27 657
vue
vue 基础知识总结
qq_40046544的博客
09-14 3239
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
Vue基础知识分享
08-07
在"Vue基础知识分享"这个压缩包中，我们有三个关键的学习资源：一个关于Vue基本知识的PPT，一份基于Vue官网实现的简单代码示例，以及一个详细讲述Vue基本操作的Word文档。这些资料将帮助我们深入理解Vue的核心概念和...
Vue基础知识.pptx
03-24
总的来说，Vue.js 的基础知识和进阶特性对于前端开发者来说至关重要，熟练掌握这些知识点不仅能帮助面试者成功通过Vue相关的职位面试，而且在实际项目中也能发挥出强大的能力。通过不断学习和实践，开发者可以充分...
vue基础知识学习文档
03-28
Vue基础知识学习文档 本文档旨在详细介绍 Vue 框架的基础知识点，涵盖了 Vue 模板语法、指令语法、数据绑定、计算属性、监视属性、事件、组件、插槽、Vuex、路由、响应式数据等多个方面。 一、模板语法 Vue 模板...
vue基础知识面试题.zip 包含 vue2 和 vue3
01-23
vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 ...
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 594
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue图片存放在public目录和src/assets目录下的区别
最新发布
Zing_ing的博客
07-19 389
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 570
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
【Vue】 style中的scoped
DX390609的博客
07-15 177
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
Vue基础知识总结：数据绑定、组件、指令、生命周期和路由
Vue基础知识 本文将对Vue基础知识进行详细的讲解和总结，涵盖了数据绑定、组件、指令、项目开发、生命周期、路由等方面的知识点。 **数据绑定** 数据绑定是Vue框架中的一种机制，允许开发者将数据与视图层进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值