Vue の合理化されたスタイルのコード共有

Vue公式サイトのスタイルガイドは優先度（必須、強く推奨、推奨、使用注意）で分類されており、コード間隔が広くて検索しにくいです。この記事は、タイプごとに分類され、いくつかの例や説明が簡素化された Vue スタイル ガイドです。この記事では、コンポーネント名、手順、機能など、Vue の合理化されたスタイル ガイドの関連情報を主に紹介します。皆さんの参考になれば幸いです。

コンポーネント名

[コンポーネント名は複数の単語である必要があります] (必須)

コンポーネント名は、ルートコンポーネントのアプリを除き、常に複数の単語である必要があります。 これを行うと、すべての HTML 要素名が単一の単語であるため、既存および将来の HTML 要素との競合が回避されます

//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})

[単一ファイルのコンポーネントのファイル名は、常に大文字で始まるか (PascalCase)、常に水平方向の行接続 (kebab-) にする必要があります。 case)] (強く推奨)

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

[基本コンポーネント名は特定のプレフィックスで始まる必要があります] (強く推奨)

特定のスタイルと規則を適用する基本コンポーネント (つまり、ロジックやステートレス コンポーネントを持たない表示クラス) は、すべてBase、App、V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

などの特定の接頭辞で始めます

[アクティブなインスタンスが 1 つだけあるコンポーネントには、その一意性を示す接頭辞を付けて名前を付ける必要があります] (強く推奨)

これは、コンポーネントがは 1 つのページでのみ使用できますが、各ページで 1 回のみ使用できます。これらのコンポーネントは props を決して受け入れません

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

[親コンポーネントと密結合しているサブコンポーネントには、親コンポーネント名を付けて名前を付ける必要があります。プレフィックス] (強く推奨)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

[コンポーネント名は高レベル (通常は一般的な説明) の単語で始まり、説明的な修飾子で終わる必要があります] (強く推奨)

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

[単一ファイル コンポーネントおよび文字列テンプレートのコンポーネント名前は常に PascalCase である必要がありますが、DOM テンプレートでは常に kebab-case を使用してください](強く推奨)

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent></mycomponent>
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<mycomponent></mycomponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【コンポーネント名は略語ではなく完全な単語にする傾向があります】(強く推奨)

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

コンポーネント関連

【 単一ファイルJSX 内のコンテンツのないコンポーネント、文字列テンプレート、およびコンポーネントは自己終了である必要がありますが、DOM テンプレートではこれを行わないでください] (強く推奨)

自己終了コンポーネントとは、コンテンツがないだけでなく、意図的にコンテンツを持たないことを意味します。 content

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<mycomponent></mycomponent>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

[コンポーネント スタイルのスコープを設定する] (必須)

このルールは、単一ファイル コンポーネントにのみ関連します。 スコープ付き属性を使用する必要はありません。スコープの設定は、CSS モジュールを使用するか、他のライブラリや規約を使用して行うこともできます

//bad
<template><button>X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button>X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button>X</button></template>
<style>
.btn-close {background-color: red;}
</style>

[単一ファイル コンポーネントでは、<script>、<template>、<style> タグの順序を常に維持する必要があります] (推奨) </script>

//good
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

【1つのファイルにコンポーネントは1つだけ】(強く推奨)

//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {})
//good
components/
|- TodoList.vue
|- TodoItem.vue

【コンポーネントオプションのデフォルトの順序】(推奨)

1. 副作用(コンポーネントの外側で効果をトリガーする)

el

2.認識 (コンポーネント以外の知識が必要)

名前
親

3. コンポーネントの種類(コンポーネントのタイプを変更する)

機能
4. テンプレート修飾子(テンプレートのコンパイル方法を変更する)

区切り文字
コメント
5. テンプレートの依存関係 (テンプレートで使用されるリソース)

コンポーネント
ディレクティブ
フィルター

6. 組み合わせ(属性をオプションにマージする)

extends

mixins

7. インターフェース(コンポーネントのインターフェース)

inheritAttrs

モデル
props /propsData

8、ローカル状態 (ローカルのリアクティブプロパティ)

data

computed

9、イベント (リアクティブイベントによってトリガーされるコールバック)

watch

ライフサイクルフック (それらの順序に従って呼び出されます)

10. 非応答プロパティ (応答システムに依存しないインスタンスプロパティ)

メソッド

