vue概述及知识整理特点

最新推荐文章于 2023-04-15 09:59:35 发布
最新推荐文章于 2023-04-15 09:59:35 发布
阅读量194 收藏
点赞数 1
文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49802371/article/details/120287568
版权

1.vue概述
目标：MVVM模式应用特点，Vue概念
小结：
MVVM通过视图与模型的双向绑定，简化前端操作。Vue是一款前端渐进式框架，可以提高前端开发效率。

2. 搭建示例工程

目标：使用IDEA创建示例工程并在工程中通过npm安装下载vue.js

分析：

vue是一个前端框架，也是其实是一个js文件；下载vue.js文件并在页面中引入该js文件。

vue.js的下载方式：

  • 可以引用在线的vue.js；
  • 可以离线下载vue.js；
  • npm包资源管理器，可以下载vue.js

小结：

使用了npm的方式安装vue模块：

#初始化
npm init -y

#下载vue模块
npm install vue --save

3. 演示双向绑定与事件处理

目标：创建01-demo.html页面并初始化Vue实例，通过console修改Vue数据实现双向绑定效果和创建按钮实现点击即自增
分析：

  1. 创建页面，初始化vue；
  2. {{}}获取显示数据；
  3. v-model实现双向绑定；
  4. v-on演示事件处理
    小结：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num"><button v-on:click="num++">点我</button>
    <h2>{{name}} 非常酷！有{{num}}个学科。</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            name:"黑马",
            num: 1
        }
    });
</script>
</body>
</html>

## 4. Vue实例生命周期及钩子函数

**目标**：了解Vue实例生命周期，生命周期的钩子函数及created函数常用场景

**分析**：

在创建vue实例的时候可以指定模板id、数据和方法；而如果要在实例化、模板渲染的过程中需要执行一些其它操作的话；那么可以使用钩子函数。

**小结**：

钩子函数会在vue实例的各个生命周期阶段自动调用；具体有：beforeCreate，created,beforeMount,mounted,updated,beforeUpdate，destroyed，beforeDestroy

created钩子函数常用场景：用于初始化数据

> 钩子函数不要使用箭头函数的方式编写。

## 5. 插值、v-text和v-html

**目标**：插值使用场景和要求；v-text和v-html的作用

**小结**：

**插值**可以使用在有需要显示vue实例数据的地方，可以在插值表达式中调用实例的数据属性和函数。

v-text和v-html的作用：可以将数据在模板中进行显示；**区别**：v-html会对内容中出现的html标签进行渲染，而v-text会将内容当做普遍文本输出到元素里面。

## 6. 指令-v-model使用

**目标**：使用v-model指令实现复选框的双向绑定

**小结**：

