Vue3从入门到精通(三)

vue3插槽Slots

在 Vue3 中，插槽（Slots）的使用方式与 Vue2 中基本相同，但有一些细微的差异。以下是在 Vue3 中使用插槽的示例：

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <slot></slot>
  </div>
</template>
​
// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent>
      <p>This is the content of the slot.</p>
    </ChildComponent>
  </div>
</template>
​
<script>
  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'
​
  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  })
</script>

在上面的示例中，ChildComponent 组件定义了一个默认插槽，使用 <slot></slot> 标签来表示插槽的位置。在 ParentComponent 组件中，使用 <ChildComponent> 标签包裹了一段内容 <p>This is the content of the slot.</p>，这段内容将被插入到 ChildComponent 组件的插槽位置。

需要注意的是，在 Vue3 中，默认插槽不再具有具名插槽的概念。如果需要使用具名插槽，可以使用 v-slot 指令。以下是一个示例：

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
​
// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent>
      <template v-slot:header>
        <h3>This is the header slot</h3>
      </template>
      <p>This is the content of the default slot.</p>
      <template v-slot:footer>
        <p>This is the footer slot</p>
      </template>
    </ChildComponent>
  </div>
</template>
​
<script>
  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'
​
  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  })
</script>

在上面的示例中，ChildComponent 组件定义了三个插槽，分别是名为 header、默认插槽和名为 footer 的插槽。在 ParentComponent 组件中，使用 <template v-slot:header> 来定义 header 插槽的内容，使用 <template v-slot:footer> 来定义 footer 插槽的内容。默认插槽可以直接写在组件标签内部。

需要注意的是，在 Vue3 中，v-slot 只能用在 <template> 标签上，不能用在普通的 HTML 标签上。如果要在普通 HTML 标签上使用插槽，可以使用 v-slot 的缩写语法 #。例如，<template v-slot:header> 可以简写为 #header。

vue3组件生命周期

在 Vue3 中，组件的生命周期钩子函数与 Vue2 中有一些变化。以下是 Vue3 中常用的组件生命周期钩子函数：

  1. beforeCreate: 在实例初始化之后、数据观测之前被调用。

  2. created: 在实例创建完成之后被调用。此时，实例已完成数据观测、属性和方法的运算，但尚未挂载到 DOM 中。

  3. beforeMount: 在挂载开始之前被调用。在此阶段，模板已经编译完成，但尚未将模板渲染到 DOM 中。

  4. mounted: 在挂载完成之后被调用。此时，组件已经被挂载到 DOM 中，可以访问到 DOM 元素。

  5. beforeUpdate: 在数据更新之前被调用。在此阶段，虚拟 DOM 已经重新渲染，并将计算得到的变化应用到真实 DOM 上，但尚未更新到视图中。

  6. updated: 在数据更新之后被调用。此时，组件已经更新到最新的状态，DOM 也已经更新完成。

  7. beforeUnmount: 在组件卸载之前被调用。在此阶段，组件实例仍然可用，可以访问到组件的数据和方法。

  8. unmounted: 在组件卸载之后被调用。此时，组件实例已经被销毁，无法再访问到组件的数据和方法。

需要注意的是，Vue3 中移除了一些生命周期钩子函数，如 beforeDestroy 和 destroyed。取而代之的是 beforeUnmount 和 unmounted。

另外，Vue3 中还引入了新的生命周期钩子函数 onRenderTracked 和 onRenderTriggered，用于追踪组件的渲染过程和触发的依赖项。

需要注意的是，Vue3 推荐使用 Composition API 来编写组件逻辑，而不是依赖于生命周期钩子函数。Composition API 提供了 setup 函数，用于组件的初始化和逻辑组织。在 setup 函数中，可以使用 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 等函数来替代相应的生命周期钩子函数。

vue3生命周期应用

Vue3 的生命周期钩子函数可以用于在组件的不同生命周期阶段执行相应的操作。以下是一些 Vue3 生命周期的应用场景示例：

  1. beforeCreate 和 created：在组件实例创建之前和创建之后执行一些初始化操作，如设置初始数据、进行异步请求等。

export default {
  beforeCreate() {
    console.log('beforeCreate hook');
    // 执行一些初始化操作
  },
  created() {
    console.log('created hook');
    // 执行一些初始化操作
  },
};

  1. beforeMount 和 mounted：在组件挂载之前和挂载之后执行一些 DOM 操作，如获取 DOM 元素、绑定事件等。

