前端技术Vue学习笔记--001

已于 2023-07-23 16:28:27 修改
阅读量223 收藏
点赞数
分类专栏： Vue学习记录 文章标签： vue.js 前端 学习
于 2023-07-23 11:14:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46625488/article/details/131808891
版权

前端技术Vue学习笔记

文章目录

1、Vue2和Vue3比较

在这里插入图片描述

2、Vue简介

概念：Vue是一个用于构建用户界面的渐进式框架

  • 构建用户界面：给予数据动态渲染页面
  • 渐进式：循序渐进的学习
  • 框架：一套完整的项目解决方案，提升开发效率（理解记忆规则）

优点：大大提升开发效率。
缺点：需要理解记忆规则–>官网

3、Vue快速上手

创建Vue实例，初始化渲染的核心步骤：

  1. 准备容器
  2. 引入vue.js（开发版本）
  3. 创建Vue实例 new Vue()
  4. 指定配置项el、data==》渲染数据
    • el指定挂载点，选择器指定控制的是哪个盒子
    • data提供数据

代码展示

 <body>
        <!-- 1.准备容器（vue所管理的范围） -->
        <div id="app">
            <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
           <h3>{{msg}}</h3> 
        </div>
        
        <!-- 2.引入开发版本的vue.js核心包（官网） -->
        <script src="../vue.js"></script>
        
        <!-- 3.创建vue实例 -->
        <script>
            // 一旦引入Vue.js核心包，在全局环境下，就有了Vue构造函数
           const app = new Vue({
            //通过el配置选择器，指定Vue管理的是那个盒子
            el : '#app',
            //通过data提供数据
            data : {
                msg : 'hello radan'
            }
           })
        </script>

    </body>

vue.js生产版本和开发版本的区别
在这里插入图片描述

4、插值表达式{{}}

插值表达式{{}}是一种Vue的模版语法。

  1. 作用：利用表达式进行插值，渲染到页面中

    表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

  2. 语法：{{表达式}}

代码练习

 <body>
        <div id="app"> 
           <h3>{{title}}</h3> 
           <p>{{nickname.toUpperCase()}}</p>
           <p>{{age > 18 ? '成年' : '未成年'}}</p>
           <p>学生姓名:{{student.name}}</p>
           <p>居住地址:{{student.address}}</p>
        </div>

        <script src="../vue.js"></script>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                title : 'hello radan',
                nickname : 'My name is radan',
                age : 19,
                student : {
                    name : 'yjr',
                    address : '甘肃白银'
                }
            }
           })
        </script>

    </body>

结果展示
在这里插入图片描述

  • 注意点：

    • 使用的数据必须存在（data）

    • 支持的是表达式，而非语句，比如：if、for

    • 不能在标签属性中使用{{}}插值

	<p>hobby</p>
    <p>{{if}}</p>
    <p title="{{username}}">我是一个标签</p>

5、Vue响应式特性

响应式：

  • 数据改变，视图自动更新
  • 使用Vue开发->专注于业务核心逻辑即可

访问数据和修改数据（data中的数据，最终会被添加到实例上）：

  • 访问数据：实例.属性名
  • 修改数据：实例.属性名=新值

在这里插入图片描述
代码练习
在这里插入图片描述

Vue开发者工具下载教程

6、Vue指令

指令就是带有v-前缀的特殊属性，不同属性对应不同的功能。
Vue指令：带有v-前缀的特殊标签属性

例如：v-if、v-html、v-for’等等

6.1、v-html指令

作用：用于将动态生成的HTML代码插入到特定的元素中。
使用v-html指令的语法如下：

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

其中，v-html绑定一个Vue实例中的数据属性（例如htmlContent），这个属性的值应该是一个包含HTML代码的字符串。然后，Vue会将这个字符串的内容渲染为实际的HTML，并将其插入到div元素中。

实例：

<head>
        <title>v-html指令练习</title>
    </head>
    <body>
       
 <!-- 
            v-html：所谓这个质量就相当于Html中的 innerHtml    将字符串以html的格式显示的显现
        -->
        <div id="app" >
           <h3 v-html="msg"></h3> 
        </div>
        <script src="../vue.js"></script>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                msg : "<a href='https://www.baidu.com/'> 点击跳转到百度</a>"
            }
           })
        </script>
    </body>

