【vue3-命名规范以及注意事项】

使用多字组件名

在这里插入图片描述

使用详细的道具定义props

在提交的代码中,prop定义应该总是尽可能详细,至少指定类型。
在这里插入图片描述
在这里插入图片描述
在声明期间,道具名应该始终使用camelCase。当在in-DOM模板中使用时,props应该是串式的。单文件组件模板和JSX可以使用kebab-case或camelCase道具。大小写应该是一致的——如果你选择使用camelcase的道具,确保不要在你的应用中使用kebab-case的道具
在这里插入图片描述

v-for循环一定要带key

避免v-if与v-for在同一个元素上

  • 过滤列表中的项(例如v-for=“user in users” v-if="user. isactive ")。在这些情况下,用一个新的计算属性替换users,返回你过滤过的列表(例如activeUsers)。
  • 避免渲染一个列表,如果它应该被隐藏(例如v-for=“user in users” v-if=“shouldShowUsers”)。在这种情况下,将v-if移到容器元素(例如ul, ol)。
    在这里插入图片描述
    在这里插入图片描述

css module

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

文件命名规范

在这里插入图片描述
在这里插入图片描述

封装基本组件命名规范

在这里插入图片描述
在这里插入图片描述

子级组件命名规范

与父组件紧密耦合的子组件应该包括父组件名作为前缀。
在这里插入图片描述
在这里插入图片描述

组件名称中的单词顺序规则

组件名称应该以最高级(通常是最通用的)单词开头,以描述性修饰词结尾
在这里插入图片描述
组件名称应该全称不能缩写
在这里插入图片描述

单标签和多标签

无子级内容的或者未使用插槽的使用单标签
在这里插入图片描述

模板中的组件名称大小写

在这里插入图片描述

JS/JSX中的组件名称大小写

在这里插入图片描述

多属性远元素

具有多个属性的元素应该跨多行,每行一个属性。
在这里插入图片描述

模板中的简单表达式

在这里插入图片描述
复杂的计算属性应该被分割成尽可能多的简单属性
在这里插入图片描述

组件内容统一 要么都简写,要么就全称例如 v-bind: / :

组件/实例选项中的空行

在这里插入图片描述

以上均来自官网学习

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

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

相关文章

sklearn之神经网络学习算法

文章目录 什么是神经网络人工神经网络的结构输入层输出层隐含层神经元的链接 近几年深度学习还是比较火的,尤其是在大语言模型之后,在本质上深度学习网络就是层数比较多的神经网络。sklearn并不支持深度学习,但是支持多层感知机(浅…

AI 歌词创作:突破想象,惊艳听觉

在音乐的世界里,歌词是触动心灵的钥匙,是引发共鸣的桥梁。而如今,AI 歌词创作正以其惊人的力量,突破我们的想象,为我们带来前所未有的听觉盛宴。 “妙笔生词智能写歌词软件(veve522)”便是这场…

【机器学习-00】机器学习是什么?

在科技飞速发展的今天,机器学习已成为一个热门话题,广泛应用于各个行业和领域。那么,机器学习到底是什么?它又是如何工作的?本文将深入探讨机器学习的定义、原理及其在各领域的应用,带领读者走进这个神秘而…

QuantML-Qlib Model | ICLR 24: 基于独立Patch的时序预测模型

QuantML-Qlib Model | ICLR 24: 基于独立Patch的时序预测模型 原创 QuantML QuantML 2024年07月12日 19:23 上海 Content 论文提出了一种新的时间序列嵌入方法,主要观点是独立地嵌入时间序列块(patches),而不是捕捉这些块之间的…

MySQl高级篇-主从复制

主从复制 复制的基本原理 slave会从master读取binlog来进行数据同步 MySQL复制过程分成三步: master将改变记录到二进制日志(binary log)。这些记录过程叫做二进制日志事件,binary log events;slave将master的binary log events拷贝到它的中继日志(r…

SpringBoot+Vue实现简单的文件上传(txt篇)

SpringBootVue实现简单的文件上传 1 环境 SpringBoot 3.2.1&#xff0c;Vue 2&#xff0c;ElementUI 2 页面 3 效果&#xff1a;只能上传txt文件且大小限制为2M&#xff0c;选择文件后自动上传。 4 前端代码 <template><div class"container"><el-…

2024-07-13 Unity AI状态机2 —— 项目介绍

文章目录 1 项目介绍2 模块介绍2.1 BaseState2.2 ...State2.2.1 PatrolState2.2.2 ChaseState / AttackState / BackState 2.3 StateMachine2.4 Monster 3 其他功能4 类图 项目借鉴 B 站唐老狮 2023年直播内容。 点击前往唐老狮 B 站主页。 1 项目介绍 ​ 本项目使用 Unity 2…

SQL 字段类型-上

总 数据类型关键字描述整数迷你整型tinyint使用1个字节存储整数短整型smallint使用2个字节存储整数中整型mediumint使用3个字节存储整数标准整型int使用4个字节存储整数小数大整型bigint使用8个字节存储单进度float (.. , ..)使用4个字节 ...表示宽度 后面的... 表示小数位双精…

链接追踪系列-08.mac m1安装logstash-番外

下载地址&#xff1a;https://elasticsearch.cn/download/ 配置es相关&#xff1a; #安装plugin&#xff1a; jelexbogon bin % ./logstash-plugin install logstash-codec-json_lines启动&#xff1a;指定配置文件运行 jelexbogon bin % nohup ./logstash -f ../config…

docker安装mysql, 虚拟机连接mysql

docker已安装&#xff1a;安装教程docker和docker的安装-CSDN博客docker是容器技术&#xff08;软件&#xff09;&#xff0c;提供标准的应用镜像&#xff08;包含应用&#xff0c;和应用的依赖&#xff09;可以轻松在docker里安装应用&#xff0c;每个应用独立容器。https://b…

Linux系列--命令详解

目录 一、Linux资源管理方式 二、查询类型命令详解 三、文件管理类型命令详解 四、文件压缩与解压 五、文件编辑 六、系统命令 七、文件内容查看命令 一、Linux资源管理方式 linux操作系统采用一个文档树来组织所有的资源。这棵树的根目录的名字叫做&#xff1a;//…

Spring AOP 实现 Excel 导出统一处理

你好&#xff0c;我是柳岸花开。在实际开发中&#xff0c;经常会遇到需要导出 Excel 数据的需求。为了避免代码重复&#xff0c;我们可以使用 Spring AOP&#xff08;面向切面编程&#xff09;来实现 Excel 导出的统一处理。本文将介绍如何使用 Spring AOP 在项目中统一处理 Ex…

三参数陷波器

传统陷波器特性 传统陷波器的传递函数为&#xff1a; 传统陷波器的 Bode 图如图所示&#xff0c;根据图中曲线表明&#xff0c;当ξ 0.1、ξ 1、 ξ 10 时&#xff0c;随着ξ 值的增加&#xff0c;陷波宽度增大&#xff0c;陷波幅值也增大&#xff0c;此时&#xff0c;陷波…

线程安全(五)volatile 修饰共享变量(JIT即时编译器、指令重排序)

目录 一、volatile 简介1.1 定义1.2 volatile 的两个特性二、特性1:保证线程间的可见性示例1:普通场景1)代码示例:2)执行结果:3)总结:示例2:被 JIT 即时编译器优化1)代码示例:2)执行结果:3)原因分析:4)什么是 JIT 即时编译器?4)解决方案一:5)解决方案二:三…

