Vueのコンポーネントの属性の順とタグの順

コンポーネントの属性

コンポーネントの属性の順番が統一されていると作成時に属性の追加や変更が簡単になり、コードも読みやすくなります。
定義されているルールを確認しました。

コンポーネントの属性の順

1. Definition (provides the component options)

• is

2. List Rendering (creates multiple variations of the same element)

• v-for

3. Conditionals (whether the element is rendered/shown)

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

4. Render Modifiers (changes the way the element renders)

• v-pre
• v-once

5. Global Awareness (requires knowledge beyond the component)

• id

6. Unique Attributes (attributes that require unique values)

• ref
• key

7. Two-Way Binding (combining binding and events)

• v-model

8. Other Attributes (all unspecified bound & unbound attributes)
9. Events (component event listeners)

• v-on

10. Content (overrides the content of the element)

• v-html
• v-text

コンポーネント内のタグの順

オプションがあるようですが、基本的には下記の順で記載しよう。

1. template
2. script
3. style

リンク

vue/attributes-order
Element attribute order
vue/component-tags-order