测试结果
在这里插入图片描述

6.2、v-show指令和v-if指令

  1. v-show（简单的显示和隐藏）

    v-show指令的底层原理：切换css的display属性值为none来控制显示和隐藏。

    • 作用：控制元素的显示隐藏
    • 语法：v-show=“表达式” 表达式中为true显示，false隐藏
    • 适用场景：频繁切换显示隐藏的场景

  2. v-if（条件渲染）

    v-if指令的底层原理：根据 判断条件控制元素的创建和移除。

    • 作用：控制元素的显示隐藏（条件渲染）
    • 语法：v-if=“表达式” 表达式中为true显示，false隐藏
    • 适用场景：要么显示，要么隐藏，不频繁切换的场景

实例

<body>
        <!-- 
            v-show指令的底层原理：切换css的display属性值为none来控制显示和隐藏
            v-if指令的底层原理：根据 判断条件控制元素的创建和移除。
        -->
        <div id="app" >
           <h3 v-show="flag">我
           v-show指令</h3> 
           <h3 v-if="flag">我是v-if指令</h3> 
        </div>
        <script src="../vue.js"></script>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                flag : false //为ture时，显示元素；为false隐藏元素
            }
           })
        </script>
    </body>

测试结果
在这里插入图片描述

v-if和v-show的区别：

  1. 当个条件值为true时，两者都会将元素显示的显现出来（几乎一样）
  2. 当条件值为false时，两者稍微有些差异：
    • v-if并不会将元素代码添加到html代码块中
    • v-show将css的display属性值设置为none来隐藏该元素。但是代码会显示到html代码中

6.3、v-else指令和v-else-if指令

  1. 作用：辅助v-if进行判断渲染
  2. 语法：v-else  v-else-if=“表达式”
  3. 注意点：这两个指令需要配合v-if指令一起使用

实例练习：：
在这里插入图片描述

<body>
        <div id="app" >
            <!-- 性别：两个条件值的判断 -->
           <h3 v-if="gender === 1">我是一个男生</h3> 
           <h3 v-else>我是一个女性</h3> 
           <!-- 分数：多条件值判断 -->
           <h3 v-if="score >= 90">分数{{score}}，成绩非常优秀</h3> 

           <h3 v-else-if="score >= 70">分数{{score}}，成绩优秀</h3> 
           <h3 v-else-if="score >=60">分数{{score}}，成绩及格</h3> 
           <h3 v-else>分数{{score}}，成绩不及格/h3> 

        </div>
        <script src="../vue.js"></script>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                gender : 1,  //1表示男生，2表示女生
                score : 75   //不同的分数，进行不同的操作
            }
           })
        </script>
    </body>

测试结果：
在这里插入图片描述

6.4、v-on指令

6.4.1、v-on指令基础

  • 作用：注册事件 = 添加监听 + 提供处理逻辑

  • 语法：

    • v-on:事件名 = “内联语句”
    • v-on:事件名 = “methods中的函数名”

  • v-on:简写：@事件名

  • 注意：methods函数内的this指向当前的Vue实例

v-on:事件名 = “内联语句”

	<button @click="count--">－</button>
      {{count}}
   <button v-on:click="count++">＋</button>

v-on:事件名 = “methods中的函数名”
在这里插入图片描述
如何在函数中调用data中的数据？

  • 在函数体中直接使用data中的1数据
 methods : {
              fn(){
                console.log('fn方法执行了！');  
                alert(isShow);
              }
            }

报错信息：
在这里插入图片描述

原因：当我们在函数体中直接使用数据名调用时，会把这个数据当作全局变量去寻找，很显然全局并没有这个数据，这个数据只存在于当前Vue实例中，是一个局部变量。

解决上述错误的方法：

  1. 由于数据会被挂载到Vue实例上，所有可以通过实例名.数据名调用
  2. 在Vue中，this关键字都指向当前实例。（this.数据名）

      第一种方式相对而言维护不便，Vue实例名一修改函数中的所有实例名都要随着变动，不利于维护。第二种方式用的比较多，也是一个完美的选择。

按钮控制文字的显示和隐藏的代码练习：

