【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: / :

组件/实例选项中的空行

在这里插入图片描述

以上均来自官网学习

相关推荐

  1. 【前端】项目Vue2升级Vue3注意事项

    2024-07-15 23:28:03       32 阅读
  2. reactAPI讲解以及注意事项

    2024-07-15 23:28:03       57 阅读
  3. vue3第二十六节(Hooks 封装注意事项

    2024-07-15 23:28:03       33 阅读
  4. vue 事件$on,$off的注意事项

    2024-07-15 23:28:03       37 阅读
  5. vue-pdf的注意事项

    2024-07-15 23:28:03       42 阅读
  6. vue2升级到vue3的一些使用注意事项记录(二)

    2024-07-15 23:28:03       33 阅读
  7. 第19节:Vue3 在模板中展开时的注意事项

    2024-07-15 23:28:03       58 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 23:28:03       70 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 23:28:03       74 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 23:28:03       62 阅读
  4. Python语言-面向对象

    2024-07-15 23:28:03       72 阅读

热门阅读

  1. Linux

    2024-07-15 23:28:03       23 阅读
  2. RocketMQ入门指南:同步、异步、单向、延迟消息

    2024-07-15 23:28:03       23 阅读
  3. kubebuilder入门

    2024-07-15 23:28:03       20 阅读
  4. 嵌入式C语言常用技巧

    2024-07-15 23:28:03       20 阅读
  5. 独立站平台选择指南:WordPress 的优势与不足

    2024-07-15 23:28:03       20 阅读
  6. 国家自然科学基金 | 面上| 青基 | 联合 | 重点

    2024-07-15 23:28:03       22 阅读
  7. Spring常见的自定义和扩展的方法

    2024-07-15 23:28:03       20 阅读
  8. Flask 静态文件处理

    2024-07-15 23:28:03       18 阅读
  9. C语言 冒泡排序

    2024-07-15 23:28:03       20 阅读