export default {
  beforeMount() {
    console.log('beforeMount hook');
    // 执行一些 DOM 操作
  },
  mounted() {
    console.log('mounted hook');
    // 执行一些 DOM 操作
  },
};

  1. beforeUpdate 和 updated：在组件数据更新之前和更新之后执行一些操作，如更新 DOM、发送请求等。

export default {
  beforeUpdate() {
    console.log('beforeUpdate hook');
    // 执行一些操作
  },
  updated() {
    console.log('updated hook');
    // 执行一些操作
  },
};

  1. beforeUnmount 和 unmounted：在组件卸载之前和卸载之后执行一些清理操作，如取消订阅、清除定时器等。

export default {
  beforeUnmount() {
    console.log('beforeUnmount hook');
    // 执行一些清理操作
  },
  unmounted() {
    console.log('unmounted hook');
    // 执行一些清理操作
  },
};

这些示例展示了 Vue3 生命周期钩子函数的一些常见应用场景。根据具体需求，你可以在相应的生命周期钩子函数中执行适当的操作。

vue3动态组件

在 Vue3 中，可以使用动态组件来根据不同的条件或状态动态地渲染不同的组件。使用动态组件可以使应用更加灵活和可扩展。以下是使用动态组件的示例：

  1. 使用 component 元素和 :is 属性来实现动态组件的渲染：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>
​
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
​
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

在上面的示例中，根据 currentComponent 的值动态地渲染 ComponentA 或 ComponentB 组件。点击按钮时，切换 currentComponent 的值，从而实现动态组件的切换。

  1. 使用 v-if 和 v-else 来根据条件渲染不同的组件：

<template>
  <div>
    <component-a v-if="showComponentA"></component-a>
    <component-b v-else></component-b>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>
