Vue 基础、选项/数据、模板语法、指令、数据代理/检测(笔记)

已于 2023-06-29 12:48:55 修改
阅读量1.4k 收藏
点赞数
分类专栏： vue 文章标签： vue vue.js
于 2022-04-15 16:04:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60547084/article/details/124197069
版权

文章目录

1. 什么是vue

  • vue 是一套用于构建用户界面的渐进式 JavaScript 框架
  • 构建用户界面：把对应的数据渲染到页面上
  • 渐进式：对于简单应用 vue 的核心库非常轻量小巧，对于复杂应用可以引入各式各样的 vue 插件

2. vue的特点

  1. 采用组件化模式，提高代码复用率、且让代码更好的维护
  2. vue 是单页面应用，使页面局部刷新
  3. 声明式编码( 直接在标签上写 vue 指令 )，无需操作 dom，提高开发效率
  4. 使用虚拟 dom 和 diff 算法，避免真实 dom 过多的创建与销毁

3. MVVM模型

  • M：模型(Model)，对应 data 中的数据
  • V：视图(View)：模板
  • VM：视图模型(ViewModel)：Vue 实例对象
  • 无需操作 DOM，数据发生变化视图自动更新

4. 初始vue

<!-- 创建视图(vue 模板) -->
<div id="app">
  <button @click="btn">点击</button>
</div>

<!-- 引入 vue 框架，使用的 CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
  const vm = new Vue({ // 创建 vue 实例
    el: "#app", // 挂载，用于指定这个实例为哪个视图服务
    data: { // 用于存储数据，在视图中可以直接使用，在 vue 中可以通过 this 获取
      msg: "hello Vue"
    },
    methods: { // 
      btn() {
        console.log(this.msg);
      }
    }
  })
</script>

5. 模板语法(插值表达式)

数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值

<!-- 
  可以在 *标签体* 中写一些js代码，只能是表达式，不能是js语句
	一、表达式：表达式会产生一个值
	  1. a
	  2. a + b
	  3. true ? 1 : 0
	  4. (function(){return "在页面中 Vue 会显示我"})()
	二、js语句
	  1. if(){}
	  2. let abc

	msg 为 data 中的数据
-->
<div id="app">{{msg}}</div>
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ msg.split('').reverse().join('') }}

<!-- 这样写是不可以的，和 eval 中的内容很像 -->
{{let num}}

6. vue内置指令

6.1 v-on：事件绑定
<script>
 // v-on ===> @，语法糖写法
 // 1. 事件修饰符
 // .stop：调用 event.stopPropagation()，阻止事件冒泡
 // .prevent：调用 event.preventDefault()，阻止默认事件
 // .once：事件只触发一次
 // .capture：转为事件捕获
 // .self：只有 event.target 是当前元素时才会触发
 // .passive：事件的默认行为立即执行，无需等待事件回调执行完毕
 //    (比如滚轮事件，要等事件回调执行完成之后，页面才会发生滚动，加了这个事件修饰符后，可以直接滚动)
 // .native：监听组件根元素的原生事件
 
 
 // 2. 键盘事件
 // (1). Vue 中常用的按键的别名，和事件修饰符的用法一样
 // 只能触发对应的键盘事件
 // 回车 => enter
 // 删除 => delete
 // 退出 => esc
 // 空格 => space
 // 换行 => tab
 // 上 => up
 // 下 => down
 // 左 => left
 // 右 => right
 
 // (2). 其他事件
 // 直接使用 event 事件对象中 key 值即可，不过需要小写，多个单词 CapsLock => caps-lock
 // keyCode 也可以，但是 MDN 不推荐使用，已经从 web 标准中移除
    
 // (3). Vue.config.keyCodes.自定义键名 = keyCode ，可以自定义键盘别名
</script>

<!-- 用法 -->
<button @click.stop="btn"></button>

<!-- 还可以连续点击 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 事件对象，这两种方法在函数中的第一个参数，都可以接收事件对象 -->
<button @click="btn"></button> 			<!-- 不可以传参 -->
<button @click="btn($event)"></button>  <!-- 可以传参 -->
6.2 v-bind：属性绑定
<!-- v-bind ===> : ，语法糖写法 -->
<!-- imageSrc 为 Vue 中 data 的数据 -->
<img :src="imageSrc">

<!-- 也可以配合 class 使用 {} -->
<!-- isActive 为真时，div 存在 active 类名，为假时，没有类名 -->
<div :class="{ active: isActive }"></div>