```html
html
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br>
    <input type="checkbox" value="Python" v-model="language">Python<br>
    <input type="checkbox" value="Swift" v-model="language">Swift<br>
    <h2>
        你选择了：{{language.join("，")}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            language:[]
        }
    });
</script>

多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和 textarea 默认对应的model是字符串
select 单选对应字符串，多选对应也是数组

7. 指令-v-on使用

目标：了解v-on指令的语法实现按钮点击后的递增和递减

分析：

在没有使用vue之前；页面标签可以通过设置onXXX响应事件；在vue中可以通过v-on指令响应事件。

小结：

v-on的使用：

<div id="app">
    <button v-on:click="num++">增加</button>
    <button @click="decrement">减少</button>
    <h2>
        num = {{num}}
    </h2>
    <hr>
    事件冒泡测试：<br>
    <div style="background-color: lightblue; width:100px;height:100px" @click="print('div被点击了')">
        <button @click.stop="print('点击了button')">点我试试</button>
    </div>
    <br>阻止默认事件：<br>
    <a href="http://www.itcast.cn" @click.prevent="print('点击了超链接')" >传智播客</a>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods: {
            //递减
            decrement(){
                this.num--;
            },
            //打印
            print(str){
                console.log(str);
            }
        }
    });
</script>

事件修饰符：语法v-on:xxxx.修饰符，常用的修饰符有：

.stop ：阻止事件冒泡
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次

8. 指令v-for使用

目标：了解v-for指令语法实现对数组、对象的遍历

分析：

实现：可以在vue实例化的时候指定要遍历的数据，然后通过v-for指令在模板中遍历显示数据。一般情况下，要遍历的数据可以通过钩子函数created发送异步请求获取数据。

小结：

可以使用v-for遍历数组、对象：

<div id="app">
    <ul>
        <li v-for="(user, index) in users" :key="index">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(value, key, index) in person">
            {{index}}--{{key}}--{{value}}
        </li>
    </ul>

</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"黑马","age":13,"gender":"男"},
                {"name":"传智播客","age":13,"gender":"女"},
                {"name":"酷丁鱼","age":4,"gender":"男"}
            ],
            person:{"name":"传智汇","age":13,"gender":"男","address":"中国"}
        }
    });
</script>

如果遍历的时候需要使用到索引号，可以在循环遍历的位置，添加一个参数；该索引号是从0开始的。

9. 指令-v-if和v-show使用

目标：说出v-if与v-show的区别；通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行判断处理；实现文本内容的隐藏

分析：

  • v-if：通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行判断处理
  • v-show：实现文本内容的隐藏

小结：

v-if在条件不满足的时候元素不会存在；v-show条件不满足的时候只是对元素进行隐藏。

10. 指令-v-bind使用

目标：了解v-bind语法和作用；实现点击不同按钮切换不同的属性值；使用class属性中的特殊用法实现一个按钮切换背景色

分析：

其中src和height的值如果不想写死，而是想获取vue实例中的数据属性值的话；那可以通过使用v-bind实现：

<img v-bind:src="vue实例中的数据属性名" :height="vue实例中的数据属性名"/>

小结：

可以使用v-bind：

<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div :class="color">
        点击按钮改变背景颜色
    </div>
    <hr>
    <br>
    <button @click="bool=!bool">点我改变下面色块的颜色</button>
    <div :class="{red:bool, blue:!bool}">
        点击按钮改变背景颜色
    </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            color:"red",
            bool:true
        }
    });
</script>

v-bind的作用：可以对所有元素的属性设置vue实例的数据。

11. 计算属性的使用

目标：计算属性的应用场景，实现将一个日期时间值转换为yyyy-MM-dd格式字符串

分析：

一个日期的毫秒值要显示为格式化（yyyy-MM-dd）的日期字符串的话；可以使用computed计算属性里面的方法进行处理。

小结：

计算属性的应用：

<div id="app">
    <h2>
        你的生日是：
        {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <hr>
    <h2>
        你的生日是：
        {{birth}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            birthday:1429032123201
        },
        computed:{
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
            }
        }
    });
</script>

computed计算属性的应用场景：可以应用在插值或者指令表示式复杂的时候。可以将一些属性数据经过方法处理之后返回。

12. watch基本和深度监控

目标：watch的使用场景；并使用其监听简单属性值及其对象中属性值的变化

分析：

在vue实例中数据属性；因为在页面中修改而产生了变化；可以通过watch监控获取其改变前后的值。

如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。如：person.name

小结：

可以如下使用watch进行数据属性的监控：

<div id="app">
    <input type="text" v-model="message">
    <hr><br>
    <input type="text" v-model="person.name"><br>
    <input type="text" v-model="person.age"><button @click="person.age++">+</button>
    <h2>
        姓名为：{{person.name}}；年龄为：{{person.age}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"黑马",
            person:{"name":"heima", "age":13}
        },
        watch:{
            message(newValue, oldValue){
                console.log("新值：" + newValue + "；旧值：" + oldValue);
            },
            person: {
                //开启深度监控；监控对象中的属性值变化
                deep: true,
                //可以获取到最新的对象属性数据
                handler(obj){
                    console.log("name = " + obj.name + "; age=" + obj.age);
                }
            }
        }
    });
</script>

watch使用场景：可以监控视图中数据的变化而做出响应；如：下拉框列表中，当如果选择了对于的下拉框选项之后，要根据最新的值去加载一些其它数据的话。

13. 组件使用

目标：了解组件的使用场景；定义点击则计数的组件并使用全局注册和局部注册方式

分析：

可以将通用或者公用的页面模块抽取成vue组件，在vue实例中引用。

小结：

在页面中可以如下实验组件：

<div id="app">
    <!--使用组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>
<script type="text/javascript">

    //定义组件
    const counter = {
        template:"<button @click='num++'>你点击了{{num}}次</button>",
        data(){
            return {num:0}
        }
    };

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2：具体的组件
    //Vue.component("counter", counter);

    var app = new Vue({
        el:"#app",
        components:{
            counter: counter
        }
    });
</script>

组件使用场景：在项目需要重用某个模块（头部、尾部、新闻。。。）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。

  • 全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
  • 局部注册：可以在有需要的页面引入组件，如：商城网站首页页面中各种活动模块

14. 父组件向子组件通信

目标：父组件与子组件通信的意义；实现父组件将简单字符串和对象更新到子组件

小结：

组件通信意义：父子组件之间数据的交换，能够及时更新组件内容。

  • 父组件将简单字符串更新传递到子组件
<div id="app">
    <!--使用组件-->
    <introduce :title="msg"></introduce>
</div>
<script type="text/javascript">

    //定义组件
    const introduce = {
        template:"<h2>{{title}}</h2>",
        //定义接收父组件的属性
        props:["title"]
    };

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2：具体的组件
    Vue.component("introduce", introduce);

    var app = new Vue({
        el:"#app",
        data:{
            msg:"父组件的msg属性数据内容"
        }
    });
</script>
  • 父组件将数组更新传递到子组件
<div id="app">
    <!--使用组件-->
    <my-list :items="lessons" ></my-list>
</div>
<script type="text/javascript">

    //定义组件
    const myList = {
        template:`
            <ul>
            <li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}}</li>