11. レンダリング (コンポーネント出力の宣言的記述)

template/render

renderError

prop

[Prop 定義はできるだけ詳細にする必要があります] (必須)

詳細な prop 定義には 2 つの利点があります: 1. コンポーネントの API が記述されるため、コンポーネントの使用方法が理解しやすくなります。2. 開発環境で。 、 if 不正な形式の prop をコンポーネントに提供すると、Vue がエラーの潜在的な原因を見つけるのに役立つように警告します

//bad
props: ['status']
//good
props: {
 status: String
}
//better
props: {
 status: {
 type: String,
 required: true
 }
}

【props を宣言するとき、その名前付けには常にキャメルケースを使用する必要があり、テンプレートと JSX では常にケバブケースを使用する必要があります 】 (強く推奨)

//bad
props: {'greeting-text': String}
<welcomemessage></welcomemessage>
//good
props: {greetingText: String}
<welcomemessage></welcomemessage>

コマンドと機能

【v-forでは常にキーを使用する】(必須)

//bad
 

//good  

【同じ要素に対してv-ifとv-forを同時に使用しないでください】(必須)

//bad

 {{ user.name }} 

//good

 {{ user.name }} 

[複数の機能を持つ要素は、機能ごとに 1 行ずつ、複数行で記述する必要があります] (強く推奨)

//bad
<img  src="/static/imghwm/default1.png" data-src="https://vuejs.org/images/logo.png" class="lazy" alt="Vue の合理化されたスタイルのコード共有" >
//good
<img  src="/static/imghwm/default1.png" data-src="https://vuejs.org/images/logo.png" class="lazy" alt="Vue の合理化されたスタイルのコード共有" >

[要素の機能のデフォルトの順序] (推奨)

1. 定義 (コンポーネントのオプションを提供する)

は

2. リストレンダリング(同じ要素の複数のバリエーションを作成する)

v-for

3. 条件付きレンダリング(要素がレンダリング/表示されるかどうか)

v-if

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

4. レンダリング方法（要素のレンダリング方法を変更する）

v-pre

v-once

5. グローバル認識（コンポーネントを超えた知識が必要）

id

6. 固有の機能 (固有の値を必要とする機能)

ref

key
slot

7. 双方向バインディング (バインディングとイベントの組み合わせ)

v-model

その他機能 (すべての通常のバインドまたは非バインド機能)

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

v-on

10、内容 (复写元素的内容)

v-html
v-text

属性

【私有属性名】（必要）

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀，并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_ )

//bad
 methods: {update: function () { }}
//bad
 methods: {_update: function () { } }
//bad
 methods: {$update: function () { }}
//bad
 methods: {$_update: function () { }}
//good
 methods: { $_myGreatMixin_update: function () { }}

【组件的data必须是一个函数】（必要）

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数

//bad
Vue.component('some-comp', {
 data: {
 foo: 'bar'
 }
})
//good
Vue.component('some-comp', {
 data: function () {
 return {
 foo: 'bar'
 }
 }
})

【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）

//bad
{{
 fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}
//good
computed: {
 normalizedFullName: function () {
 return this.fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
 }
}

【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）

//bad
computed: {
 price: function () {
 var basePrice = this.manufactureCost / (1 - this.profitMargin)
 return (
 basePrice -
 basePrice * (this.discountPercent || 0)
 )
 }
}
//good
computed: {
 basePrice: function () {
 return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
 return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
 return this.basePrice - this.discount
 }
}

【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）

//good
props: {
 value: {
 type: String,
 required: true
 },
 focused: {
 type: Boolean,
 default: false
 }
}

谨慎使用

1、元素选择器应该避免在 scoped 中出现

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的

//bad
<style>
button {
 background-color: red;
}
</style>
//good
<style>
.btn-close {
 background-color: red;
}
</style>

2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop

3、应该优先通过 Vuex 管理全局状态，而不是通过  this.$root 或一个全局事件总线

4、如果一组 v-if +  v-else 的元素类型相同，最好使用  key (比如两个 

元素)

//bad
<p>
 错误：{{ error }}
</p>
<p>
 {{ results }}
</p>
//good
<p>
 错误：{{ error }}
</p>
<p>
 {{ results }}
</p>

相关推荐：

vue如何实现前进刷新后退不刷新

值得收藏的vue开发技巧实例

Vue header组件开发实例代码

以上がVue の合理化されたスタイルのコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。