3.vue开发实例演示

最新推荐文章于 2024-05-03 00:51:34 发布
最新推荐文章于 2024-05-03 00:51:34 发布
阅读量2.7k 收藏 6
点赞数 3
分类专栏： 前端 狂神java学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44339531/article/details/108411812
版权

个人博客：http://blog.kunpw.cn/

vue开发实例演示

1.解剖初始化模板

1.1 vue文件

  • 如图所示，对于一个新建的vue文件而言，其中标签分为三个部分：
    • template标签：这一块模板区域用于编写html代码块，其实就是component组建中的template属性内容，用作模板显示，而这个模板component的名字就是该vue文件名，使用时导入即可；
    • script标签：默认导出；
    • style标签：scoped属性相当于private，确保其中的样式只在本style样式中有效；

在这里插入图片描述

1.2 App.vue和main.js

  • 创建新项目时src目录下模板文件只需要保留App.vue和main.js即可；
  • App.vue中template模板相当于主模板，其中可以直接通过组件标签调用其它组件模板，相当于没有slot便签的限定而可以自由嵌套插槽；
  • App.vue组件用来传递给main.js，main.js是webpack中设置的默认入口文件，它只需要绑定App.vue文件并且完成一些组件的初始化和申明使用即可；

在这里插入图片描述

2.webpack

2.1 基础概念

  • webpack的本质是将新版本的vue组件框架打包成ES5版本支持的js代码；

2.2 实例步骤

  • 新建项目webpack-study；
  • 打开之后创建modules文件目录；
  • 在modules文件目录下创建hello.js作为模板，代码为：
//暴露一个方法，在同一个文件中暴露的多个方法最终被接受到同一个对象中
exports.sayHi = function () {
    document.write("<h1>Vue webpack</h1>");
}
exports.sayHi2 = function () {
    document.write("<h1>JavaScript</h1>");
}
exports.sayHi3 = function () {
    document.write("<h1>JavaSE</h1>");
}
exports.sayHi4 = function () {
    document.write("<h1>Linux</h1>");
}
  • 在modules文件目录下创建main.js作为入口，代码为：
//接受一个文件中暴露的所有方法，类似于java的类
var hello = require("./hello");
hello.sayHi();
hello.sayHi2();
hello.sayHi3();
hello.sayHi4();
  • 在webpack-study目录下创建webpack.config.js文件用来设置webpack参数，代码为：
module.exports = {
    //entry设置程序入口
    entry:'./modules/main.js',
    //output设置程序打包输出目录
    output:{
        filename:"./js/bundle.js" //这是标准格式
    }
};
  • 在管理员模式下进入文件目录，使用指令：
webpack

在这里插入图片描述

  • 这个bundle.js文件就是打包后得到的js文件，也就是最终拿来使用的文件；
  • 最后如上图创建index.html文件，作为整个程序的首页，添加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

在这里插入图片描述

大功告成！整个过程一目了然。

3.vue-router（重点）

3.1 基础概念

  • 实现多个页面跳转的功能；

  • 能够实现部分组件的页面改变而不影响其它组件部分；

  • 实质并不会通过服务器后端实现链接跳转，而是前端直接修改并且即时刷新显示

3.2 实例步骤

  • 在components目录下新建两个文件main.vue和content.vue；

  • 如图所示，只在template标签内加入一段标题即可：

在这里插入图片描述

  • 在src目录下新建目录router，下建index.js文件，代码如下：
//导入vue和vue-router组件
import Vue from "vue"
import VueRouter from "vue-router";
//导入新建的content.vue和main.vue组件
import Content from "../components/content"
import Main from "../components/main"

//安装路由，相当于类的实例化操作
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径，在App.vue中用于link to连接的部分
      path:'/content',
      //路由名称，也可用于link to连接
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径，在App.vue中用于link to连接的部分
      path:'/main',
      //路由名称，也可用于link to连接
      name:'main',
      //跳转的组件
      component:Main
    }
  ]
})
  • 在main.js入口文件中导入vue-router：
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描路由配置

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router, //直接使用即可
  components: { App },
  template: '<App/>' 
})
  • 在App.vue文件中添加模板代码：
