当前位置：首页 > article >正文

Vue3学习（接口，泛型，自定义类型，v-for，props）

article 2025/6/10 7:00:04

一，前言

继续学习

二，TS接口泛型自定义类型

1.接口

TypeScript 接口（Interface）是一种定义对象形状的强大工具，它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码，仅在编译阶段用于类型检查。

基本语法与用法

接口使用 interface 关键字定义，下面是一些常见用法：

// 定义基本接口
interface User {name: string;age: number;//“?” 表明该属性是可选的，其数据类型为布尔型（即值只能是 true 或 false）。“readonly id: string;” 表示定义一个名为 “id” 的属性，“readonly” 关键字意味着这个属性一旦被赋值就不能再被修改isAdmin?: boolean; // 可选属性readonly id: string; // 只读属性greet: (message: string) => void; // 方法
}// 使用接口
const user: User = {name: "张三",age: 30,id: "user123",greet: (message) => console.log(`${message}, ${this.name}`)
};// 接口继承
interface AdminUser extends User {role: string;
}// 函数接口
interface Calculator {(a: number, b: number): number;
}const add: Calculator = (a, b) => a + b;// 可索引接口
interface StringArray {[index: number]: string;
}const names: StringArray = ["Alice", "Bob"];

高级特性

接口还支持更复杂的类型定义：

// 混合类型接口（对象 + 函数）
interface Counter {(): void; // 函数签名count: number; // 属性
}function createCounter(): Counter {const counter = () => counter.count++;counter.count = 0;return counter;
}// 接口合并（同名接口会自动合并）
interface Box {height: number;
}interface Box {width: number;
}const box: Box = { height: 10, width: 20 };

最佳实践

使用接口定义对象形状，特别是在大型项目中
使用类型别名处理联合类型、交叉类型等复杂类型
保持接口名称简洁明了，通常使用名词或形容词 + 名词
为可选属性添加 ? 标记，为只读属性添加 readonly 标记

接口是 TypeScript 类型系统的核心组成部分，合理使用可以显著提高代码的可读性和可维护性。

2.泛型

泛型是 TypeScript 中一个强大的特性，它允许我们创建可重用的组件，同时保持类型安全。泛型让我们可以在定义函数、接口或类时不预先指定具体类型，而是在使用时再确定类型。

基本泛型函数：

// 泛型函数示例
function identity<T>(arg: T): T {return arg;
}// 使用泛型函数
const output1 = identity<string>("myString"); // 显式指定类型
const output2 = identity(100); // 类型推断为 number

泛型接口：

// 泛型接口
interface GenericIdentityFn<T> {(arg: T): T;
}function identity<T>(arg: T): T {return arg;
}const myIdentity: GenericIdentityFn<number> = identity;

泛型类：

// 泛型类
class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;
}const myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;

3，自定义类型

自定义类型允许我们创建复杂的、特定用途的类型定义，提高代码的可读性和类型安全性。

类型别名（Type Aliases）：

// 基本类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;// 复杂类型别名
type UserInfo = {name: string;age: number;address?: string;
};// 泛型类型别名
type Container<T> = { value: T };

交叉类型（Intersection Types）：

// 交叉类型
interface Colorful {color: string;
}interface Circle {radius: number;
}type ColorfulCircle = Colorful & Circle;const cc: ColorfulCircle = {color: "red",radius: 10
};

联合类型

// 联合类型
type StringOrNumber = string | number;
type Text = string | { text: string };// 字面量类型
type Easing = "ease-in" | "ease-out" | "ease-in-out";

**条件类型

// 条件类型
type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;interface Email {message: string;
}type EmailMessageContents = MessageOf<Email>; // string

映射类型

// 映射类型
interface User {name: string;age: number;email: string;
}// 创建只读版本
type ReadonlyUser = {readonly [P in keyof User]: User[P];
};// 创建可选版本
type PartialUser = {[P in keyof User]?: User[P];
};

三，v-for指令

v-for 是 Vue.js 中用于循环渲染列表的指令，它允许你基于数组或对象的数据来动态生成 DOM 元素。

基本用法

