【Vue】day01-Vue基础入门

news2024/10/6 20:28:26

目录

day01

一、为什么要学习Vue

二、什么是Vue

1.什么是构建用户界面

2.什么是渐进式

Vue的两种开发方式：

3.什么是框架

总结：什么是Vue？

三、创建Vue实例

四、插值表达式 {{}}

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

2.语法

3.错误用法

4.总结

五、响应式特性

1.什么是响应式？

2.如何访问 和 修改 data中的数据（响应式演示）

3.总结

六、Vue开发者工具安装

七、Vue中的常用指令

八、内容渲染指令

九、条件渲染指令

十、事件绑定指令

十一、属性绑定指令

十二、小案例-波仔的学习之旅

十三、列表渲染指令

十四、小案例-小黑的书架

十五、v-for中的key

十六、双向绑定指令

十七、综合案例-小黑记事本

day01

一、为什么要学习Vue

1.前端必备技能

2.岗位多，绝大互联网公司都在使用Vue

3.提高开发效率

4.高薪必备技能（Vue2+Vue3）

二、什么是Vue

概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面 的 渐进式 框架

Vue2官网：Vue.js

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面

2.什么是渐进式

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：

  1. Vue核心包开发

    场景：局部模块改造

  2. Vue核心包&Vue插件&工程化

    场景：整站开发

3.什么是框架

所谓框架：就是一套完整的解决方案

举个栗子

如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库。

  • 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等

  • 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

下图是 库 和 框架的对比。

框架的特点：有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则 官网

总结：什么是Vue？

Vue是什么：

什么是构建用户界面：

什么是渐进式：

什么是框架：

三、创建Vue实例

我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面，那应该怎么做呢？

比如就上面这个数据，基于提供好的msg 怎么渲染后右侧可展示的数据呢？

核心步骤（4步）：

  1. 准备容器

  2. 引包（官网） — 开发版本/生产版本

  3. 创建Vue实例 new Vue()

  4. 指定配置项，渲染数据

    1. el:指定挂载点

    2. data提供数据

总结：创建Vue实例需要执行哪4步

四、插值表达式 {{}}

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

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

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

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>
​
<p>{{nickName.toUpperCase()}}</p>
​
<p>{{age >= 18 ? '成年':'未成年'}}</p>
​
<p>{{obj.name}}</p>
​
<p>{{fn()}}</p>

3.错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错
​
2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>
​
3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4.总结

1.插值表达式的作用是什么

2.语法是什么

3.插值表达式的注意事项

五、响应式特性

1.什么是响应式？

简单理解就是数据变，视图对应变。

2.如何访问 和 修改 data中的数据（响应式演示）

data中的数据, 最终会被添加到实例上

① 访问数据： "实例.属性名"

② 修改数据： "实例.属性名"= "值"

3.总结

  1. 什么是响应式

  2. 如何访问和修改data中的数据呢

六、Vue开发者工具安装

  1. 通过谷歌应用商店安装（国外网站）

  2. 极简插件下载（推荐） 极简插件_Chrome扩展插件商店_优质crx应用下载

安装步骤：

安装之后可以F12后看到多一个Vue的调试面板

七、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

  • 内容渲染指令（v-html、v-text）

  • 条件渲染指令（v-show、v-if、v-else、v-else-if）

  • 事件绑定指令（v-on）

  • 属性绑定指令 （v-bind）

  • 双向绑定指令（v-model）

  • 列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

八、内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

  • v-text（类似innerText）

    • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中

    • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

  • v-html（类似 innerHTML）

    • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中

    • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容

    • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

 
  <div id="app">
    <h2>个人信息</h2>
    // 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">简介：</p>
  </div> 
​
<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'张三',
                intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
            }
        })
</script>

九、条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

  1. v-show

    1. 作用： 控制元素显示隐藏

    2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

    3. 原理： 切换 display:none 控制显示隐藏

    4. 场景：频繁切换显示隐藏的场景

    示例代码：

      <div id="app">
    <div class="box">我是v-show控制的盒子</div>
    <div class="box">我是v-if控制的盒子</div>
  </div>
