前端学习——Vue (Day6)

最新推荐文章于 2024-07-05 14:35:11 发布
最新推荐文章于 2024-07-05 14:35:11 发布
阅读量287 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/131955782
版权

路由进阶

路由的封装抽离

在这里插入图片描述

在这里插入图片描述

//main.jsimport Vue from 'vue'
import App from './App.vue'
import router from './router/index'

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联

Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  router
}).$mount('#app')


//index.js
// 2个核心步骤
// 1. 建组件(views目录)，配规则
// 2. 准备导航链接，配置路由出口(匹配的组件展示的位置) 
import Find from '@/views/Find'
import My from '../views/My'
import Friend from '../views/Friend'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

export default router

声明式导航 - 导航链接

在这里插入图片描述

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a.router-link-active {
  background-color: purple;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

在这里插入图片描述
在这里插入图片描述

声明式导航 - 两个类名

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

声明式导航 - 跳转传参

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

动态路由参数可选符

在这里插入图片描述

Vue路由 - 重定向

在这里插入图片描述

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/search' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search }
  ]
})

export default router

Vue路由 - 404

在这里插入图片描述

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFound from '@/views/NotFound.vue'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/search' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

仅测试
在这里插入图片描述

Vue路由 - 模式设置

在这里插入图片描述

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFound from '@/views/NotFound.vue'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
//一旦使用history模式，地址栏就没有#，需要后台配置访问规则
    mode:'history',
  routes: [
    { path: '/', redirect: '/search' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

在这里插入图片描述

编程式导航 - 基本跳转

在这里插入图片描述
在这里插入图片描述

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push("./search");
      // 第二种写法
      this.$router.push({
        path: "./search",
      });
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

在这里插入图片描述
在这里插入图片描述

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push("./search");
      // 第二种写法
      // this.$router.push({
      //   path: "./search",
      // });

      // 第三种写法 (需要给路由器名字)
      this.$router.push({
        name:'search'
      })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

在这里插入图片描述

编程式导航 - 路由传参

在这里插入图片描述
在这里插入图片描述

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  data(){
    return {
      inpValue:''
    }
  },
  methods: {
    goSearch() {
      // 第一种写法
      this.$router.push(`./search?key=${this.inpValue}`);
      // 第二种写法
      // this.$router.push({
      //   path: "./search",
      // });

      // 第三种写法 (需要给路由器名字)
      // this.$router.push({
      //   name:'search'
      // })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

在这里插入图片描述

在这里插入图片描述

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  data(){
    return {
      inpValue:''
    }
  },
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push(`./search?key=${this.inpValue}`);
      // 第二种写法(完整写法：适合传多个参数)
      this.$router.push({
        path: "./search",
        query: {
          key:this.inpValue
        }
      });
      
       this.router.push({
        path: `/search/${this.inpValue}`
      })

      // 第三种写法 (需要给路由器名字)
      // this.$router.push({
      //   name:'search'
      // })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

在这里插入图片描述在这里插入图片描述

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  data(){
    return {
      inpValue:''
    }
  },
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push(`./search?key=${this.inpValue}`);
      // 第二种写法(完整写法：适合传多个参数)
      // this.$router.push({
      //   path: "./search",
      //   query: {
      //     key:this.inpValue
      //   }
      // });
      // this.router.push({
      //   path: `/search/${this.inpValue}`
      // })

      // 第三种写法 (需要给路由器名字)
      this.$router.push({
        name:'search',
        query: {
           key:this.inpValue,
           params:{
            words:this.inpValue
           }
         }
      })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

在这里插入图片描述
在这里插入图片描述

综合案例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

自定义创建项目

在这里插入图片描述
shift+鼠标右键——在powershell中打开
vue create + 项目名
在这里插入图片描述
空格表示选中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

ESlint 代码规范

在这里插入图片描述

代码规范错误

在这里插入图片描述
在这里插入图片描述

肉松拿铁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习——Vue #day7#
m0_59482006的博客
04-08 329
前面学习的props是将数据从父级向子级传递，而不能将数据从子级向父级传递，而今天学习的$emit方法触发自定义事件可以将数据从子级传递到父级。1.在子级中，首先是触发事件2.然后通过#emit向父级发送触发事件3.在父级中，首先接受触发事件4.然后是执行事件。
前端学习——Vue #day6#
m0_59482006的博客
04-07 540
要传递给博客文章组件一个标题，我们必须在组件的 props 列表上声明它。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。在父组件中使用子组件时，不太容易定位子组件的实现。通过props传递数据，不仅可以传递字符串类型的数据，还可以是其他类型的数据，例如：数字、对象、数组等。一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。我们可以使用 Vue实例的。
前端学习——vue基础
m0_58149048的博客
07-13 327
前端学习——vue基础
前端学习——Vue#day3#
m0_59482006的博客
03-28 153
clientX、clientY、pageX、pageY、screenX、screenY：由鼠标事件触发时的鼠标相对于浏览器窗口、文档、屏幕的坐标；shiftKey、ctrlKey、altKey、metaKey：由按键事件触发时的 Shift、Ctrl、Alt、Meta 键的状态。button、buttons：由鼠标事件（如 click、mousedown、mouseup）触发时的鼠标按钮的标识码和状态码；keyCode、key：由按键事件（如 keyup、keydown）触发时的按键的键码和键名；
vue项目实战实例代码
12-23
在本实践项目中，我们将深入探索Vue.js框架的使用，通过两个具体的实例代码——"day01_eesy_vuejsdemo"和"VueCnodeJS-master"来加深理解。Vue.js是一个轻量级的前端JavaScript框架，它以数据绑定和组件化为核心，极...
【批量下载】day6等.zip
06-28
【批量下载】day6等.zip 是一个包含与Vue.js相关的学习资源的压缩包，其中可能包括教程、文档、代码示例等内容。Vue.js 是一款流行的前端JavaScript框架，由尤雨溪开发，它以其易学易用、高性能和灵活性受到开发者们...
前端课程设计资料.7z
04-27
"day01"可能是一个按天划分的学习目录，包含第一天学习的资料，如笔记、代码示例等，帮助系统性地学习前端课程。 "JS网页版贪吃蛇小游戏"是一个基于JavaScript编写的经典游戏——贪吃蛇的实现。这样的项目有助于...
老男孩教育前端笔记
03-20
【老男孩教育前端笔记】是源自知名IT教育机构——老男孩教育的一份前端学习资料，主要涵盖第14和15周的课程内容。这些笔记是深入理解和掌握前端开发技术的重要资源，尤其对于初学者或者想要提升前端技能的开发者来说...
Day19:竞技场Day19
03-27
5. React/Vue/Angular：前端框架，用于构建大型单页应用程序（SPA）。 6. Web APIs：如WebSocket、Geolocation、Canvas等，扩展了JavaScript的功能。 7. 测试和调试：使用Mocha、Chai等工具进行单元测试，使用Chrome...
Vue前端打包
weixin_63680330的博客
07-04 321
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
黔肆的博客
07-04 312
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
属性描述符初探——Vue实现数据劫持的基础
最新发布
RenGJ010617的博客
07-05 969
属性描述符（Property Descriptor）在JavaScript中是一个特殊的对象，它定义了对象属性的行为和特性。 属性描述符有很多内容可以挖掘，比如defineProperty与Proxy的区别，比如vue2与vue3实现数据劫持的方式有什么不同，实现效果有哪些差异等，这篇博文只是入门，以后有时间再深挖。
vue 跳转新窗口的方法
m0_67880202的博客
07-03 312
适用于有新的完整的链接跳转，将新链接的url放入open中即可。2.使用$router.resolve。适用于@绑定了点击事件需要跳转的场景。1.使用router-link。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 134
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
Vue 文件下载
猫脸码客的博客
07-03 251
【代码】Vue 文件下载。
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 371
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。
关于ant design vue 使用Modal无法关闭弹窗的解决思路
weixin_44784401的博客
07-03 450
关于ant design vue 使用Modal无法关闭弹窗的解决思路node_modules/.pnpm/pinia@2.1.7_typescript@5.5.2_vue@3.2.33/node_modules/pinia/dist/pinia.mjs:6:9: 6 │ import { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2,
基于Java+SpringMvc+Vue技术的在线学习交流平台的设计与实现---60页论文参考
mr_lili_111的博客
07-03 1124
Java是一种面向对象的编程语言，目前由美国Oracle公司开发。自1995年上线以来，已经广泛应用于Web开发、桌面应用开发等多个领域。Java语言的特点包括：1、面向对象：Java提供了类、接口和继承等面向对象的特性，支持单继承和多接口继承，以及动态绑定。2、分布式：Java支持Internet应用的开发，提供了网络应用编程接口(java.net)，支持RMI(远程方法激活)机制，适合开发分布式应用。3、健壮性：Java的强类型机制、异常处理、垃圾自动收集等特性保证了程序的健壮性。
前端学习网站 vue2
06-13
有很多学习 Vue.js 的网站，以下是一些推荐的： 1. Vue.js官方文档：https://vuejs.org/ 2. Vue Mastery：https://www.vuemastery.com/ 3. Vue School：https://vueschool.io/ 4. Codecademy Vue.js课程：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值