v-for 指令的基本语法是 item in items，其中 items 是源数据数组，而 item 是当前被迭代的数组元素的别名。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue v-for 简单示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><style>body { font-family: Arial, sans-serif; }.example { margin-bottom: 30px; padding: 15px; border: 1px solid #eee; }ul { list-style-type: none; padding: 0; }li { margin: 5px 0; }</style>
</head>
<body><div id="app"><!-- 示例1：循环数组 --><div class="example"><h3>1. 循环数组</h3><ul><li v-for="(item, index) in fruits" :key="index">{{ index + 1 }}. {{ item }}</li></ul></div><!-- 示例2：循环对象 --><div class="example"><h3>2. 循环对象</h3><ul><li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li></ul></div><!-- 示例3：循环数字 --><div class="example"><h3>3. 循环数字</h3><p>前 {{ count }} 个数字的平方：</p><ul><li v-for="n in count" :key="n">{{ n }} × {{ n }} = {{ n * n }}</li></ul></div></div><script>new Vue({el: '#app',data: {fruits: ['苹果', '香蕉', '橙子', '草莓'],user: {name: '张三',age: 28,email: 'zhangsan@example.com'},count: 5}})</script>
</body>
</html>

key 的重要性：
- 为每个 v-for 项提供唯一的 key 是最佳实践，它帮助 Vue 跟踪节点的身份，从而高效地更新 DOM。
- 避免使用索引作为 key，特别是当列表可能会重新排序或过滤时，这可能导致性能问题或错误的更新。
响应式更新：
- Vue 能够检测到数组的变更方法（如 push、pop、splice 等）并触发相应的 DOM 更新。
- 直接修改数组索引或长度不会触发响应式更新，应使用 Vue 提供的方法。
过滤和排序：
- 当需要显示过滤或排序后的结果时，应使用计算属性或方法，而不是在 v-for 中直接操作。

四，props

props 是 Vue 组件中用于从父组件向子组件传递数据的机制。它允许你创建可复用的组件，同时保持数据的单向流动。

index.ts

// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter
{name: string;age: number;sex: string;
}// 一个自定义类型
export type Persons = PersonInter[]

App.vue

<template><person a="hh":list="personlist"/>
</template>
<script  lang="ts" setup name="App">
import person from './components/person.vue';
import { reactive } from 'vue';
import { type Persons} from './types';
let personlist = reactive<Persons>([{name:'张三',age:18,sex:'男',},{name:'李四',age:19,sex:'男',},{name:'王五',age:20,sex:'男'},])
</script>

person.vue

<template><div class="person"><h2>{{a}}</h2>
<ul><li v-for="p in list" :key="p.id">{{p.name}} {{p.age}}</li>
</ul></div>
</template>
<script lang="ts" setup name="Person">
import { defineProps }   from 'vue';
// // 接收a参数和list
defineProps(['a','list'])
// // 接收a参数,同时将props保存起来
// let x = defineProps(['a'])
// console.log(x.a)
</script>
<style></style>

大概就是这样，反正就是从父组件那里搞点数据，还有很多别的用法遇到了再说。

Vue3学习（接口，泛型，自定义类型，v-for，props）

一，前言继续学习二，TS接口泛型自定义类型 1.接口 TypeScript 接口（Interface）是一种定义对象形状的强大工具，它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码，仅…...

编程日记 2025/6/10 7:00:04

华为云Flexus+DeepSeek征文 | MaaS平台避坑指南：DeepSeek商用服务开通与成本控制

作者简介我是摘星，一名专注于云计算和AI技术的开发者。本次通过华为云MaaS平台体验DeepSeek系列模型，将实际使用经验分享给大家，希望能帮助开发者快速掌握华为云AI服务的核心能力。目录作者简介前言一、技术架构概览 1.1 整体架构设…...

编程日记 2025/6/10 6:59:03

WEB3全栈开发——面试专业技能点P8DevOps / 区块链部署

一、Hardhat / Foundry 进行合约部署概念介绍 Hardhat 和 Foundry 都是以太坊智能合约开发的工具套件，支持合约的编译、测试和部署。它们允许开发者在本地或测试网络快速开发智能合约，并部署到链上（测试网或主网）。部署过程…...

编程日记 2025/6/10 6:58:01

【动态规划】B4336 [中山市赛 2023] 永别|普及+

B4336 [中山市赛 2023] 永别题目描述你做了一个梦，梦里有一个字符串，这个字符串无论正着读还是倒着读都是一样的，例如： a b c b a \tt abcba abcba 就符合这个条件。但是你醒来时不记得梦中的字符串是什么，只记得…...

编程日记 2025/6/10 6:57:00

可下载旧版app屏蔽更新的app市场

软件介绍手机用久了，app越来越臃肿，老手机卡顿成常态。这里给大家推荐个改善老手机使用体验的方法，还能帮我们卸载不需要的app。手机现状如今的app不断更新，看似在优化，实则内存占用越来越大，对手机性…...

编程日记 2025/6/10 6:55:59

claude3.7高阶玩法，生成系统架构图，国内直接使用

文章目录零、前言一、操作指南操作指导二、提示词模板三、实战图书管理系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片在线考试系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片四、感受零、前言现在很多AI大模型可以…...

编程日记 2025/6/10 6:54:57

河北对口计算机高考MySQL笔记(完结版)（2026高考）持续更新~~~~

MySQL 基础概念数据（Data）：文本，数字，图片，视频，音频等多种表现形式，能够被计算机存储和处理。 **数据库（Data Base—简称DB）：**存储数据的仓库…...

编程日记 2025/6/10 6:53:55

2025-06-01-Hive 技术及应用介绍

Hive 技术及应用介绍参考资料 Hive 技术原理Hive 架构及应用介绍Hive - 小海哥哥 de - 博客园https://cwiki.apache.org/confluence/display/Hive/Home(官方文档) Apache Hive 是基于 Hadoop 构建的数据仓库工具，它为海量结构化数据提供类 SQL 的查询能力&#xf…...

编程日记 2025/6/10 6:52:54

DriveGPT4: Interpretable End-to-end Autonomous Driving via Large Language Model

一、研究背景与创新点（一）现有方法的局限性当前智驾系统面临两大核心挑战：一是长尾问题，即系统在遇到新场景时可能失效，例如突发交通状况或非常规道路环境；二是可解释性问题，传统方法无法解释智驾系统的决策过程，用户难以理解车辆行为的依据。传统语言模型（如 BERT…...

编程日记 2025/6/10 6:51:52

AI书签管理工具开发全记录（十八）：书签导入导出

文章目录 AI书签管理工具开发全记录（十八）：书签导入导出1.前言 📝2.书签结构分析 📖3.书签示例 📑4.书签文件结构定义描述 🔣4.1. 整体文档结构4.2. 核心元素类型4.3. 层级关系4.…...

编程日记 2025/6/10 6:50:51

codeforces C. Cool Partition

目录题目简述： 思路： 总代码： https://codeforces.com/contest/2117/problem/C 题目简述： 给定一个整数数组，现要求你对数组进行分割，但需满足条件：前一个子数组中的值必须在后一个子数组中…...

编程日记 2025/6/10 6:49:48

TMC2226超静音步进电机驱动控制模块

目前已经使用TMC2226量产超过20K，发现在静音方面做的还是很不错。一、TMC2226管脚定义说明二、原理图及下载地址一、TMC2226管脚定义说明引脚编号类型功能OB11电机线圈 B 输出 1BRB2线圈 B 的检测电阻连接端。将检测电阻靠近该引脚连接到地。使用内部检测电阻时，将此引…...

编程日记 2025/6/10 6:48:45

docker容器互联

1.docker可以通过网路访问 2.docker允许映射容器内应用的服务端口到本地宿主主机 3.互联机制实现多个容器间通过容器名来快速访问一、端口映射实现容器访问 1.从外部访问容器应用我们先把之前的删掉吧（如果不删的话，容器就提不起来，因…...

编程日记 2025/6/10 6:47:44

安宝特案例丨寻医不再长途跋涉？Vuzix再次以AR技术智能驱动远程医疗

加拿大领先科技公司TeleVU基于Vuzix智能眼镜打造远程医疗生态系统，彻底革新患者护理模式。安宝特合作伙伴TeleVU成立30余年，沉淀医疗技术、计算机科学与人工智能经验，聚焦医疗保健领域，提供AR、AI、IoT解决方案。该方案使医疗…...

编程日记 2025/6/10 6:46:43

Modbus转Ethernet IP深度解析：磨粉设备效率跃升的底层技术密码

在建材矿粉磨系统中，开疆智能Modbus转Ethernet IP网关KJ-EIP-101的应用案例是一个重要的技术革新。这个转换过程涉及到两种主要的通信协议：Modbus和Ethernet IP。Modbus是一种串行通信协议，广泛应用于工业控制系统中。它简单、易于部署和维护…...

编程日记 2025/6/10 6:45:42

Python打卡训练营学习记录Day49

知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程日记 2025/6/10 6:44:38

1. 环境准备安装ESP-IDF v4.4 (官方指南)确保Python 3.7 和Git已安装 2. 创建项目 idf.py create-project udp_client cd udp_client3. 完整优化代码 (main/main.c) #include <string.h> #include "freertos/FreeRTOS.h" #include "freertos/task.h&…...

编程日记 2025/6/10 6:43:37

在MobaXterm 打开图形工具firefox

目录 1.安装 X 服务器软件 2.服务器端配置 3.客户端配置 4.安装并打开 Firefox 1.安装 X 服务器软件 Centos系统 # CentOS/RHEL 7 及之前（YUM） sudo yum install xorg-x11-server-Xorg xorg-x11-xinit xorg-x11-utils mesa-libEGL mesa-libGL mesa-…...

编程日记 2025/6/10 6:41:04

旋量理论：刚体运动的几何描述与机器人应用

旋量理论为描述刚体在三维空间中的运动提供了强大而优雅的数学框架。与传统的欧拉角或方向余弦矩阵相比，旋量理论通过螺旋运动的概念统一了旋转和平移，在机器人学、计算机图形学和多体动力学领域具有显著优势。这种描述不仅几何直观，而且计算…...

编程日记 2025/6/10 6:40:00

SE（Secure Element）加密芯片与MCU协同工作的典型流程

以下是SE（Secure Element）加密芯片与MCU协同工作的典型流程，综合安全认证、数据保护及防篡改机制： 一、基础认证流程（参数保护方案） 密钥预置‌ SE芯片与MCU分别预置相同的3DES密钥（Key1、Key2…...

编程日记 2025/6/10 6:37:30

运动控制--BLDC电机

一、电机的分类按照供电电源 1.直流电机 1.1 有刷直流电机(BDC) 通过电刷与换向器实现电流方向切换，典型应用于电动工具、玩具等 1.2 无刷直流电机（BLDC） 电子换向替代机械电刷，具有高可靠性，常用于无人机、高端家电…...

编程日记 2025/6/10 6:36:15

Redis专题-实战篇一-基于Session和Redis实现登录业务

GitHub项目地址：https://github.com/whltaoin/redisLearningProject_hm-dianping 基于Session实现登录业务功能提交版本码：e34399f 基于Redis实现登录业务提交版本码：60bf740 一、导入黑马点评后端项目项目架构图 1. 前期阶段2. 后续阶段导…...

编程日记 2025/6/10 6:35:10

【前端实战】如何让用户回到上次阅读的位置？

目录【前端实战】如何让用户回到上次阅读的位置？ 一、总体思路 1、核心目标 2、涉及到的技术二、实现方案详解 1、基础方法：监听滚动，记录 scrollTop（不推荐） 2、Intersection Observer 插入探针元素 3、基…...

编程日记 2025/6/10 6:34:05

dvwa11——XSS(Reflected)

LOW 分析源码：无过滤和上一关一样，这一关在输入框内输入，成功回显 <script>alert(relee);</script> MEDIUM 分析源码，是把<script>替换成了空格，但没有禁用大写改大写即可，注意函数…...

编程日记 2025/6/10 6:33:02

关于疲劳分析的各种方法

疲劳寿命预测方法很多。按疲劳裂纹形成寿命预测的基本假定和控制参数，可分为名义应力法、局部应力一应变法、能量法、场强法等。 1名义应力法名义应力法是以结构的名义应力为试验和寿命估算的基础，采用雨流法取出一个个相互独立、互不相关的应力循环&…...

编程日记 2025/6/10 6:32:01

数据库优化实战指南：提升性能的黄金法则

在现代软件系统中，数据库性能直接影响应用的响应速度和用户体验。面对数据量激增、访问压力增大，数据库性能瓶颈经常成为项目痛点。如何科学有效地优化数据库，提升查询效率和系统稳定性，是每位开发与运维人员必备的技能。本文结…...

编程日记 2025/6/10 6:30:58

【Axure高保真原型】图片列表添加和删除图片

今天和大家分享图片列表添加和删除图片的原型模板，效果包括： 点击图片列表的加号可以显示图片选择器，选择里面的图片； 选择图片后点击添加按钮，可以将该图片添加到图片列表； 鼠标移入图片列表的图片&…...

编程日记 2025/6/10 6:29:56

XXE漏洞知识

目录 1.XXE简介与危害 XML概念 XML与HTML的区别 1.pom.xml 主要作用 2.web.xml 3.mybatis 2.XXE概念与危害案例：文件读取（需要Apache >5.4版本） 案例：内网探测（鸡肋） 案例：执行命…...

编程日记 2025/6/10 6:28:55

mq安装新版-3.13.7的安装

一、下载包，上传到服务器 https://github.com/rabbitmq/rabbitmq-server/releases/download/v3.13.7/rabbitmq-server-generic-unix-3.13.7.tar.xz 二、 erlang直接安装 rpm -ivh erlang-26.2.4-1.el8.x86_64.rpm不需要配置环境变量，直接就安装了。 erl…...

编程日记 2025/6/10 6:27:53

第21节 Node.js 多进程

Node.js本身是以单线程的模式运行的，但它使用的是事件驱动来处理并发，这样有助于我们在多核 cpu 的系统上创建多个子进程，从而提高性能。每个子进程总是带有三个流对象：child.stdin, child.stdout和child.stderr。他们可能会共享…...

编程日记 2025/6/10 6:26:52