​
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

  2. v-else 和 v-else-if

    1. 作用：辅助v-if进行判断渲染

    2. 语法：v-else v-else-if="表达式"

    3. 需要紧接着v-if使用

示例代码：

  <div id="app">
    <p>性别：♂ 男</p>
    <p>性别：♀ 女</p>
    <hr>
    <p>成绩评定A：奖励电脑一台</p>
    <p>成绩评定B：奖励周末郊游</p>
    <p>成绩评定C：奖励零食礼包</p>
    <p>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
​
    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

十、事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

  1. 内联语句

    <div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

  2. 事件处理函数

    注意：

    • 事件处理函数应该写到一个跟data同级的配置项（methods）中

    • methods中的函数内部的this都指向Vue实例

<div id="app">
    <button>切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

3.给事件处理函数传参

  • 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

  • 如果传递了参数，则实参 $event 表示事件对象，固定用法。

 <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>

 <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button>可乐5元</button>
      <button>咖啡10元</button>
      <button>牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      }
    })
  </script>

十一、属性绑定指令

  1. 作用：动态设置html的标签属性 比如：src、url、title

  2. 语法：v-bind:属性名=“表达式”

  3. v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

  • <img v-bind:src="url" />

  • <img :src="url" /> （v-bind可以省略）

  <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })
  </script>

十二、小案例-波仔的学习之旅

需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

1.数组存储图片路径 ['url1','url2','url3'，...]

2.可以准备个下标index 去数组中取图片地址。

3.通过v-bind给src绑定当前的图片地址

4.点击上一页下一页只需要修改下标的值即可

5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

 <div id="app">
    <button>上一页</button>
    <div>
      <img src alt="">
    </div>
    <button>下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </script>

十三、列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项

  • index 是每一项的索引，不需要可以省略

  • arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

十四、小案例-小黑的书架

需求：

1.根据左侧数据渲染出右侧列表（v-for）

2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）

准备代码：

<div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li>
        <span>《红楼梦》</span>
        <span>曹雪芹</span>
        <button>删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      }
    })
  </script>

十五、v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

十六、双向绑定指令

所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新

  2. 页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量"

需求：使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容

  2. 点击重置按钮清空表单中的内容

<div id="app">
    账户：<input type="text"> <br><br>
    密码：<input type="password"> <br><br>
    <button>登录</button>
    <button>重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
    })
  </script>

十七、综合案例-小黑记事本

功能需求：

  1. 列表渲染

  2. 删除功能

  3. 添加功能

  4. 底部统计 和 清空

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/762932.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python接口自动化（三十九）- logger 日志 - 上（超详解）

python接口自动化（三十九）- logger 日志 - 上（超详解）

简介 Python的logging模块提供了通用的日志系统&#xff0c;可以方便第三方模块或者是应用使用。这个模块提供不同的日志级别&#xff0c;并可以采用不同的方式记录日志&#xff0c;比如文件&#xff0c;HTTP GET/POST&#xff0c;SMTP&#xff0c;Socket等&#xff0c;甚至可以…
阅读更多...
给自己工作的箴言

给自己工作的箴言

箴言 目录概述需求&#xff1a; 设计思路实现思路分析工作箴言 性能参数测试&#xff1a; Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,challenge Survive.…
阅读更多...
QT程序运行时依赖设置

QT程序运行时依赖设置

本文主要解决Qt程序运行时容易遇到的两个问题&#xff1a; 找不到相关的Qt6Core.dll、Qt6Widgets.dll等库 这种情况下&#xff0c;把相关DLL所在目录添加到系统的环境变量 PATH 中&#xff0c;就可以了。 无法导入Qt相关的插件&#xff1a; qt.qpa.plugin: Could not find th…
阅读更多...
高效的实时聊天利器：揭秘三个绝佳的网站聊天插件

高效的实时聊天利器：揭秘三个绝佳的网站聊天插件