<!-- 也可以使用数组，添加多个属性 -->
<!-- 注意：box、active 为 data 中的数据 -->
<div :class="[box, active]"></div>
<!-- 如果不想使用变量 ['box', 'active'] 即可 -->

<!-- 
  关于数组/对象的写法，可以直接创建一个 arr/obj，放在 data 中
  然后在 class 中写 arr/obj 也可以，这种方式更容易管理
-->

<!-- 当然也可以配合使用 -->
<div :class="[box, { active: isActive }]">张三</div>

<!-- 动态属性名，key 为 data 中的数据，如果 key: class，就代表属性为 class -->
<button :[key]="value"></button>

<!-- 配合 style 使用，数组对象嵌套也可以 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]"></div>
6.3 v-text：更新元素
<!-- msg 是 Vue 中 data 的数据 -->
<!-- text 专门展示文本的 -->
<span v-text="msg">我是span中的内容，我会被覆盖</span>
6.4 v-html：更新元素
<!-- 动态渲染任意 HTML，这种行为非常的危险，不能把用户数据通过这种形式渲染 -->
<span v-html="msg">我是span中的内容，我会被覆盖</span>
6.5 v-if：条件渲染
<!-- v-for 比 v-if 优先级高一些，不推荐一起使用 -->
<!-- 当条件为真时，显示对应的元素 -->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
6.6 v-show：条件渲染
<!-- 
  v-show 与 v-if：
  v-if：是真正的条件渲染，会对 dom 进行创建和销毁，同时它也是懒惰的，如果最开始条件就为假时，就不会进行渲染
  v-show：无论条件是真或假，元素都会被渲染，只是简单的进行了 css 样式切换(display: none;)
-->
<h1 v-show="true">Hello!</h1>
6.7 v-for：列表渲染
<!-- 需要绑定 key 为唯一标识，设计到 diff 算法，如果 key 没有写，vue 默认会把 index 当做 key -->
<!-- v-for 的优先级要比 v-if 的优先级高一些，但是不推荐写在一起，会出现很多问题 -->

<!-- list 为数组时 -->
<ul>
    <!-- index 为索引，item 为值 -->
  <li v-for="(item, index) in list" :key="item.id">
      {{item.title}}
  </li>
</ul>

<!-- list 为对象时 -->
<div v-for="(val, key, index) in list"></div>

<!-- v-for 可以遍历数组、对象、集合、映射、字符串、指定次数 -->
6.8 v-model：双向绑定
<!-- 只能用于表单类，可输入元素，v-model 默认绑定的 value 值 -->
<!-- v-model:value ===> v-model，语法糖写法 -->
<input type="text" v-model:value="msg"> {{msg}}

<!--
  收集表单数据：
	<input type="text">，v-model 收集的是 value 值，用户输入的就是 value 值
    <input type="radio">，v-model 收集的是 value 值，需要给标签配置 value 值
	<input type="checkbox">
      1. 没有配置 input 的 value 属性，那么收集的就是 checkout (布尔值)
	  2. 配置 input 的 value 属性：
		(1) v-model 的初始值不是数组，那么收集的就是 checkout (布尔值)
		(2)	v-model 的初始值是数组，那么收集的就是 value 组成的数组
	
	v-model 修饰符
	  lazy：失去焦点在收集，和 change 事件一样，v-model 默认是通过 input 事件收集的
	  number：输入的字符串转为数字，因为 value 默认是字符串
	  trim：收集时自动过滤首尾空格
-->
6.9 v-cloak
<!-- 处理 vue 生命周期中，视图数据会出现双大括号的问题 -->
<!-- 需要 css 配合，在有双大括号的时候先隐藏，等到 vue 渲染完成后在展示 -->
<style>
  [v-cloak] {
    display: none;
  }
</style>

<div v-cloak>
  {{ message }}
</div>
6.10 v-once
<!--
  v-once 所在的节点在初次动态渲染后，就视为静态内容了
  以后的数据在怎么改变，该内容也不会更新，可以用于性能优化
-->
<!-- 这里 n 在怎么加，也没有用 -->
<button @click="n++" v-once>{{n}}</button>
6.11 v-pre
<!-- 不去解析 Vue 中的语法，视图写什么页面就渲染什么，可以加快编译 -->
<div v-pre>{{msg}}</div>
<!-- 浏览器直接显示 {{msg}} -->
6.12 v-slot：插槽
<!-- v-slot: ===> #，语法糖写法 -->
<!-- 插槽 -->

7. 自定义指令

7.1 函数式
<!-- html 内容 -->
<div id="app">
    <!-- v-big 可以把 n 放大10倍 -->
  <span v-big="n"></span> 