<template>
<!--router只有两个标签，link为链接标签，view为显示视图标签，to属性即为转到路径，该路径是index.js中配置的路径-->
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
      <!--没有view标签则无法显示内容-->
    <router-view></router-view>
  </div>
</template>
  • 部署服务器npm run dev后网页显示如图：

在这里插入图片描述

  • 附：最终目录，其余部分已删除：

在这里插入图片描述

4.实例工程（运用element-UI）

4.1 新建项目并配置依赖

  • 使用管理员模式运行命令行，并进入到目录下准备新建项目；

  • 创建一个名为hello-vue的工程项目：vue init webpack hello-vue，接下来的步骤请参看博客：Vue开发环境配置

  • 新建之后，执行以下命令：

#进入工程目录
cd he1lo-vue
#安装vue-router
npm install vue-router --save- dev
#安装element- ui
cnpm i element-ui -S
#安装依赖
cnpm install
#安装SAsS加戟器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev
  • 启动测试后可以正常通过端口访问即可；

4.2 修改配置文件

  • 在IDEA中打开工程项目，并在package.json文件中修改以下内容（sass版本过高需手动调低）：

在这里插入图片描述

  • 修改完毕重新安装依赖：
cnpm install

4.3 修改初始src

  • 按照vue-router删改，最终效果图如下：

在这里插入图片描述

4.4 新建目录及文件

  • 新建项目目录router用来存放路由配置文件index.js；
  • 新建项目目录view用来存放视图组件，而components组件专门存放功能组件，明确分工；
  • 在view目录下新建Login.vue文件和Main.vue文件；

在这里插入图片描述

4.5 使用element-ui组件

在这里插入图片描述

  • 所有视图组件都是独立的，接下来配置路由index.js文件，使其能够联系起来：
import Vue from 'vue'
import VueRouter from "vue-router";
import Main from '../view/Main'
import Login from '../view/Login'

Vue.use(VueRouter);

export default VueRouter({
  routes:[
    {
      path:'/main',
      component:Main
    },{
      path:'/login',
      component:Login
    }
  ]
})

4.6 配置main.js文件

import Vue from 'vue'
import App from './App'

import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false;


new Vue({
  el: '#app',
  router,
  render: h => h(App)
});
  • 并在App.vue中添加路由显示；
  • 最终成果：

在这里插入图片描述

5.路由嵌套

5.1 基础概念

  • 路由嵌套可以实现外框架组件不变而仅改变内组件；

5.2 实例步骤

  • 接4工程；
  • 在view目录下创建子目录user，并在该目录下创建两个新文件，新文件中仅配置一行文字：

在这里插入图片描述

  • 在路由index.js文件中添加子路由：
export default new VueRouter({
  routes:[
    {
      path:'/main',
      component:Main,
      children:[	
        {path:'/user/listone',component:UserListOne},
        {path:'/user/listtwo',component:UserListTwo}
      ]
    },{
      path:'/login',
      component:Login
    }
  ]
})
  • 对应更改Main.vue文件，导入侧边栏，并在侧边栏中添加路由连接和路由视图：
<template>
<div>
  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
    <el-radio-button :label="false">展开</el-radio-button>
    <el-radio-button :label="true">收起</el-radio-button>
  </el-radio-group>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">个人中心</span>
      </template>
      <el-menu-item-group>
        <span slot="title">分组一</span>
          <!--添加路由链接-->
        <el-menu-item index="1-1"><router-link to="/user/listone">账号设置</router-link></el-menu-item>
        <el-menu-item index="1-2"><router-link to="/user/listtwo">密码设置</router-link></el-menu-item>
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-4">选项4</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <span slot="title">选项5</span>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>

<!--添加路由视图-->
  <router-view align="center"></router-view>



</div>
</template>