实时聊天是连接用户与网站之间的纽带。传统的聊天方式已经逐渐不够满足用户的需求&#xff0c;如果不能快速跟用户交流以及快速解决用户问题&#xff0c;用户就容易跑掉&#xff0c;而网站聊天插件正好是实现实时聊天的必备工具。许多电子商务平台和网站都需要在聊天插件加持下…
阅读更多...
[USACO06DEC] Milk Patterns G

[USACO06DEC] Milk Patterns G

目录 1.题目 2.思路 1.字典树(trie 树) 2.hash(正解) 1.有注释版 2. copy 版 3.后文 1.题目 Farmer John has noticed that the quality of milk given by his cows varies from day to day. On further investigation, he discovered that although he cant predict t…
阅读更多...
【洛谷】P2004 领地选择（二维前缀和）

【洛谷】P2004 领地选择（二维前缀和）

二维前缀和模板啦&#xff0c;家人们&#xff0c;一眼出 pos:&#xff08;up自己犯的错误&#xff0c;记录一下&#xff0c;也提醒大家&#xff09; x1<n-c1(1哦) y1<m-c1 x2x1c-1(-1哦) y2y1c-1 okk,上&#xff01; ACcode: #include<bits/stdc.h> using na…
阅读更多...
C/C++封装：Windows/Linux下封装.lib/.so文件

C/C++封装：Windows/Linux下封装.lib/.so文件

C/C TCP/IP通信函数 这里提供了两个C/C中服务器与客户端之间通讯的两个程序&#xff0c;程序中封装了通信之间的函数方法&#xff0c;我们以这个程序为例进行封装。 文件目录结构按照C/C标准开源项目进行存放&#xff1a; ├─bin ├─doc ├─lib └─src├─xsocket│ │ …
阅读更多...
influxdb 新增数据失败原因解析

influxdb 新增数据失败原因解析

前几天本地装了一个influxdb时序数据库&#xff0c;但是通过java新增数据一直失败&#xff0c;奇怪的是measurement和tag都能顺利添加&#xff0c;但是field一直没值。 最开始以为是用户权限&#xff0c;结果发现并不是。 最终原因&#xff1a;influxdb只能往默认的保留策略里…
阅读更多...
中国人民大学与加拿大女王大学金融硕士——在职读研为自己而战，为未来而战

中国人民大学与加拿大女王大学金融硕士——在职读研为自己而战，为未来而战

还记得去年大街小巷上广为流传的一首歌吗&#xff0c;“去吗 去啊 以最卑微的梦&#xff0c;战吗 战啊 以最孤高的梦&#xff0c;致那黑夜中的呜咽与怒吼&#xff0c;谁说站在光里的才算英雄”。这首歌表达了卑微的生活和梦想并不能击垮每个平凡的奋斗者。我们都有一个大梦想&a…
阅读更多...
windbg 双机调试环境搭建（虚拟机）

windbg 双机调试环境搭建（虚拟机）

windbg 双机调试环境搭建&#xff08;虚拟机&#xff09; WinDbg 下载安装下载安装 虚拟机下载安装下载安装虚拟机软件 VMware下载 Windows 镜像&#xff0c;新建虚拟机 WinDbg 建立连接使用演示参考资料 WinDbg 是一个调试器&#xff0c;可用于分析故障转储、调试实时用户模式…
阅读更多...
提高驾驶安全性 | 基于ACM32 MCU的胎压监测仪方案

提高驾驶安全性 | 基于ACM32 MCU的胎压监测仪方案

概述 作为车辆的基础部件&#xff0c;轮胎是影响行车安全不可忽视的因素之一。据统计&#xff0c;中国每年由胎压问题引起轮胎爆炸的交通事故约占 30%&#xff0c;其中 50%的高速交通事故是由车辆胎压异常引起。因此&#xff0c;准确实时地监测车辆在行驶过程中的轮胎压监测系…
阅读更多...
HarmonyOS/OpenHarmony应用开发-程序包多HAP机制（下）

HarmonyOS/OpenHarmony应用开发-程序包多HAP机制（下）