</ul>
        `,
        //定义接收父组件的属性
        props:{
            items:{
                //数据类型，如果是数组则是Array，如果是对象则是Object
                type:Array,
                //默认值
                default:[]
            }
        }
    };

    var app = new Vue({
        el:"#app",
        data:{
            msg:"父组件的msg属性数据内容",
             :[
                {"id":1, "name":"Java"},
                {"id":2, "name":"Php"},
                {"id":3, "name":"前端"}
            ]
        },
        components:{
            myList
        }
    });
</script>

15. 子组件向父组件通信

目标：在子组件中点击对应按钮实现父组件中属性数据的改变

小结：

<div id="app">
    <h2>num = {{num}}</h2>
    <!--使用组件-->
    <counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
</div>
<script type="text/javascript">

    //定义组件
    const counter = {
        template:`
            <div>
            <button @click='incrNum'>+</button>
            <button @click='decrNum'>-</button>
            </div>
        `,
        props:["snum"],
        methods:{
            //递增
            incrNum(){
                //调用到父组件中的方法
                return this.$emit("plus");
            },
            decrNum(){
                //调用到父组件中的方法
                return this.$emit("reduce");
            }
        }
    };

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2：具体的组件
    //Vue.component("counter", counter);

    var app = new Vue({
        el:"#app",
        components:{
            counter: counter
        },
        data:{
            num:0
        },
        methods:{
            numPlus(){
                this.num++;
            },
            numReduce(){
                this.num--;
            }
        }
    });
</script>

16. axios概述

目标：axios的用途及了解常见方法

小结：

axios的作用：发送异步请求获取数据。常见的方法：get、post；在发送的时候可以指定参数（地址、请求方式和请求头部信息）；返回数据结构（data/status/statusText/headers/config）

17. axios方法及get、post方法使用

目标：使用axios方法获取数据并在页面中将数据遍历显示；切换改为get/post方法实现数据加载

小结：

可以使用axios获取对应服务器数据；如果不是同一个服务的数据则可能会出现跨域请求；需要在响应的服务器上配置跨域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user, index) in users" :key="index">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>

</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            users:[]
        },
        created(){
            //初始化加载数据
            axios.post("data.json").then(res=>{
                console.log(res);
                //将数据赋值到vue实例中的数据属性users；
                //不能使用this，在axios回调函数中表示窗口，不是vue实例
                app.users = res.data;
            }).catch(err=>alert(err));

            axios.get("http://localhost/user/8").then(res=>{
                console.log(res.data);
            }).catch(err=>alert(err));
/*
            axios.get("data.json").then(res=>{
                console.log(res);
                //将数据赋值到vue实例中的数据属性users；
                //不能使用this，在axios回调函数中表示窗口，不是vue实例
                app.users = res.data;
            }).catch(err=>alert(err));
*/
/*
            axios({
                url:"data.json",
                method:"get"
            }).then(res=>{
                console.log(res);
                //将数据赋值到vue实例中的数据属性users；
                //不能使用this，在axios回调函数中表示窗口，不是vue实例
                app.users = res.data;
            }).catch(err=>alert(err));
*/
        }
    });
</script>
</body>
</html>
峰sir01
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue面试题及Vue知识点整理
12-10
（都是一些基础的vue面试题，大神不用浪费时间往下看） 一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责...
Vue的特点
simple_Xsg的博客
05-24 1万+
一、特点 1、组件化。保留了 react 框架的优点，实现了封装和重用，且组件间可以相互嵌套； 2、轻量级。相对于其他框架，Vue学习成本低，简单易上手； 3、虚拟 DOM。虚拟 dom 中存在 diff算法，是 cpu 密集型运算，占用内存较少，可以提高运行效率，并压缩运行时体积； 4、Vue是一个MVVM框架，数据绑定。数据单项绑定（v-bind），单向指data中的值绑定到视图中，但视图中修改不会影响到data数据；双向绑定（v-model），数据发生变化会驱动视图的更新，视图的更新也会驱动数
vue是什么？vue的优点有哪些？
王春燕的博客
05-16 4万+
一、vue是什么 Vue是一套用于构建用户界面的渐进式JavaScript框架 vue就是一个js库，并且无依赖别的js库，直接引入一个js文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。 形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期。 `Vue一切是数据为核心，使用数据来驱动视图刷新，我们不建议去操作dom` 二、为什么要用Vue？ 1. 组件化 Vue将组成一个页面的...
Vue 简介、特性、使用
YuLong的博客
12-04 6063
文章目录Vue 简介Vue 特性Vue的使用 Vue 简介 Vue：是一套用于构建用户界面的前端框架。 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能 要学习 vue，就是在学习 vue 框架中规定的用法 vue的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 Vue 的特点 遵循 MVVM 模式 编码简洁，体积小，运行效率高，适合移动 / PC 端开发 它本身只关注
vue 框架的特点
weixin_45677987的博客
02-23 3008
vue 框架的特点: 1: 组件化开发, 提高代码的复用率。 2: 声明式编程, 以前是命令式编程, 不再操作复杂的DOM 树 3: 虚拟DOM 的使用 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 Vue 会被注册为一个全局变量, 就会向外暴露一个构造函数, 构造函数 new 出俩一个实例对象, 在Vue 实例对象身上有我们需要的属性 在开发环境下不要使用压缩版本呢, 不然就失去了所有常见的错误和相关警告 vue.js 包含完整的警告和调试模式; vu.
什么是Vue、Vue的特点、Vue的优点及性能优化、应用场景
m0_65111484的博客
04-15 2364
本篇文章主要讲述了什么是Vue，及其特点和Vue命令的使用
vue.js知识整理.pptx
08-27
附件主要是学习vue基础知识时的一些汇总整理笔记。包含vue产生的核心，以及vue的基础特性、vue的使用方法，以及vue指令、过滤器等等基础知识
vue - basic Vue的基础知识整理
02-21
vue - basic Vue的基础知识整理
vue知识图谱.xmind
03-31
一张图带你了解整个xue全家桶相关。包括vue、vue-router、vuex、webpack、浏览器相关等所有vue全家桶相关知识点。
Vue简介
橘猫吃不胖的博客
03-17 5268
Vue简介1 概述2 Vue热加载3 Vue的双向数据绑定的原理 1 概述 Vue.js 可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。 Vue用于构建用户界面的渐进式框架，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中
Vue概述及特点
weixin_66664693的博客
05-09 2523
Vue概念
Vue介绍
吃蛋糕的居居
07-27 2万+
一、vue介绍 1.Vue.js是用于构建交互式的 Web 界面的库。 2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。 3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架, Vue.js 更容易上手。 4.Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。 5.内核生成：Es6和---.
Vue简介01
kim的博客
10-31 2908
在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下。
vue 概述
weixin_56263402的博客
08-02 816
vue 概述
Vue框架
热门推荐
记录学习历程
10-18 7万+
Vue 1、vue概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue -resource：通信，vuex：管理)或既有项目整合 官网 1.1、前端三板斧 HTML (结构) ：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容 CSS (表现)
Vue基本概述
ProChick's Blog
11-04 1407
1.钩子函数 钩子函数用来描述Vue实例从创建到销毁的整个生命周期 beforeCreate:function(){ #在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 }, created:function(){ #在实例创建完成后被立即调用，然而，挂载阶段还没开始，$el property 目前尚不可用。 }, beforeMount:function(){ #在挂载开始之前被调用：相关的 render 函数首次被调用。 }, m
vue的特点
a2285786446的博客
10-24 2570
Vue
Vue概述
互联网底层民工的博客
11-05 1583
Vue.js是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue能最大程度上解放DOM操作，应用在单页web项目开发和传统网站开发等
vue3知识点整理汇总
最新发布
10-16
好的，以下是我整理的 Vue3 的知识点汇总： 1. Composition API：Vue3 中引入了 Composition API，它是一种基于函数的 API，可以让我们更灵活地组织组件逻辑。 2. Teleport：Vue3 中新增了 Teleport 组件，可以让我们将组件渲染到任意位置。 3. Suspense：Vue3 中新增了 Suspense 组件，可以让我们在异步组件加载时显示一个占位符。 4. 新的响应式系统：Vue3 中使用了 Proxy 对象来实现响应式系统，相比 Vue2 的 Object.defineProperty，Proxy 更加高效且支持监听数组等操作。 5. 新的模板语法：Vue3 中的模板语法相比 Vue2 更加简洁，支持 v-if 和 v-for 同时使用，也支持多个根节点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

峰sir01

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

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

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

打赏作者

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

抵扣说明：

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

余额充值