<body>
        <!-- 按钮来控制显示和隐藏 -->
        <div id="app" >
          <!-- 通过methods中的函数利用v-on绑定事件 fn是函数名  -->
          <button @click="fn">切换显示和隐藏</button>   <br/>
          <!-- 频繁的切换隐藏利用v-show指令；偶尔切换隐藏利用v-if指令 -->
          <span v-show="isShow">{{text}}</span>
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
             isShow : true,  //通过isShow来控制文字是否显示
             text : 'radan学习Vue指令'
            },
            methods : {
              fn(){
                //如何在函数中调用data中的数据？  
                    //1.由于数据会被挂载到Vue实例上，所有可以通过实例名.数据名调用--app.isShow = !app.isShow;
                    //2.在所有函数中，Vue提供this关键字来指向当前实例
                    this.isShow = !this.isShow;
              }
            }
           })
        </script>
    </body>
6.4.2、v-on调用传参

在这里插入图片描述
自动售货机练习：

<body>
        <!-- 自动售货机练习  -->
        <div id="app" >
            <div class="box">
               <h3>自动售货机</h3>
               <button @click="buy(5)">牛奶5元</button>
               <button @click="buy(2)">鸡蛋2元</button>
               <button @click="buy(3)">面包3元</button>
                <h3>当前剩余金额：{{money}}</h3>
            </div>
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                money : 120
            },
            methods : {
              buy(num){
                this.money -= num;
              }
            }
           })
        </script>
    </body>

测试结果：
在这里插入图片描述

6.5、v-bind指令

  1. 作用：动态的设置HTML的标签属性 --> src、url、title等等
  2. 语法：v-bind:属性名=“表达式”
  3. 注意：简写形式 :属性名=“表达式”

实例练习

	<body>
        <!-- 图片url、title参数绑定  -->
        <div id="app" >
            <!-- 利用v-bind标签将data数据域中的imgUrl和src的imgUrl绑定起来-->
            <!-- alt：属性值当图片无法显示时，提供的文字提示-->
               <img v-bind:src="imgUrl" :title="title" :alt="altInfo"/>
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                imgUrl : '../images/kebi.png',
                title : '科比Us',
                altInfo : '图片无法显示'
            }
           })
        </script>
    </body>

所谓：v-bind指令就是就是绑定的意思，将data中的数据信息和HTML标签中的信息绑定起来。

6.6、v-for指令

  1. 作用： 基于数据循环，多次渲染整个元素(数组、对象、数字
  2. 遍历数组语法：v-for = “(item,index) in 数组”
    • item （数组中的每一项），index（下标）
    • 省略index：v-for=“item in 数组”

小书城练习：

<body>
        <!-- v-for指令练习 -->
        <div id="app" >
            <h3>radan水果商场</h3>
               <ul>
                    <li v-for="(item,index) in booklist" :key="item.id">
                        <span>{{index+1}}</span>
                        <span>{{item.name}}</span>
                        <span>{{item.author}}</span>
                        <button @click="fn(item.id)">删除</button>
                    </li>

               </ul>
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
               index : 0,
               booklist: [
                {id:1,name:'《红楼梦》',author:'曹雪芹'},
                {id:2,name:'《西游记》',author:'吴承恩'},
                {id:3,name:'《水浒传》',author:'施耐庵'},
                {id:4,name:'《三国演义》',author:'罗贯中'}
               ]
            },
            methods:{
                fn(id){
                    //利用delete方法删除数组的的元素
                    // this.$delete(this.booklist,a-1)
                    //通过 id 进行删除数组中的对应项  ->filter  
                    //filter：根据条件，保留满足条件的对应项得到一个新数组
                    //注意：filter操作后的数组并不会覆盖原数组，而是产生一个新的数组（我们需要做覆盖操作）
                    this.booklist = this.booklist.filter(item => item.id !== id);
                }
            }
           })
        </script>
    </body>

v-for中的key

不加key时：
    v-for的默认行为会尝试原地修改元素（就地服用）
key的作用：
    给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。

key的注意点：

  1. key的值只能是字符串或数字类型
  2. key的值必须具有唯一性
  3. 推荐使用id作为key（唯一），不推荐使用index作为key（会变化不对应）
    在这里插入图片描述

