vue 写作风格指南及规范

阳呀呀

对于vue的书写风格,vue官网上有一套完整的适合入门时所遵循的指南。在每个公司中,每个团队都有自己的风格,针对我们前端团队的风格,总结出了一套适用于我们公司的书写规范。其中大部分都是按照指南的规定来遵循的,如果不想一个一个看指南中的规则,可以遵循本文总结的规则,也能写出符合规范的vue组件。

1.对于单文件组件,每个文件中 template/script/style 标签的顺序保持一致,且把style标签放在最后。(https://cn.vuejs.org/v2/style...
clipboard.png

2.在 data、created、methods 等中间加一个空行,便于阅读。(https://cn.vuejs.org/v2/style...
clipboard.png

3.多个特性的元素,每个特性应该单独一行。(https://cn.vuejs.org/v2/style...
clipboard.png

4.指令有缩写一律采用缩写形式(要么都缩写、要么都不缩写)。(https://cn.vuejs.org/v2/style...
clipboard.png

5.组件命名都以大写字母开头(要么都大写,要么都横线连接)。(https://cn.vuejs.org/v2/style...

6.对于公共组件,style 标签最好加上 scope 属性,防止样式被其他组件污染。(https://cn.vuejs.org/v2/style...

7.定义 props 时,应该尽量详细,不要只写参数名,最好加上类型、是否必填、默认值、校验规则等。(https://cn.vuejs.org/v2/style...
clipboard.png

8.在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。(https://cn.vuejs.org/v2/style...
clipboard.png
clipboard.png

9.v-for 循环必须加上 key 属性,在整个 for 循环中 key 需要唯一,在全局不需要唯一。(https://cn.vuejs.org/v2/style...
clipboard.png

10.避免v-if 和 v-for 同时用在一个元素上(性能问题)(https://cn.vuejs.org/v2/style...

clipboard.pngclipboard.pngclipboard.png

阅读 2.9k
2.1k 声望
2.7k 粉丝
0 条评论
2.1k 声望
2.7k 粉丝
文章目录
宣传栏