三相PWM整流器PI双闭环控制Simulink

1.模型简介 本仿真模型基于MATLAB/Simulink&#xff08;版本MATLAB 2017Rb&#xff09;软件。建议采用matlab2017 Rb及以上版本打开。&#xff08;若需要其他版本可联系代为转换&#xff09; 2.拓扑结构&#xff1a; 3.模型算法架构&#xff1a; 4.仿真算法&#xff1a; &am…

Camunda如何通过外部任务与其他系统自动交互

文章目录 简介流程图外部系统pom.xmllogback.xml监听类 启动流程实例常见问题Public Key Retrieval is not allowed的解决方法java.lang.reflect.InaccessibleObjectException 流程图xml 简介 前面我们已经介绍了Camunda的基本操作、任务、表&#xff1a; Camunda组件与服务与…

OpenStack Yoga版安装笔记(六)glance练习

1、glance架构 Glance api处理来自用户端&#xff08;OpenStackClient等&#xff09;的请求&#xff0c;如果是读写镜像元数据&#xff0c;则对glance db进行读写操作&#xff0c;因为镜像元数据都保存在glance db里面&#xff1b;如果是存取镜像本身&#xff0c;则对后端存储…

Ubuntu系统上安装Apache和WordPress

** 第一步跟新系统包 ** 首先跟新系统包 sudo apt update sudo apt upgrade第二步下载安装apache sudo apt install apache2 ##查看apache的状态是否启动成功 sudo systemctl status apache2 ##查看服务器的ip地址 sudo ip a通过ip地址进行访问apache页面 第三步下载安装…

vue3+vite从零架构:写组件、构建、打包并上传个人前端组件库至私有npm仓库最终在自己项目中下载并使用(超详细的流程,小编已实现)

目录 第一章 前言 第二章 准备工作 第三章 封装组件 3.1 文件结构 3.2 编写组件代码 第四章 项目打包 第五章 发布到npm 5.1 npm准备工作 5.2 发布npm包 ​编辑 第六章 从npm安装使用 第一章 前言 在我们很多开发过程中&#xff0c;不管是使用vue还是react&#x…

github相关命令

如果我们要从 GitHub 上拉取一个项目到本地&#xff0c;进行修改并上传回去&#xff0c;通常需要以下步骤&#xff1a; 1. 克隆远程仓库到本地 使用 git clone 命令将 GitHub 上的项目克隆到本地&#xff1a; (网址示例如下所示&#xff09; git clone https://github.com/你的…