6.7、v-model指令

  1. 作用：给表单元素使用，双向数据绑定–>可以快速获取或设置表单元素内容

    • 数据变化 --> 视图自动更新
    • 视图变化 -->数据自动更新

  2. 语法：v-model=‘变量’

登录练习

  <body>
        <!-- v-model指令练习 -->
        <!-- 
            v-model 可以让数据和试图，形成双向数据绑定
                1. 数据变化，视图自动更新
                2. 视图变化，数据自动更新
            作用：可以快速获取或设置表单元素的内容
         -->
        <div id="app" >
            <h3>登录案例</h3>
                用户名: <input type="text" v-model="username"/><br/><br/>
                密&nbsp;&nbsp;&nbsp;码: <input type="password" v-model="password"/><br/><br/>
                    <button @click="login">登录</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button @click="reset">重置</button>  
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
             username : '',
             password : '' 
            },
            methods : {
                login(){
                    console.log(this.username+"   "+this.password);
                    //这里获取到视图中的数据，直接配合后端发送请求即可。
                },
                reset(){
                    this.username='';
                    this.password='';
                }
            }
           })
        </script>
    </body>

测试结果

在这里插入图片描述

7、波仔案例

思路：

  1. 6张图片需要一个数组
  2. 访问数组得有一个下标 （v-bind:src=“images[index]”）
  3. 按钮和index得有一个绑定事件的关系(v-on或者@)
  4. 前一个和后一个图片需要有判断按钮是否显示(v-show)

测试代码

 <body>
        <!-- 图片切换案例-波仔的学习之路 -->
        <!-- 
            思路：
                    1.   6张图片需要一个数组
                    2.   访问数组得有一个下标  （v-bind:src="images[index]"）
                    3.   按钮和index得有一个绑定事件的关系(v-on或者@)
                    4.   前一个和后一个图片需要有判断按钮是否显示(v-show)
         -->
        <div id="app" >
            <div class="box">
                <button v-show="index > 0" @click="index--">上一页</button><br/>
                <img :src="images[index]" alt="" :title="index"><br/>
                <button v-show="index < images.length-1" @click="index++">下一页</button>
            </div>
               
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
               index : 0,
               images: [
                        '../images/bozai01.png',
                        '../images/bozai02.png',
                        '../images/bozai03.png',
                         '../images/bozai04.png',
                         '../images/bozai05.png',
                         '../images/bozai06.png'
                        ]
            }
           })
        </script>
    </body>

测试结果

波仔

JS中操作数组的几个好方法:

向数组中添加一个元素

 //向数组添加一个元素
		this.projectList.unshift({
              id  : +new  Date(),
             name : this.projectInfo
             })

从数组中删除一个元素

//通过id删除数组的指定元素
        this.projectList = this.projectList.filter(item => item.id !== id);

清空数组中的所有元素

//清空数组中的所有元素
        this.projectList=[]

8、小黑记事本

利用所学的知识点完成以下功能
在这里插入图片描述
功能总结：

  1. 列表渲染

    • v-for    key的设置   以及插值表达式{{}}

  2. 删除功能

    • v-on调用传参   filter过滤   覆盖修改原数组

  3. 添加功能

    • v-model数据绑定   unshift修改原数组添加

  4. 底部统计和清空

    • 数组.length累计数量
    • 覆盖数组清空列表
    • v-show控制隐藏、

代码实现