</div>

const vm = new Vue({
  el: "#app",
  data: {
    n: 1
  },
  directives: {
    // big(){}：代表创建了一个 v-big 的自定义指令
    // el：指令所绑定的真实 dom
    // binding：对应的配置数据，其中 value 属性就是指令所绑定的值
    big(el, binding){ 
      // big 函数的执行时机：
      // 1. 会在 v-big 指令与元素绑定成功时执行
      // 2. 当指令所在的模板被重新解析时也会执行
      el.innerText = binding.value * 10
	}
  }
})
7.2 对象式
<!-- html 内容 -->
<div id="app">  
  <h2 v-my-big="n"></h2>
</div>

const vm = new Vue({
  el: "#app",
  data: {
    n: 1
  },
  directives: {
    // 多个单词连接的自定义指令，不能使用小驼峰，需要用 - 相连
    "my-big": {
      // el：指令所绑定的真实 dom
      // binding：对应的配置数据，其中 value 属性就是指令所绑定的值
      // vnode：虚拟 dom
      // oldVnode：更新之前的虚拟 dom
      bind(el, binding, vnode) {
        console.log("只调用一次，指令第一次绑定到元素时调用");
      },
      inserted(el, binding, vnode) {
        console.log("插入父节点时调用，表示该元素已经在页面上了");
      },
      update(el, binding, vnode, oldVnode) {
        console.log("更新时调用，可能子组件还没有更新完");
      },
      componentUpdated(el, binding, vnode, oldVnode) {
        console.log("全部更新后调用，在 update 之后调用");
      },
      unbind(el, binding, vnode) {
        console.log("只调用一次，指令与元素解绑时调用");
      }
    }
  }
})
7.3 全局与局部语法
// 全局
Vue.directive(指令名, 配置对象) // 对象式
Vue.directive(指令名, 回调函数) // 函数式

// 局部
new Vue({
  directives:{(指令名, 配置对象)} // 对象式
})
new Vue({
  directives:{(指令名, 回调函数)} // 函数式
})

注意：

  • 多个单词组成的指令，无论是使用还是创建都需要用 - 相连
  • 自定义指令中所有函数的 this 都指向 window

8. 数据代理

// 在 vue 实例中，我们写在 data 中的数据可以直接通过 this 使用
// 这个是因为 Vue 使用了 Object.defineProperty() 的方法进行了数据代理
// 还有一点就是 data 在 vue 实例中变成了 _data

// 从下面这段代码就可以很明显的看出，vm._data 是等于 obj 的
// vue 把 data 中的数据直接添加到 vue 实例上了
// 无论是 _data 中的数据，还是添加到 vue 实例上的数据，有一个发生改变另一个也会变
let obj = {
  name: "张三",
  age: 18
}
const vm = new Vue({
  el: "#app",
  data: obj // 只有 data 中的数据才会做数据代理
})
console.log(vm._data === obj); // true

9. 数据检测的问题

9.1 对象
  • vue 在对一个对象进行修改和获取时，vue 是响应式的
  • 因为 vue 是借助 Object.defineProperty() 的方法对数据进行响应的，但是这个方法只有 get 和 set
  • 这个时候就会出现问题，对象中的数据进行添加或删除时，vue 无法检测
  • vue 中提供了一个全局的 set ( set 有添加或修改的意思，这里是指添加 ) 和 delete 两个方法，对数据进行添加或删除
  • 这里要区分一点，vue 中全局的方法是直接可以 Vue. 使用，在实例中是 this.$ 使用
// 全局，target ==> 数组/对象，target 不能为 vue 实例和 vue 实例中的 data
Vue.set( target, key/index, value )
Vue.delete( target, key/index )
9.2 数组
  • 在对应数组的修改时 vue 对这七个方法进行了重写，push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  • 所以使用这七个方法对数组进行修改时，数据也是响应式的
  • 对于 ES6 新增的两个改变数组自身的方法，和手动通过下标修改的数据，都不是响应式的

10. 计算属性和侦听器

10.1 计算属性(computed)
const vm = new Vue({
  data: {
    firstName: "",
    lastName: "",
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + " " + this.lastName;
      },
      set: function (newValue) {
        var names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      },
    },
    gather2() {
      return "我是访问时的值，只有 get 时的简写";
    },
  },
});