<script>
    export default {
      name: "Main",
      data() {
        return {
          isCollapse: true
        };
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
  • 结果如图：

在这里插入图片描述

6.传参以及重定向

6.1 传参

  • 先更改Main.vue文件中的路由器链接：
<!--name属性对应路由配置时的名称，params表示传参，且需要使用v-bind:双向绑定才能使此处的值能被路由接收-->
<router-link :to="{name:'UserListOne',params:{id:1}}">账号设置</router-link>
  • 再修改路由配置文件index.js：
// /:id 表示参数id，用来接收params传参，props:true，表示开启props传参
{path:'/user/listone/:id',name:'UserListOne',component:UserListOne,props:true}
  • 最后修改ListOne.vue文件：
<template>
  <div>
    <h1>账号设置</h1>
    {{id}}<!--便可以直接调用参数，且内容必须直接放在标签内不，或者报错-->
  </div>

</template>

<script>
    export default {
        props:['id'],//将index.js中的id传到此处
        name: "UserListOne"
    }
</script>
  • 最后显示：

在这里插入图片描述

6.2 重定向

  • 只要在路由配置时添加一个新的路由配置重定向即可：
{
  path:'/goHome',
  redirect:'/main'
}
  • 再在Main.vue中添加配置：
<el-menu-item index="1-3"><router-link to="/goHome">回到首页</router-link></el-menu-item>
  • 得到结果：

在这里插入图片描述

6.3 账号传参

  • 先修改Login.vue文件，在跳转函数时添加代码：
this.$router.push("/main/"+this.ruleForm.name);
  • 在index.js文件中修改代码接收参数：
path:'/main/:name',
component:Main,
props:true,
  • 在Main.vue文件中添加代码：
props:['name'],

<span>{{name}}</span>
  • 结果：

在这里插入图片描述

在这里插入图片描述

6.4 路由模式

  • mode属性：

    • hash：路径带 # 符号；
    • history：路径不带 # 符号；

  • 修改为history模式：

mode:'history',
  • 图显：

在这里插入图片描述

7. 404及钩子

7.1 404

  • 在view目录下新建NotFound.vue文件，添加文字即可；
  • 在index.js文件中routes最后添加代码：
{
path:'*',	//表示除以上页面外链接都指向该页面
component:NotFound
}
  • 结果：

在这里插入图片描述

7.2 路由钩子与异步请求

  • 两个路由钩子：
//beforeRouteEnter(to,from,next):在进入路由前执行
//beforeRouteLeave(to,from,next):在离开路由前执行

  • 参数说明：

    • to：路由将要跳转的路径信息；
    • from：路由跳转前的路径信息；
    • next：路由的参数控制：
      • next()：跳入下一个页面；
      • next(’/path’)：改变路由的跳转方向，使其跳转到另一个路由；
      • next(false)：返回原来的页面；
      • next((vm)=>{})，仅在beforeRouteEnter中可用，vm是组件实例；

  • 在钩子函数中使用异步请求：

    • 安装Axios： cnpm install axios -s （反复尝试npm和cnpm，直到成功安装）；
    • main.js引用Axios：
    import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);
    • 在static（静态数据，可以从网上读取并下载）目录下创建新目录mock（静态数据测试规范目录），新目录下创建新文件data.json（从Vue基础入门那里拿来使用），重新部署服务器之后能够通过文件目录读取到该文件（该步骤同样可测试axios是否完整安装，否则重装）；

    在这里插入图片描述

    • 在ListOne.vue文件中添加以下代码：
    beforeRouteEnter:(to,from,next)=>{//=>是function的简写模式，在钩子函数中使用
        console.log("进入路由之前");
        next(vm=>{//使用此方法可以直接调用vm实例
          vm.getData();
        });
      },
      beforeRouteLeave:(to,from,next)=>{//=>是function的简写模式，在钩子函数中使用
        console.log("离开路由之前");
        next();
      },
      methods:{
        getData:function () {
          this.axios({
            method:'get',
            url:'http://localhost:8080/static/mock/data.json' //数据链接
          }).then(function (response) {
              console.log(response);
          })
        }
      }
    • 点击页面上“账号设置”之后则获取了该数据：

    在这里插入图片描述

    • 并且正常输出了“进入路由之前”和“离开路由之前”提示；

  • 根据上述这段操作则可以实现从静态数据中获取数据，再结合前面几点内容融会贯通之后基本实现了前端的数据交互操作；

附图：

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

朝小闇
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue3搭配后端连接数据库
2301_78734192的博客
06-25 2079
虽然Vue 3本身并不直接提供连接数据库的功能，但你可以通过与后端服务器的配合来实现与数据库的交互。设计后端服务器：在Vue 3中连接数据库时，你需要先搭建一个后端服务器来处理与数据库的通信。创建API接口：在后端服务器中，你需要创建API接口来处理从前端发送的请求，并与数据库进行交互。设置数据库连接：要连接数据库，你需要在后端服务器中进行数据库配置。根据你使用的数据库类型，可以使用相应的库来帮助你完成连接。处理数据库操作：在处理API接口时，你需要使用相应的数据库模块执行数据库操作。
实战vue+mySql 链接数据库并操作
热门推荐
weixin_42003850的博客
09-03 4万+
今天遇到了一个PHP后台，给接口文档的时候给了我一个数据库的账户密码和表，所以我只能通过前端连接数据库并写sql语句调用数据，以下是我整理的实战过程，包括步骤，遇到的问题等，复制即用，哈哈，那么我们开始吧~ 1.安装vue-cli脚手架 npm install -g vue-cli 2.创建项目 vue init webpack my-project 3.在 package.json 中添加 ...
vue 组件间的通信演示
weixin_50736511的博客
12-06 629
emit props 子组件 <template> <div style="background-color:blue;width:70%;height:100px"> {{name}}————————{{b_mess.height}}—————{{b_mess.hair}} <br> {{fc}} <br> </div> </template> <script> export default {
2.Vue3.0应用&组件实例——《跟老吕学Vue》
最新发布
Python老吕的博客
05-03 673
Vue3.0的组件系统为开发者提供了构建复杂应用的强大工具。通过定义组件，我们可以创建可重用的代码块，并通过组件实例来管理组件的状态和方法。同时，Vue3.0提供了多种灵活的通信方式和生命周期钩子，使得组件间的交互更加便捷。当使用Vue3.0构建应用时，理解并掌握组件和组件实例的概念是至关重要的。👨‍💻博主Python老吕评论，您的举手之劳将对我提供了无限的写作动力！🤞🔥《跟老吕学Python编程》《Python游戏开发实战讲解》《Python Web开发实战》《Python网络爬虫实战》
Vue3.0基础实例
qq_44174346的博客
07-26 1147
模板语法⭐ 文本 html 属性 表达式 v-if v-for v-bind 指令被用来响应地更新 HTML 属性： v-on 指令，它用于监听 DOM 事件： 一个简单的 todo 列表的完整例子 Vue3 组件⭐ 局部组件⭐ Prop⭐ 动态 Prop Prop 验证 Vue3 计算属性 反转字符串的例子: computed setter⭐ Vue3 监听属性 通过 watch 来响应数据的变化⭐ 异步加载中使用 watch Vue3 样式绑定
vue+mysql实现前端对接数据库
Daydream的博客
03-13 4954
以上就是整个内容，但要运行起来，除了运行vue项目外，还需要将配置的node后端运行起来，可以cmd或者用vscode的内置终端运行之前配置的server文件，进入到server文件夹位置，运行：node index出现以下内容即运行成功。在src下新建文件夹server,在其中新建db.js文件,index.js文件，其中db是数据库配置，index是node后端服务配置。在新建文件夹api，在api下新建文件SysUser.js文件，这个就是之后需要使用到的接口api。在需要使用的界面调用api接口。
vue-stripe-payment-Stripe的jquery.payment的Vue包装器。-Vue.js开发
05-27
通过npm进行演示安装：yarn add vue-stripe-payment-或-npm install vue-stripe-payment使用此插件向您的应用程序添加vue-stripe-payment就像其他插件一样简单：从'vue'导入Vue； 从'vue-stripe-p导入...
vue调用高德地图实例代码
08-30
下面是一个简单的 Vue 页面实例，演示了如何在 Vue 中使用高德地图： ``` ; height:300px"> import AMap from 'AMap' export default { mounted: function () { this.init() }, methods: { init: ...
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
10-15
主要介绍了vue搜索页开发实例（热门搜索，历史搜索，淘宝接口演示）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
smooth-vuebar-平滑滚动条的Vue指令包装-Vue.js开发
05-27
smooth-vuebar smooth-scrollbar演示的Vue指令包装器您可以参考包装的库的演示。 为什么此Smooth-vuebar有很多其他包装器，用于Smooth-scrollbar演示的Vue指令包装器您可以参考包装的库的演示。 为什么该库还有许多...
vue-date-range-picker-使用Bootstrap 4样式进行日期范围选择的Vue组件-Vue.js开发
05-27
vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示（jsfiddle）功能日期范围选择比较fea vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示（ jsfiddle）功能...
Electron+vue3项目使用SQLite3数据库
SUN-天旭
08-08 4972
SQLite是一种嵌入式关系型数据库管理系统，是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎。SQLite是一个轻量级的数据库，可以在各种操作系统上使用，并且支持SQL语言标准。它是一个零配置的数据库，这意味着与其他数据库不一样，我们不需要在系统中配置。在electron目录下新建db文件夹，存放sqlite3db.js文件。/electron/main.js里面引入sqlite3db.js文件。是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的。直接访问其存储文件。
vue实现连接Mysql数据库和服务器通信
qq_63656102的博客
05-04 1173
在vue中，我们不仅是为了做前端页面展示和数据响应式，最重要的还是去访问后端请求，把数据给数据库存储，这样刷新页面数据才不会丢失。user是数据库名字，password是数据库密码，host是访问路径，默认是本地127.0.0.1，database是数据库名称。vue中对于数据的发送以及存储也很重要，稍不注意也会存在很大的问题，所以我们要学习一下存储数据以及对数据的请求。query()就是运行sql语句，不管是增删查改都是.query()就行了，是不是很方便！
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 8784
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue项目案例（Vue3）
u013083465的专栏
05-30 7651
VUE3 + vite 案例
Vue3快速上手+俩种创建方式+主要源码讲解
一键难忘的博客
03-12 972
尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态（特别是 devtools 中的路由和 Vuex 集成），不过现在仍然是开始使用 Vue 3 启动新项目的合适时机。此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API，并为框架未来的长期迭代奠定了坚实的基础。这里的挂载是在，public目录下的index.html里的id为app的盒子里进行渲染。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue3项目实战开发
weixin_42533732的博客
09-04 3305
vue3基础理论、vue3的项目从0开始搭建、vue3的项目实战
VUE 3.x 实战项目从0到1搭建
不怕麻烦的鹿丸的博客
04-01 3494
一、开发环境配置 1、安装node.js 通过官网下载安装node.js http://nodejs.cn/ 在用 Vue 构建大型应用时需要使用到node里面的 npm 来安装各种插件 Node 版本要求 Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n，nvm或nvm-windows在同一台电脑中管理多个 Node 版本。 2、npm配置淘宝镜像 如果在本地一直装不上npm的包，可以考虑用国内的淘宝镜像，使用淘宝定制的 ...
vue3.0实战项目
furenqiang的博客
09-01 2720
vue3.0实战
vue.js前端开发实战 未打包源码
01-08
Vue.js是一款流行的JavaScript前端框架，具有易学易用的特点，被广泛应用于前端开发中。《Vue.js前端开发实战》是一本针对Vue.js框架的开发实践书籍，主要介绍了Vue.js的基本概念和使用方法，并通过实例演示了如何开发具有实际功能的前端应用。 本书提供了未打包源码的下载链接，这意味着读者可以直接获取书中示例代码的源文件而无需进行打包操作。这对于初学者来说非常方便，因为他们可以直接运行源码并通过观察代码逐步学习Vue.js的使用。 未打包源码通常是指开发过程中的源代码，没有进行压缩和打包的处理。例如，CSS文件、HTML模板和JavaScript脚本可以分别以独立的形式存在。通过使用未打包源码，读者可以更好地理解代码的结构和逻辑，并且可以自由地修改和调试源码以适应自己的需求。 对于读者来说，未打包源码的使用有一些优势和注意事项。首先，这个源码可以作为学习Vue.js的教材，通过观察和理解源码的运行过程，读者可以更好地掌握Vue.js的使用方法。其次，读者可以直接在此基础上进行修改和拓展，实现自己的前端应用。然而，需要注意的是，由于未打包源码没有经过优化处理，所以在生产环境中使用时可能会存在性能问题。因此，在实际应用中，通常需要对源码进行打包和压缩处理。 总的来说，Vue.js前端开发实战的未打包源码可以帮助读者更好地学习和理解Vue.js框架，并可以作为开发实践的基础，但在实际应用中需要进行进一步的打包和优化处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值