vue风格指南，（写法）

 

1.Prop 名称^强烈推荐

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

 

props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

2.多个 attribute 的元素^强烈推荐

多个 attribute 的元素应该分多行撰写，每个 attribute 一行。

在 JavaScript 中，用多行分隔对象的多个 property 是很常见的最佳实践，因为这样更易读。模板和 JSX 值得我们做相同的考虑。

反例

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>

 

好例子

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

3.指令缩写^强烈推荐

指令缩写 (用 : 表示 v-bind:，@ 表示 v-on: 和用 # 表示 v-slot) 应该要么都用要么都不用。

 

好例子

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

<input
  @input="onInput"
  @focus="onFocus"
>

<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

 

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

4.元素 attribute 的顺序^推荐

元素 (包括组件) 的 attribute 应该有统一的顺序。

这是我们为组件选项推荐的默认顺序。它们被划分为几大类，所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。

1. 定义 (提供组件的选项)

   • is

2. 列表渲染 (创建多个变化的相同元素)

   • v-for

3. 条件渲染 (元素是否渲染/显示)

   • v-if
   • v-else-if
   • v-else
   • v-show
   • v-cloak

4. 渲染修饰符 (改变元素的渲染方式)

   • v-pre
   • v-once

5. 全局感知 (需要超越组件的知识)

   • id

6. 唯一的 Attributes (需要唯一值的 attribute)

   • ref
   • key

7. 双向绑定 (把绑定和事件结合起来)

   • v-model

8. 其他 Attributes (所有普通的绑定或未绑定的 attribute)

9. 事件 (组件事件监听器)

   • v-on

10. 内容 (覆写元素的内容)

    • v-html
    • v-text

5.模板中的组件名称大小写^强烈推荐

对于绝大多数项目来说，在单文件组件和字符串模板中组件名称应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

PascalCase 相比 kebab-case 有一些优势：

• 编辑器可以在模板里自动补全组件名称，因为 PascalCase 同样适用于 JavaScript。
• MyComponent> 视觉上比 <my-component> 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。
• 如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。

不幸的是，由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。

还请注意，如果你已经是 kebab-case 的重度用户，那么与 HTML 保持一致的命名约定且在多个项目中保持相同的大小写规则就可能比上述优势更为重要了。在这些情况下，在所有的地方都使用 kebab-case 同样是可以接受的。

 

 

6.单文件组件文件的大小写^强烈推荐

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

反例

components/
|- mycomponent.vue

 

components/
|- myComponent.vue

 

好例子

components/
|- MyComponent.vue

 

components/
|- my-component.vue

 

 

 

 

 

 

 

 

 

转：https://www.javascriptc.com/vue3js/style-guide