// 现在再运行 vm.fullName =John Doe’时，setter 会被调用vm.firstName 和 vm.lastName也会相应地被更新。
  1. 计算属性底层也是借助了 Object.defineProperty() 的方法，使计算属性中的值也是响应式的
  2. get 函数在初次读取时会执行一次，当依赖的数据发生改变的时候会被再次调用（这个指上面的案例，firstName 或 lastName 发生改变时才会再次触发 get 方法，而不是指计算属性中的 set）
  3. 计算属性会进行缓存，当值未发生改变时，计算属性中的函数不会再次调用，只是使用了缓存的值
  4. 一般计算属性只是用于得到计算的结果，也就是默认只会用到 get 方法，很少会用到 set 方法，所以可以使用简写
  5. 计算属性最终会出现在 vm 上，可以直接读取
10.2 侦听器(watch)
// 实例中监测
const vm = new Vue({
  el: "#app",
  data: {
    msg: "hello Vue"
  },
  methods: {
    btn() {
      console.log(this.msg);
    }
  },
  watch: {
	msg: { // 被监测的值必须存在
      immediate: true, // 初始化时，就调用一次 handler
      deep: true, // 开始监视深层的数据，在 watch 中默认只监测一层数据的变化
      handler(newValue, oldValue) { // 当 msg 值发生改变时会执行 handler 函数
        console.log("msg 发生改变了，oldValue 为改变前的值，newValue 为改变后的值")
      }
	},
    msg(newValue, oldValue) { // 只有函数不需要配置项时可以简写
      console.log("我是简写形式")
    }
  }
})

// 实例监测，两种效果是一样的，对象式
let unwatch = vm.$watch("msg", {
  immediate: true,
  deep: true,
  handler(newValue, oldValue){
    console.log("msg 发生改变了，oldValue 为改变前的值，newValue 为改变后的值")
  }
})
// 函数式
let unwatch = vm.$watch("msg", function (newValue, oldValue){
  console.log("msg 发生改变了，oldValue 为改变前的值，newValue 为改变后的值")
})

// 取消观察，在全局使用时，会返回一个取消观察的函数
unwatch()

侦听器每次发生变化时就会触发，用于监听数据的变化

10.3 computed与watch之间的区别
  1. computed 能完成的功能，watch 都可以完成
  2. watch 能完成的功能，computed 不一定能完成，例如 watch 可以进行异步操作
  3. computed 主要进行计算的汇总，watch 主要用于观察数据，根据数据的变化来处理对应的程序
  4. computed 会进行缓存，watch 不会
  5. computed 会计算出一个新的值，watch 对已有的值进行监测

11. 过滤器

<!-- html 内容 -->
<div id="app">
  <span>{{msg | filter1 | filter1(123)}}</span>
</div>

// 全局注册
Vue.filter("filter0", (val) => {
  return "我是全局的过滤器"
})

// 局部注册
const vm = new Vue({
  el: "#app",
  data: {
    msg: "hello Vue"
  },
  filters: {
    // 这个 val 默认为过滤器前的值，msg
    filter1(val) {
      return "我被过滤了" + val
	},
    // num 是传入的123
    filter2(val, num) {
      return val + num
    }
  }
})
  1. 过滤器的定义：对要显示的数据进行特定格式化后在显示，比较适用于一些简单的逻辑的处理
  2. 注册过滤器有两种方式，全局的在任何位置都可以使用，局部的只能用于当前组件或实例
  3. 默认过滤器的第一个参数是过滤器前面的值，第二个参数是使用过滤器传入的值，依次类推
  4. 过滤器可以连续使用
  5. 过滤器并不会改变原数据，只是返回新的数据
