Vue3速成

文章目录

  • day 1
      • 1. 创建vue3工程
      • 3. 响应式数据
      • 4. 计算属性
  • day 2
      • 5. watch 监视
      • 6. watchEffect
      • 7. 标签的`ref`属性
      • 8. 回顾TS中的接口_泛型_自定义类型

day 1

1. 创建vue3工程

相关代码如下：

## 创建vue工程
npm create vue@lastest## 安装node_modules
npm install // npm i

创建工程完毕之后，进入文件夹可以发现有如下文件，下图是文件介绍：

入口文件介绍：

这里main.ts是与index.html建立联系的；

通过.mount('#app')这样 main.ts就与index.html建立起了联系；

其中main.ts的代码格式如下：

<template><div><h1>你好</h1></div>
</template><script setup lang="ts">// js或者ts
</script><style scoped>/* 样式 */
</style>

App.vue的代码格式如下：

<template><div class="app"><h1>你好</h1></div>
</template><script setup lang="ts">// js或者ts
</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

网页调试vue可以在chrome应用商店search vue.js devtools下载安装就好；

你好

### 2. 选项式API和组合式API

感觉vue2和vue3的主要不同就在于vue文件中script部分；其中vue2是选项式OptionsAPI的，vue3是组合式Composition的；

选项式API相关代码如下：

注意，这里并没有setup；