​
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
​
export default {
  data() {
    return {
      showComponentA: true,
    };
  },
  methods: {
    toggleComponent() {
      this.showComponentA = !this.showComponentA;
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

在上面的示例中，根据 showComponentA 的值使用 v-if 和 v-else 来渲染 ComponentA 或 ComponentB 组件。点击按钮时，切换 showComponentA 的值，从而实现动态组件的切换。

这些示例演示了在 Vue3 中如何使用动态组件来根据条件或状态动态地渲染不同的组件。你可以根据具体需求选择适合的方式来使用动态组件。

vue3组件保持存活

在 Vue3 中，可以使用 <keep-alive> 组件来保持组件的存活状态，即使组件在组件树中被切换或销毁，它的状态仍然会被保留。这对于需要在组件之间共享状态或缓存数据的场景非常有用。以下是使用 <keep-alive> 组件来保持组件存活的示例：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>
​
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
​
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

在上面的示例中，使用 <keep-alive> 组件将 <component> 包裹起来，这样在切换组件时，被包裹的组件的状态将会被保留。点击按钮时，切换 currentComponent 的值，从而切换要渲染的组件。

需要注意的是，被 <keep-alive> 包裹的组件在切换时会触发一些特定的生命周期钩子函数，如 activated 和 deactivated。你可以在这些钩子函数中执行一些特定的操作，如获取焦点、发送请求等。

<template>
  <div>
    <h2>Component A</h2>
  </div>
</template>
​
<script>
export default {
  activated() {
    console.log('Component A activated');
    // 执行一些操作
  },
  deactivated() {
    console.log('Component A deactivated');
    // 执行一些操作
  },
};
</script>

在上面的示例中，当组件 A 被激活或停用时，分别在 activated 和 deactivated 钩子函数中输出相应的信息。

使用 <keep-alive> 组件可以方便地保持组件的存活状态，并在组件之间共享状态或缓存数据。

vue3异步组件

在 Vue3 中，可以使用异步组件来延迟加载组件的代码，从而提高应用的性能和加载速度。异步组件在需要时才会被加载，而不是在应用初始化时就加载所有组件的代码。以下是使用异步组件的示例：

  1. 使用 defineAsyncComponent 函数来定义异步组件：

<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <component v-if="isComponentLoaded" :is="component"></component>
  </div>
</template>
​
<script>
import { defineAsyncComponent } from 'vue';
​
const AsyncComponent = defineAsyncComponent(() =>
  import('./Component.vue')
);
​
export default {
  data() {
    return {
      isComponentLoaded: false,
      component: null,
    };
  },
  methods: {
    loadComponent() {
      this.isComponentLoaded = true;
      this.component = AsyncComponent;
    },
  },
};
</script>

在上面的示例中，使用 defineAsyncComponent 函数来定义异步组件 AsyncComponent。当点击按钮时，设置 isComponentLoaded 为 true，并将 component 设置为 AsyncComponent，从而加载异步组件。

  1. 使用 Suspense 组件来处理异步组件的加载状态：

<template>
  <div>
    <Suspense>
      <template #default>
        <component :is="component"></component>
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
    <button @click="loadComponent">Load Component</button>
  </div>
</template>
​
<script>
import { defineAsyncComponent, Suspense } from 'vue';
​
const AsyncComponent = defineAsyncComponent(() =>
  import('./Component.vue')
);
​
export default {
  data() {
    return {
      component: null,
    };
  },
  methods: {
    loadComponent() {
      this.component = AsyncComponent;
    },
  },
};
</script>

在上面的示例中，使用 Suspense 组件来处理异步组件的加载状态。在 default 插槽中，渲染异步组件，而在 fallback 插槽中，渲染加载状态的提示信息。当点击按钮时，加载异步组件。

这些示例演示了在 Vue3 中如何使用异步组件来延迟加载组件的代码。使用异步组件可以提高应用的性能和加载速度，特别是在应用中有大量组件时。

vue3依赖注入

在 Vue3 中，可以使用依赖注入来在组件之间共享数据或功能。Vue3 提供了 provide 和 inject 两个函数来实现依赖注入。

  1. 使用 provide 函数在父组件中提供数据或功能：

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>
​
<script>
import { provide } from 'vue';
import MyService from './MyService';
​
export default {
  setup() {
    provide('myService', new MyService());
  },
};
</script>

在上面的示例中，使用 provide 函数在父组件中提供了一个名为 myService 的数据或功能，它的值是一个 MyService 的实例。

  1. 使用 inject 函数在子组件中注入提供的数据或功能：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
​
<script>
import { inject } from 'vue';
​
export default {
  setup() {
    const myService = inject('myService');
    const message = myService.getMessage();
​
    return {
      message,
    };
  },
};
</script>

在上面的示例中，使用 inject 函数在子组件中注入了父组件提供的名为 myService 的数据或功能。通过注入的 myService 实例，可以调用其中的方法或访问其中的属性。

通过使用 provide 和 inject 函数，可以在组件之间实现依赖注入，从而实现数据或功能的共享。这在多个组件需要访问相同的数据或功能时非常有用。

vue3应用

Vue3 是一个用于构建用户界面的现代化 JavaScript 框架。它具有响应式数据绑定、组件化、虚拟 DOM 等特性，使得开发者可以更高效地构建交互式的 Web 应用。

下面是一些使用 Vue3 开发应用的步骤：

  1. 安装 Vue3：使用 npm 或 yarn 安装 Vue3 的最新版本。

npm install vue@next

  1. 创建 Vue3 应用：创建一个新的 Vue3 项目。

vue create my-app

  1. 编写组件：在 src 目录下创建组件文件，例如 HelloWorld.vue。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
​
<script>
import { ref } from 'vue';
​
export default {
  setup() {
    const message = ref('Hello, Vue3!');
​
    const changeMessage = () => {
      message.value = 'Hello, World!';
    };
​
    return {
      message,
      changeMessage,
    };
  },
};
</script>

在上面的示例中，使用 ref 函数创建了一个响应式的数据 message，并在模板中使用它。通过点击按钮，可以改变 message 的值。

  1. 使用组件：在 App.vue 中使用自定义的组件。

<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>
​
<script>
import HelloWorld from './components/HelloWorld.vue';
​
export default {
  components: {
    HelloWorld,
  },
};
</script>

在上面的示例中，导入并注册了自定义的 HelloWorld 组件，并在模板中使用它。

  1. 运行应用：在命令行中运行以下命令启动应用。

npm run serve

这将启动开发服务器，并在浏览器中打开应用。

这只是一个简单的示例，你可以根据实际需求编写更复杂的组件和应用逻辑。Vue3 还提供了许多其他功能和工具，如路由、状态管理、单文件组件等，以帮助你构建更强大的应用。

希望这个简单的示例能帮助你入门 Vue3 应用的开发！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

解决前后端同一个端口跨域问题

解决前后端同一个端口跨域问题

前端起了一个代理 如果url是api开头的自动代理访问8080端口&#xff08;解决前后端端口不一致要么是前端代理&#xff0c;要么是后端加过滤器&#xff09; proxy:{/api:{target:http://localhost:8080,changeOrigin : true,// 替换去掉路径上的api// rewrite:(path)>path.r…
阅读更多...
java集合(1)

java集合(1)

目录 一.集合概述 二. 集合体系概述 1. Collection接口 1.1 List接口 1.2 Set接口 2. Map接口 三. ArrayList 1.ArrayList常用方法 2.ArrayList遍历 2.1 for循环 2.2 增强for循环 2.3 迭代器遍历 一.集合概述 我们经常需要存储一些数据类型相同的元素,之前我们学过…
阅读更多...
（2024）KAN: Kolmogorov–Arnold Networks：评论

（2024）KAN: Kolmogorov–Arnold Networks：评论

KAN: Kolmogorov–Arnold Networks: A review 公和众与号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 1. MLP 也有可学习的激活函数 2. 标题的意义 3. KAN 是具有样条基激活函数的 M…
阅读更多...
昇思25天学习打卡营第17天（+1）|Diffusion扩散模型

昇思25天学习打卡营第17天（+1）|Diffusion扩散模型

1. 学习内容复盘 本文基于Hugging Face&#xff1a;The Annotated Diffusion Model一文翻译迁移而来&#xff0c;同时参考了由浅入深了解Diffusion Model一文。 本教程在Jupyter Notebook上成功运行。如您下载本文档为Python文件&#xff0c;执行Python文件时&#xff0c;请确…
阅读更多...
安乃达：看不懂的募资

安乃达：看不懂的募资

不好玩啊&#xff0c;高标接连被S&#xff0c;市场激进资金找到了新股作为抱团方向。 首日大涨超100%&#xff0c;两日涨幅133%&#xff0c;今天果不其然被电风扇刮走了&#xff0c;今天我们聊聊新加入A股大本营的公司——安乃达。 首先&#xff0c;安乃达是国内直驱轮毂电机头…
阅读更多...
vulnhub--IMF

vulnhub--IMF

环境 攻击机&#xff1a;192.168.96.4 靶机&#xff1a;ip未知 主机探测 确定靶机ip为32的主机 端口扫描 访问80端口 外围打点 在contact.php页面源码中找到了flag1 之后没啥突破 但查看网络后发现contact.php页面请求的三个js文件的文件名很有特点&#xff0c;猜测是base64编码…
阅读更多...
数据结构——队列练习题

数据结构——队列练习题

在C语言中&#xff0c;.和->运算符用于访问结构体的成员变量。它们之间的区别在于&#xff1a;.运算符用于访问结构体变量的成员。->运算符用于访问结构体指针变量的成员 1a&#xff08;rear指向队尾元素后一位&#xff0c;判空判满时牺牲一个存储单元&#xff09; 首先…
阅读更多...
react 自定义 年-月-日 组件，单独选择年、月、日，并且产生联动

react 自定义 年-月-日 组件，单独选择年、月、日，并且产生联动

自定义 年-月-日 组件 code import { useState } from react function Year_Month_Date() {const [yearList, setYearList] useState([])const [monthList, setMonthList] useState([])const [dateList, setDateList] useState([])const [currentYear, setCurrentYear] u…
阅读更多...
【React】上传文章封面基础实现

【React】上传文章封面基础实现

<Form.Item label"封面"><Form.Item name"type"><Radio.Group onChange{onTypeChange}><Radio value{1}>单图</Radio><Radio value{3}>三图</Radio><Radio value{0}>无图</Radio></Radio.Group&…
阅读更多...
交叉测试的优点和缺点！

交叉测试的优点和缺点！

交叉测试在软件测试中具有重要的地位和作用。通过交叉测试&#xff0c;可以提高软件质量、提升用户体验、增加测试覆盖率、提高测试效率以及满足市场需求和竞争优势。因此&#xff0c;在软件开发和测试过程中&#xff0c;应充分重视交叉测试的实施和应用。 以下是对其优缺点的…
阅读更多...
matplotlib下载安装

matplotlib下载安装

matplotlib下载安装过程同之前写的pygame很类似。 Pygame下载安装 python官网 1.搜索matplotlib 直接点进去 查看历史版本&#xff0c;因为新版本可能出现与python不匹配问题。 我选择3.6.3版本&#xff0c;因为我安装的python是3.8&#xff0c;可以匹配版本。同时window操…
阅读更多...
泰迪智能科技企业项目试岗实训——数据分析类型

泰迪智能科技企业项目试岗实训——数据分析类型

当今社会&#xff0c;就业技能的瞩目度正与日俱增。在竞争激烈的就业市场中&#xff0c;重视技能的培养和提升&#xff0c;通过学习与实践&#xff0c;增强自己的竞争力&#xff0c;为未来的职业发展打下坚实的基础&#xff0c;不仅有助于解决各类工作技能问题&#xff0c;更能…
阅读更多...
使用Mybatis批量插入大量数据的实践

使用Mybatis批量插入大量数据的实践

前言 在项目开发过程中&#xff0c;我们经常会有批量插入的需求&#xff0c;例如&#xff1a;定时统计任务 但是受限于MySQL中 max_allowed_packet 参数限制&#xff0c;5.7版本默认值为4M&#xff0c;这显然不太符合我们的需求&#xff0c;当然我们也可以通过修改此值来适应…
阅读更多...
STM32和DHT11使用显示温湿度度（代码理解）+单总线协议

STM32和DHT11使用显示温湿度度（代码理解）+单总线协议

基于STM32CT&#xff0c;利用DHT11采集温湿度数据&#xff0c;在OLED上显示。一定要阅读DHT11数据手册。 1、 DHT11温湿度传感器 引脚说明 1、VDD 供电3.3&#xff5e;5.5V DC 2、DATA 串行数据&#xff0c;单总线 3、NC 空脚 4、GND 接地&#xff0c;电源负极 硬件电路 微…
阅读更多...
【网络安全学习】漏洞利用：BurpSuite的使用-03-枚举攻击案例

【网络安全学习】漏洞利用：BurpSuite的使用-03-枚举攻击案例

如何使用BurpSuite进行枚举攻击 1.靶场选择 BurpSuite官方也是有渗透的教学与靶场的&#xff0c;这次就使用BurpSuite的靶场进行练习。 靶场地址&#xff1a;https://portswigger.net/web-security 登录后如下图所示&#xff0c;选择**【VIEW ALL PATHS】**&#xff1a; 找…
阅读更多...
【fastadmin开发实战】经营数据自动识别录入

【fastadmin开发实战】经营数据自动识别录入

项目场景描述&#xff1a;每日录入各个门店的员工经营数据&#xff0c;直接从微信复制报数、系统识别录入。 解决方案&#xff1a;各个门店按照固定的汇报模板进行汇报&#xff08;如福田店有员工1、2、3、4、5号员工&#xff0c;每个员工按模板报数&#xff09; 例如&#xf…
阅读更多...
快手矩阵系统源码：构建高效短视频生态的引擎

快手矩阵系统源码：构建高效短视频生态的引擎

在短视频内容创作和管理领域&#xff0c;快手矩阵系统源码提供了一套全面的解决方案&#xff0c;帮助用户和企业高效地构建和管理自己的短视频平台。本文将深入探讨快手矩阵系统源码的核心功能&#xff0c;以及它如何助力用户在短视频领域取得成功。 快手矩阵系统源码概述 快…
阅读更多...
2-3 图像分类数据集

2-3 图像分类数据集

MNIST数据集是图像分类任务中广泛使用的数据集之一&#xff0c;但作为基准数据集过于简单&#xff0c;我们将使用类似但更复杂的Fashion-MNIST数据集。 %matplotlib inline import torch import torchvision # pytorch模型关于计算机视觉模型实现的一个库 from torch.utils i…
阅读更多...
windows启动Docker闪退Docker desktop stopped

windows启动Docker闪退Docker desktop stopped

Windows启动Docker闪退-Docker desktop stopped 电脑上很早就安装有Docker了&#xff0c;但是有一段时间都没有启动了&#xff0c;今天想启动启动不起来了&#xff0c;打开没几秒就闪退&#xff0c;记录一下解决方案。仅供参考 首先&#xff0c;参照其他解决方案&#xff0c;本…
阅读更多...
对SRS媒体服务器进行漏洞扫描时，SRS的API模块会出现漏洞，如何修补这些漏洞的简单方法

对SRS媒体服务器进行漏洞扫描时，SRS的API模块会出现漏洞，如何修补这些漏洞的简单方法

目录 一、引言 1、srs介绍 2、媒体流介绍 3、应用场景 二、SRS的http_api介绍、及漏洞 1、概述 2、http_api模块的作用 &#xff08;1&#xff09;提供HTTP API服务 &#xff08;2&#xff09;管理和监控SRS服务器 &#xff08;3&#xff09;自定义开发 三、漏洞扫描…
阅读更多...
最新文章

Copyright @ 2022~2023