codecat0710
关注
专栏目录
vue源码分析-基础的数据代理检测
yyzzabc123的博客
10-10 206
简单回顾一下这个系列的前两节，前两节花了大量的篇幅介绍了Vue的选项合并，选项合并是Vue实例初始化的开始，Vue为开发者提供了丰富的选项配置，而每个选项都严格规定了合并的策略。然而这只是初始化中的第一步，这一节我们将对另一个重点的概念深入的分析，他就是，我们知道Vue大量利用了代理的思想，而除了响应式系统外，还有哪些场景也需要进行数据代理呢？这是我们这节分析的重点。
Vue模板项和数据项
weixin_50808965的博客
03-28 712
什么是Vue？Vue是一个开发Web界面的前端框架。为什么要用Vue前端库进行Web界面的开发，使用HTML、CSS、JS、JQuery和主流的UI插件不就已经达到开发Web界面的需求了吗，为什么还要多弄一个Vue前端框架出来，请看下图： 以上两图主要功能都是一些数据的改变、监听事件，却要花费几乎50% 的篇幅使用JQuery去不断地操作DOM元素，可以想象倘若现今的淘宝若是用JQuery作为主要的用户交互技术，处理和维护起来是多么地麻烦。不断地使用代码获取DOM元素，检测DOM元素，修改DOM元素最后
【vue】基础(三) 实例与选项、computed属性、watch属性、三种模板、模板渲染
GY的博客
11-25 825
key属性 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。 说明：使用 key，Vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 vue key vue key属性的说明 <div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> 样式处理 -class和style 使用方式：v-bind:class="expression" or :class
vue检测数据的原理
AIpoem的博客
11-04 567
vue如何监测对象中的数据？vue如何监测数组中的数据？
VUE基础学习笔记——01模板语法
ZJia_X的博客
09-12 220
VUE基本使用 1.传统开发模式对比 原生JS <div id="msg"><div> <script type="text/javascript"> var msg='hello world'; var div=document.getElementById('msg'); div.innerHTML=msg; </script> jQuery <div id="msg"></div> <script type="tex
小白零基础学 VUE笔记
baidu_36820987的博客
12-29 1000
面试题：react、vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
【2022.4.20修改】Vue_day02_模板语法_指令_表单数据绑定_DevTools使用
pre_eminent的JAVA学习园地
04-22 419
Vue.js 四天课程学习笔记_第2天课程内容概要:1. 介绍Vue中模板语法及数据绑定 主要是概述了el、data、 methods语法的作用及注意事项2. 介绍Vue指令 主要是v-html、v-once、v-if(渲染与否)、v-show(显示与否)、v-for(循环)、v-on(绑定事件,简写是@)、v-bind(单向绑定,简写是:)、v-model(双向绑定)3. 介绍表...
vue基础知识笔记（一）—— 指令
weixin_51341611的博客
03-01 999
vue基础知识笔记 —— 指令详解，持续更新中。
Vue.js初学者教程：数据双向绑定与常用指令解析
"Vue.js的学习，特别是数据的双向绑定和常用指令是初学者入门的关键部分。本文将探讨这两个核心概念，并通过实例代码展示其工作原理。" 在Vue.js中，数据的双向绑定是一个强大的特性，它使得视图和模型之间保持同步...
vue中实现页面刷新以及局部刷新的方法
qq_41117240的博客
10-12 9291
vue中实现页面刷新以及局部刷新的方法
vue 全局刷新与局部刷新
半梅芒果干的博客
03-23 2387
【代码】vue 全局刷新与局部刷新。
vue实现页面刷新以及局部刷新的方法
qq_33235680的博客
05-20 1万+
vue实现页面刷新以及局部刷新的方法
【前端】Vue实现操作A页面时，刷新B页面的数据(局部刷新)
SouthNAN的博客
03-30 6658
参考链接：VUE实现页面局部刷新 本功能是在此文章的启发下进行改进的 业务需求： 点击“详情”的时候刷新通知消息，但不能整个页面一起刷新，而消息通知和列表并不在一个页面上 解决方案： 1、在需要局部刷新的标签上加上【v-if="isRouterAlive"】，当然navbar 标签只是在此处引入【消息通知】的，其具体实现在其他页面，样式已省略 <template> <div :class="classObj" class="app-wrapper"> &l
Vue实现页面的局部刷新（router-view页面刷新）
m0_65299760的博客
02-05 1142
参考http://t.csdnimg.cn/opsoH
VUE实现当前页面刷新的七种方法
热门推荐
weixin_40381947的博客
07-18 4万+
需要注意的是，使用该方法会刷新整个页面，包括Vue实例、组件以及其他的页面元素，可能会导致一些不必要的开销，不是最优的解决方案。需要注意的是，该方法会重新加载整个页面，如果想要对页面局部进行刷新，可以考虑使用 Vue 自身的一些特性，比如通过设置组件的 key 属性实现组件的更新，或者通过调用。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
vue局部刷新页面的三种方法
admin_rdc
02-20 3785
方法一： location.reload(); 方法二： this.$router.go(0); 方法三： provide() 与 inject 结合; 在App.vue中 <template> <router-view v-if="isRouterAlive"/> </template> <script> export default...
Vue中实现【组件局部刷新】及【页面刷新】
最新发布
qq_39454432的博客
04-09 3890
Vue中实现【组件局部刷新】及【页面整体刷新】
vue组件刷新 局部刷新----记录
记录
06-08 1118
如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件，从而达到更新目的。1.使用this.$forceUpdate()强制重新渲染。2.使用v-if指令。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值