<script lang="ts">export default {// 定义组件名字name: 'Person',// 定义数据data(){return {name: '张三',age: 18,tel: '138888888'}},//  定义方法methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}},}
</script>

组合式相关代码如下：

注意，这里的setup比beforecreate执行得还要早，setup的返回值也可以是渲染函数，data，method，setup可以同时存在，setup不可以读取data中的数据，反之则可以，因为setup是执行得最早的；

<script lang="ts">export default {name: 'Person',setup(){// 数据let name = '张三' // 此时name，age，tel 不是响应式的    应该改为ref或者reactivelet age = 18    // 此时name，age，tel 不是响应式的  应该改为ref或者reactivelet tel = '138888888'   // 此时name，age，tel 不是响应式的  应该改为ref或者reactive// 方法function changeName(){name = 'zhang-san'}function changeAge(){age += 1}function showTel(){alert(tel)}// 把数据和方法交出去return {name, age, changeAge, changeName, showTel}}}
</script>

setup语法糖简化后代码如下：

<script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">// 数据let name = '张三' // 此时name，age，tel 不是响应式的    应该改为ref或者reactivelet age = 18    // 此时name，age，tel 不是响应式的  应该改为ref或者reactivelet tel = '138888888'   // 此时name，age，tel 不是响应式的  应该改为ref或者reactive// 方法function changeName(){name = 'zhang-san'}function changeAge(){age += 1}function showTel(){alert(tel)}// 此时不需要return 自动提交
</script>

3. 响应式数据

响应式数据创建有两种方法，一种是ref，一种是reactive

ref定义基本类型的数据

使用的相关代码如下：

<template><div class="app"><h2>姓名：{{ name }}</h2> // 利用大括号包起来的是不需要.value的<h2>年龄：{{ age }}</h2> // 利用大括号包起来的是不需要.value的<button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script setup lang="ts">import {ref} from 'vue'let name = ref('张三')let age = ref(18)   let tel = ref('138888888')// 在ref包裹住后，需要操作值都需要.valuefunction changeName(){name.value = 'zhang-san'}function changeAge(){age.value += 1}function showTel(){alert(tel.value)}

这里值用ref包裹起来之后，变量会变成一个RefImpl类的数据，这时要修改值直接对变量操作是无意义的，我们需要对.value进行操作；这里要注意的是，ref也可以定义对象类的响应式数据，实现原理是先用ref包裹，再用reactive包裹，即取值还是需要用value；

reactive定义对象类型的数据

使用的相关代码如下：

<template><div class="app"><h2>姓名：{{ student.name }}</h2><h2>年龄：{{ student.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button></div>
</template><script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">import {reactive} from 'vue'let student = reactive({name:'张三', age:18})function changeName(){student.name = 'zhang-san'}function changeAge(){student.age += 1}</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 10px;}
</style>

用reactive包起来后，对象变成了一个Proxy的对象，原对象在Proxy里面的target中；这里的reactive是深层次的，只能定义对象类型的响应式数据；

ref和reactive的对比

这里要注意的是，重新分配reactive的对象时，使用Object.assign，但是如果是利用ref定义的对象类数据，我们是可以直接进行替换的；

对响应式数据进行解构，toRef和toRefs：

let person = reactive({name: '张三',age: 18
})let {name, age} = person
// let name = person.name
// let age = person.agelet {name, age} = toRefs(person) //把reactive对象里面的每一组对象转化为ref
// let name = toRef(person, 'name')
// let age = toRef(person, 'age')

4. 计算属性

v-bind 是 单向绑定，数据流向页面；v-model 是 双向绑定，页面也可以流向数据；

计算属性 computed 是只要响应式变量出现了变化，就随之变化；

使用例子如下：

<template><div class="app">姓名：<input type="text" v-model="name"> <br>年龄：<input type="text" v-model="age"> <br>information: {{ information }}</div>
</template><script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">import {ref, computed} from 'vue'let name = ref('zhangsan')let age = ref(18)let information = computed(()=>{return name.value + age.value})</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

computed是用来区别于方法的，使用computed得到的属性是没有缓存的，而且computed得到的属性是不可修改的；如果需要修改，则需要使用以下方法：

<template><div class="app">姓名：<input type="text" v-model="name"> <br>年龄：<input type="text" v-model="age"> <br>information: {{ information }} <br><button @click="changeInformation">修改information为lisi</button></div>
</template><script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">import {ref, computed} from 'vue'let name = ref('zhangsan')let age = ref(18)let information = computed({get(){return name.value + '-' + age.value},set(val){const [s1, s2] = val.split('-')name.value = s1age.value = parseInt(s2)}})function changeInformation(){information.value = 'lisi-18'}</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

day 2

5. watch 监视

情况1：监视ref定义的基本类型数据

停止监视只需要调用watch函数的返回值就可以；

<template><div><h5>情况1：监视【ref】定义的值是【基本类型】的数据</h5>sum : {{ sum }} <br><button @click="changeSum"> sum + 1</button> <br><hr></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {ref, watch} from 'vue'let sum = ref(1)function changeSum(){sum.value += 1}// 这里的sum是不需要添加.value的，返回值就是停止监视的函数const stopwatch = watch(sum, (newVal, oldVal)=>{console.log('sum变化了', newVal, oldVal)// 如果sum的最新值大于等于10则停止监视if(newVal >= 10 ){stopwatch()}})
</script><style scoped>
</style>

情况2：监视ref定义的对象类型数据

这里要注意的是：若修改的是ref定义的对象中的属性，newVal和oldVal都是新值，因为是同一个对象；若修改的是ref定义的整个对象，newVal是新值，oldVal是旧值，因为不是同一个对象；

<template><div><h5>情况2：监视【ref】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeFull">修改整个人</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {ref, watch} from 'vue'let person = ref({name: '张三',age: 18})function changeName (){person.value.name = '李四'}function changeAge (){person.value.age = 19}function changeFull (){person.value = {name: '王五', age: 20}}// 监视【ref】定义的【对象类型数据】，监视的是对象的地址值，若想要监视// 对象的内部属性的变化，需要手动开启深度监视deep// 若修改的是ref定义的对象中的属性，newVal和oldVal都是新值，因为是同一个对象// 若修改的是ref定义的整个对象，newVal是新值，oldVal是旧值，因为不是同一个对象// watch的第一个参数是：被监视的数据// watch的第二个参数是：监视的回调// watch的第三个参数是：配置对象(deep, immediate ... )watch(person, (newVal, oldVal)=>{console.log('person变化了', newVal, oldVal)}, {deep: true})
</script><style scoped>button {margin: 10px;}
</style>

情况3：监视reactive定义的对象类型数据

很简单，只需要把ref定义的对象改为reactive定义的对象，然后在修改整个对象的时候使用Object.assign替换就可以；

<template><div><h5>情况3：监视【reactive】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeFull">修改人</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch} from 'vue'let person = reactive({name: '张三',age: 18})function changeName (){person.name = '李四'}function changeAge (){person.age = 19}function changeFull (){// 并没有修改地址值；Object.assign(person, {name: '王五', age: 20})}// 监视【reactive】定义的对象类型数据，默认是开启深度监视的，而且深度是关不掉的watch(person, (newVal, oldVal)=>{console.log('person变化了', newVal, oldVal)})</script><style scoped>button {margin: 10px;}
</style>

情况4：监视ref或者reactive定义的对象类型中的某个属性

<template><div><h5>情况4：监视【ref或reactive】定义的【对象类型】某个属性</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br>车辆：{{ person.car.c1 }}, {{ person.car.c2 }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改car</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch} from 'vue'let person = reactive({name: '张三',age: 18,car:{c1: 'asd',c2: 'das'}})function changeName (){person.name = '李四'}function changeAge (){person.age = 19}function changeC1(){person.car.c1 = 'qqq'}function changeC2(){person.car.c2 = 'www'}function changeCar(){person.car = {c1:'yyy', c2:'jjj'}}// 监视响应式对象中的某个属性，且该变量是基本类型的，要写成函数式/* watch(()=>person.name, (newVal, oldVal)=>{console.log('person.name变化了', newVal, oldVal)}) */// 监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，推荐写函数watch(()=>person.car, (newVal, oldVal)=>{console.log('person.car变化了', newVal, oldVal)}, {deep:true})</script><style scoped>button {margin: 10px;}
</style>

情况5：监视多个数据

<template><div><h5>情况4：监视【ref】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br>车辆：{{ person.car.c1 }}, {{ person.car.c2 }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改car</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch} from 'vue'let person = reactive({name: '张三',age: 18,car:{c1: 'asd',c2: 'das'}})function changeName (){person.name = '李四'}function changeAge (){person.age = 19}function changeC1(){person.car.c1 = 'qqq'}function changeC2(){person.car.c2 = 'www'}function changeCar(){person.car = {c1:'yyy', c2:'jjj'}}// 此时newVal和oldVal是数组与前面的对应watch([()=>person.name, ()=>person.age], (newVal, oldVal)=>{console.log('变化了', newVal, oldVal)})</script><style scoped>button {margin: 10px;}
</style>

6. watchEffect

相较于watch，watchEffect不需要指定监视对象，而是响应式的追踪对象；

<template><div><h5>情况4：监视【ref】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br>车辆：{{ person.car.c1 }}, {{ person.car.c2 }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改car</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch, watchEffect} from 'vue'let person = reactive({name: '张三',age: 18,car:{c1: 'asd',c2: 'das'}})function changeName (){person.name = '李四'}function changeAge (){person.age += 1}function changeC1(){person.car.c1 = 'qqq'}function changeC2(){person.car.c2 = 'www'}function changeCar(){person.car = {c1:'yyy', c2:'jjj'}}// 此时newVal和oldVal是数组与前面的对应/* watch([()=>person.name, ()=>person.age], (newVal, oldVal)=>{let [newname, newage] = newValif( newage > 23 ){console.log('发送请求')}}) */// 如果采用watchEffect,全自动的watch;watchEffect(()=>{if( person.age > 23 ){console.log('发送请求')}})</script><style scoped>button {margin: 10px;}
</style>

7. 标签的ref属性

利用ref于document.getElementById('')的区别在于，前者是局部的，不会受到整体的干扰；

<template><h2> 北京 </h2><h2 ref="title"> 师范 </h2><h2> 大学 </h2><button @click="output"> 点击一下输出样式 </button>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {ref, defineExpose} from 'vue'// 这里变量名和template中的ref中的变量名对应上了let title = ref()function output(){console.log(title.value)}// 在这里可以使调用该模块的模块得到该模块的内容defineExpose({title})
</script><style scoped>/* 这里的scoped是局部样式，防止和子文件样式出现重复而全部修改无脑加上就好 */
</style>

8. 回顾TS中的接口_泛型_自定义类型

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

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

相关文章

JSON 文件里的 “$schema” 是干什么用的？

JSON 文件里的 “$schema” 是干什么用的？

最近我在做一些前端项目&#xff0c;我发现有的配置文件&#xff0c;比如 .prettierrc.json 或者 tsconfig.json 里面都会看到一个 $schema 字段&#xff0c;有点好奇&#xff0c;就查了一下。 什么是 JSON Schema JSON Schema是一种基于JSON (JavaScript Object Notation) 的…
阅读更多...
【Leetcode】2369. 检查数组是否存在有效划分

【Leetcode】2369. 检查数组是否存在有效划分

文章目录 题目思路代码结果 题目 题目链接 给你一个下标从 0 开始的整数数组 nums &#xff0c;你必须将数组划分为一个或多个 连续 子数组。 如果获得的这些子数组中每个都能满足下述条件 之一 &#xff0c;则可以称其为数组的一种 有效 划分&#xff1a; 子数组 恰 由 2 个…
阅读更多...
大数据智能化-长视频领域

大数据智能化-长视频领域

随着数字化时代的到来&#xff0c;长视频领域的发展迎来了新的机遇和挑战。在这一背景下&#xff0c;大数据智能化技术的应用成为长视频行业提升用户体验、优化运营管理的重要手段之一。本文将从优爱腾3大长视频背景需求出发&#xff0c;分析静态资源CDN、视频文件存储与分发、…
阅读更多...
网络安全、信息安全、计算机安全，有何区别？

网络安全、信息安全、计算机安全，有何区别？

这三个概念都存在&#xff0c;一般人可能会混为一谈。 究竟它们之间是什么关系&#xff1f;并列&#xff1f;交叉&#xff1f; 可能从广义上来说它们都可以用来表示安全security这样一个笼统的概念。 但如果从狭义上理解&#xff0c;它们应该是有区别的&#xff0c;区别在哪呢&…
阅读更多...
力扣hot100题解（python版36-40题）

力扣hot100题解（python版36-40题）

36、二叉树的中序遍历 给定一个二叉树的根节点 root &#xff0c;返回 它的 *中序 遍历* 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&am…
阅读更多...
【机器学习基础】层次聚类-BIRCH聚类

【机器学习基础】层次聚类-BIRCH聚类

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;相对完整的机器学习基础教学&#xff01; ⭐特别提醒&#xff1a;针对机器学习&#xff0c;特别开始专栏&#xff1a;机器学习python实战…
阅读更多...
matplotlib.animation 3d姿态动画

matplotlib.animation 3d姿态动画

目录 演示效果&#xff1a; 演示代码&#xff1a; 保存为gif 演示效果&#xff1a; 演示代码&#xff1a; import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from matplotlib.animation import FuncAnimation# 定义人体关键点…
阅读更多...
网络防御第6次作业

网络防御第6次作业

防病毒网关 按照传播方式分类 病毒 病毒是一种基于硬件和操作系统的程序&#xff0c;具有感染和破坏能力&#xff0c;这与病毒程序的结构有关。病毒攻击的宿主程序是病毒的栖身地&#xff0c;它是病毒传播的目的地&#xff0c;又是下一次感染的出发点。计算机病毒感染的一般过…
阅读更多...
动态规划（算法竞赛、蓝桥杯）--分组背包DP

动态规划（算法竞赛、蓝桥杯）--分组背包DP

1、B站视频链接&#xff1a;E16 背包DP 分组背包_哔哩哔哩_bilibili #include <bits/stdc.h> using namespace std; const int N110; int v[N][N],w[N][N],s[N]; // v[i,j]:第i组第j个物品的体积 s[i]:第i组物品的个数 int f[N][N]; // f[i,j]:前i组物品&#xff0c;能放…
阅读更多...
基带信号处理设计原理图：2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板

基带信号处理设计原理图：2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板

基于6U VPX的双TMS320C6678Xilinx FPGA K7 XC7K420T的图像信号处理板 综合图像处理硬件平台包括图像信号处理板2块&#xff0c;视频处理板1块&#xff0c;主控板1块&#xff0c;电源板1块&#xff0c;VPX背板1块。 一、板卡概述 图像信号处理板包括2片TI 多核DSP处理…
阅读更多...
Linux进程管理：(二)进程调度原语

Linux进程管理：(二)进程调度原语

文章说明&#xff1a; Linux内核版本&#xff1a;5.0 架构&#xff1a;ARM64 参考资料及图片来源&#xff1a;《奔跑吧Linux内核》 Linux 5.0内核源码注释仓库地址&#xff1a; zhangzihengya/LinuxSourceCode_v5.0_study (github.com) 进程调度的概念比较简单&#xff0c…
阅读更多...
QPS 提升 10 倍！滴滴借助 StarRocks 物化视图实现低成本精确去重

QPS 提升 10 倍！滴滴借助 StarRocks 物化视图实现低成本精确去重

作者&#xff1a;滴滴 OLAP 开发工程师 刘雨飞 小编导读&#xff1a; 滴滴于 2022 年引入了 StarRocks。经过一年多的努力&#xff0c;StarRocks 逐渐替代了原有技术栈&#xff0c;成为滴滴内部主要的 OLAP 引擎。截至 2023 年 12 月&#xff0c;滴滴已经成功建立了超过 40 个 …
阅读更多...
Cesium插件系列——3dtiles压平

Cesium插件系列——3dtiles压平

本系列为自己基于cesium写的一套插件具体实现。 这里是根据Cesium提供的CustomShader来实现的。 在CustomShader的vertexShaderText里&#xff0c;需要定义vertexMain函数&#xff0c;例如下&#xff1a; struct VertexInput {Attributes attributes;FeatureIds featureIds;…
阅读更多...
LVGL常用部件使用总结之图片部件

LVGL常用部件使用总结之图片部件

图片部件可用于显示图片&#xff0c;图片源可以是 C 语言数组格式的文件、二进制的.bin 文件以及图标字体。值得注意的是&#xff0c;图片部件要显示 BMP、JPEG 等格式的图片&#xff0c;则必须经过解码。 图片部件的组成部分仅有一个&#xff1a;主体&#xff08;LV_PART_MAIN…
阅读更多...
URI到底是个啥

URI到底是个啥

URI是统一资源标识符&#xff08;Uniform Resource Identifier&#xff09;&#xff0c;URL是统一资源定位符&#xff08;Uniform Resource Locator&#xff09;。 具体如何标记和区分服务器上的资源用的其实就是URI&#xff0c;因为其经常出现在浏览器的地址栏里&#xff0c;…
阅读更多...
Verilog（未完待续）

Verilog（未完待续）

Verilog教程 这个教程写的很好&#xff0c;可以多看看。本篇还没整理完。 一、Verilog简介 什么是FPGA&#xff1f;一种可通过编程来修改其逻辑功能的数字集成电路&#xff08;芯片&#xff09; 与单片机的区别&#xff1f;对单片机编程并不改变其地电路的内部结构&#xff0…
阅读更多...
Parallel Computing - 一文讲懂并行计算

Parallel Computing - 一文讲懂并行计算

目录 Throughput/LatencySerial ComputingParallel ComputingTypes of parallel computersSimple 4-width SIMDAmdahls lawTypes of parallelism**Data Parallel Model**Task parallel PartitioningDomain DecompositionFunctional Decomposition CommunicationsExample that d…
阅读更多...
java调用chatgpt接口，实现专属于自己的人工智能助手

java调用chatgpt接口，实现专属于自己的人工智能助手

文章目录 前言导包基本说明请求参数响应参数创建请求和响应的VO类 代码编写使用最后说明 前言 今天突然突发奇想&#xff0c;就想要用java来调用chatget的接口&#xff0c;实现自己的聊天机器人&#xff0c;但是网上找文章&#xff0c;属实是少的可怜(可能是不让发吧)。找到了…
阅读更多...
ESP32 web 对接华为云平台--MQTT协议

ESP32 web 对接华为云平台--MQTT协议

文章目录 前言一、MQTT协议二、如何使用MQTT协议对接华为云1.注册华为云账号2.设备接入中创建资源空间3.如何连接4.通过MQTT.fx工具做初步对接4.1 设置连接信息4.2 连接平台 5.查看平台设备信息 三. 设备测对接平台1.ESP测引入MQTT库2.编码2.1前端编码修改2.2 后端接口修改 3.M…
阅读更多...
element-plus+vue3表单含图片（可预览）（线上图片）

element-plus+vue3表单含图片（可预览）（线上图片）

一、要实现的效果&#xff1a; 二、如果期间出现这样的效果&#xff08;表格穿透过来了&#xff09;&#xff0c;加上了这行代码就可以了&#xff1a; preview-teleported“true” 如果仅测试用&#xff0c;建议使用线上图片链接的形式&#xff0c;免得本地地址不生效&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023