<body>
        <div id="app" >
            <!-- 头部区域 -->
            <header >
                <h1>小黑记事本</h1>
                <input placeholder="请输入任务" v-model="projectInfo" />

                <button  @click="addProject">添加任务</button>
            </header>
            <!-- 列表区域 -->
            <section class="main">
                <ul >
                    <li  v-for="(item,index) in projectList" :key="item.id">
                        <div  class="view">
                            <span>{{index + 1 }}、</span><label>{{item.name}}</label>
                            <button v-on:click="del(item.id)">×</button>
                        </div>
                    </li>
                </ul>
            </section>

            <!-- 统计和清空 -->
                <!-- 当没有任务时，不出现合计和清空任务的选项 -->
            <footer class="footer" v-show="projectList.length > 0">
                    <!-- 统计 -->
                    <span >合计：<strong>{{projectList.length}}</strong></span>
                    <!-- 清空 -->
                    <button @click="delAll">
                        清空任务
                    </button>
            </footer>
        </div>

        <script>
            //添加功能
                // 1. 通过v-model获取输入框的内容   与data双向绑定
                // 2. 给添加按钮进行事件绑定
                // 3. 将输入框的内容添加到数组中
           const app = new Vue({
            el : '#app',
            data : {
                projectInfo : '',
                projectList : [
                    {id : 1,name : '跑步锻炼1000米'},
                    {id : 2,name : '跳神一百次'},
                    {id : 3,name : '打篮球一小时'}
                ]
            },
            methods : {
                del(id){
                    //通过id删除数组的指定元素
                    this.projectList = this.projectList.filter(item => item.id !== id);
                },
                delAll(){
                    //清空数组中的所有元素
                    this.projectList=[]
                  
                },
                addProject(){
                    //数组中添加元素    元素值为this.projectInfo
                    if(this.projectInfo.trim() === ''){
                        alert('添加的内容不能为空')
                    }else{
                        //向数组添加一个元素
                        this.projectList.unshift({
                        id  : +new  Date(),
                        name : this.projectInfo
                    })
                    }
                   
                    this.projectInfo=''

                }
            }
           })
        </script>
    </body>
Radan小哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
基于vue的uni-app生态——学习笔记001
qq_63690649的博客
03-14 2249
基于vue的uni-app生态——学习笔记001
vue-element-admin前端搭建学习笔记
Parker_cpp的博客
01-16 1398
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。官方网站为。
VUE学习笔记--vue-cli
CelineT的博客
04-07 1529
vue-cli简介用法、cli目录结构、命令、npm run serve 执行过程、vue-cli的起步文件、使用自定义组件
Vue学习笔记2-安装Vue
摘繁华
06-12 1301
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
前端工程化、vue --javaweb学习笔记
m0_71386740的博客
04-22 807
是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板Vue-cli提供了如下功能：依赖环境：NodeJS安装教程：首先，新建一个文件夹，在文件夹中打开cmd然后输入命令行： 图形化界面（推荐）： 然后会自动打开图形化界面基于Vue脚手架创建出来的工程，有标准的目录结构，如下：方式一：图形化界面（vscode打开vue项目，右键项目-运行文件夹中的npm脚本）方式二：命令行 n
vue学习笔记-02
m0_65519288的博客
10-25 2362
关于的动态属性和v-model内容的补充，计算属性和侦听器
前端学习笔记-vue2-UI组件库
qq_43128157的博客
01-26 887
vue2-UI组件库Vue UI 组件库移动端常用UI组件库PC端常用UI组件库 Vue UI 组件库 移动端常用UI组件库 Vant Cube UI Mint UI PC端常用UI组件库 Element UI 全局引入 按需引入 IView UI 更多前端学习笔记
前端学习笔记-vue2-组件
qq_43128157的博客
01-26 946
Vue2-组件组件模块与组件、模块化与组件化非单文件组件使用步骤1 定义组件2 注册组件3 使用组件VueComponentVue与VueComponent单文件组件 组件 模块与组件、模块化与组件化 模块 向外提供特定功能的js程序，一般为一个js文件 作用：复用js，简化js的编写，提高js运行效率 组件 用来实现局部（特定）功能效果的代码集合 作用：复用编码，简化项目编码，提高运行效率 模块化：当应用中的js都以模块来编写时，这个应用就是一个模块化的应用 组件化：当应用中的
学习笔记:vue-element-admin安装报错问题
lilikk1314的博客
07-18 1182
vue-element-admin安装报错
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
Vue2学习笔记-前端开发
03-03
Vue2学习笔记-前端开发
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
前端Bootstrap+Es6+vue学习笔记
06-10
前端Bootstrap+Es6+vue学习笔记 Bootstrap 框架是一种基于 HTML/CSS/JS 的开源框架，由 Twitter 公司的两名技术工程师研发。其主要特点包括： 1. 跨设备跨浏览器：Bootstrap 支持多种设备和浏览器，可以在不同的...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1209
vue切换主题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1418
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue 自定义滚动条同步拖动（移动端）
最新发布
u014206461的博客
07-12 166
vue 自定义滚动条同步拖动（移动端）
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 495
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值