三、多HAP的开发调试与发布部署流程 &#xff08;一&#xff09;多HAP的开发调试与发布部署流程如下图所示。 图1 多HAP的开发调试与发布部署流程 &#xff08;二&#xff09;开发 开发者通过DevEco Studio工具按照业务的需要创建多个Module&#xff0c;在相应的Module中完成…
阅读更多...
【Unity 实用插件篇】 | 使用Fungus插件制作一个对话系统，简单好学易上手

【Unity 实用插件篇】 | 使用Fungus插件制作一个对话系统，简单好学易上手

前言 【Unity 实用插件篇】| 使用Fungus插件制作一个对话系统&#xff0c;简单好学易上手一、Fungus介绍二、Fumgus导入三、Fungus功能使用3.1 基础对话效果实现3.2 搭建简单场景测试3.3 触碰 对话3.4 条件对话3.4 分支 对话3.5 改变对话UI视图 四、常用功能菜单介绍4.1 Flowch…
阅读更多...
【前端】自制密码展示隐藏按钮

【前端】自制密码展示隐藏按钮

效果 一、前期准备 使用的图片是iconfront上拿的svg代码环境是Vue2 Element 二、创建组件 showPasswordAndclose <template><span class"show-password-container"><span v-if"chooseType CLOSE" click"changeType"><…
阅读更多...
一文读懂Nacos原理及实践

一文读懂Nacos原理及实践

文章目录 0. 前言0.nacos 介绍什么是 Nacos&#xff1f;Nacos 地图 1. 原理解析1.1 服务注册与发现流程一、服务注册流程二、服务发现流程三、注册中心高可用性机制 1.2. 原理解析一、服务注册与发现的概念二、服务注册与发现的流程2. 服务发现流程3. 服务负载均衡流程 三、服务…
阅读更多...
javascript 将json数据导出excel

javascript 将json数据导出excel

<el-button type"primary" plain v-on:click"jsonToExcel();">导出</el-button>jsonToExcel() {const data this.AlarmData;let head "城市,站点,时间,A相电流(A),B相电流(A),C相电流(A),SO2压力(MPa),CO压力(MPa),NOX压力(MPa),A相电压…
阅读更多...
Activity引擎（初次学习与总结梳理全记录，包括易混淆知识点分析，常用报错解决方案等）

Activity引擎（初次学习与总结梳理全记录，包括易混淆知识点分析，常用报错解决方案等）

最近工作需要使用Acticity框架处理审批业务&#xff0c;简单了解后能虽能很快的上手&#xff0c;但是对于Activity的整体认识并不够&#xff0c;特此花费很多精力全面的学习并记录。包含对很多的概念的第一次理解过程&#xff1b;对知识点的混淆地方的梳理&#xff1b;对实践过…
阅读更多...
mysql索引优化和锁

mysql索引优化和锁

mysql索引优化和锁 IO操作与索引 IO操作上数据库性能的瓶颈之一&#xff0c;每次进行IO操作都需要消耗时间和资源。 核心:尽量减少 IO 操作的次数 读取次数少且读取量少是优化IO操作的核心目标。采用分块读取和局部性原理。 分块读取&#xff1a;将磁盘上的数据划分为若干…
阅读更多...
黑马程序员编著过哪些教材？

黑马程序员编著过哪些教材？

黑马程序员是一家知名的IT培训机构&#xff0c;他们发布了许多教材和课程。 《Python入门教程》&#xff1a;介绍Python编程语言的基础知识和常用技巧。 《Java从入门到精通》&#xff1a;全面介绍Java编程语言的基础知识和高级特性。 《Web前端开发教程》&#xff1a;涵盖HT…
阅读更多...
JDK压缩包安装，tomcat压缩包安装

JDK压缩包安装，tomcat压缩包安装

1.解压JDK后进入我的电脑高级设置 2.新建系统变量&#xff08;变量名为JAVA_HOME&#xff0c;值为jdk文件夹的绝对地址&#xff09; 3.再次新建系统变量&#xff08;变量名为CLASSPATH&#xff0c;值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar&#xff09; 4.进入系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023