vue.js公式が言ってるやっちゃいけないことまとめ

Vue.jsの公式ドキュメントからやっちゃいけないことを、備忘録としてまとめました。あくまで備忘録レベルのまとめでかなり適当なので、これじゃダメな人は公式を見てください（日本語もあります）。

vuejs.org

Style Guide — Vue.js

https://vuejs.org/v2/style-guide/index.html#Component-name-casing-in-JS-JSX-strongly-recommended

Vue.js - The Progressive JavaScript Framework

Appを除いて、componentの名前は複数単語でないとダメ。

Badな例

export default {
  name: 'Todo',//Todo一単語じゃダメ
  // ...
}

good

export default {
  name: 'TodoItem',//必ず２語以上
  // ...
}

componentのdataはfunctionにしないとダメ

good

data: function () {
  return {
    listTitle: '',
    todos: []
  }
}

propsの項目はできるだけ詳しく書かないとダメ

Badな例

props: ['status']//これでも動くけど・・・

good

props: {
  status: String//ちゃんと型も書く
}

//ここまで厳密に書いたほうがいい
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

v-forには:key(v-bind:key)もつけないとダメ

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

componentにつけるcss(style)はscopedするか、セレクタを厳密につけないとダメ

<style scoped>/*scopedでこのcomponentだけに適応*/
.button {
  border: none;
  border-radius: 2px;
}

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

<style>
.c-Button {/*このcomponentのみに通用するセレクタを適応*/
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

ここからは必須ではなく、推奨。

componentは一つ一つ別のファイルに保存するといい

Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})

componentのfile名はPascalCaseかkebab-caseに統一するといい

PascalCaseは先頭の文字も含めてすべて単語の頭文字が大文字のキャメルケース。kebab-caseはアンダーバーではなくハイフンでつなげるスネークケース（わかりにくい）。

だいたいPascalCaseでOK。DOMテンプレートはkebab-case。

アプリケーション全体で使われるcomponentの名前はbaseやv、appなどのプリフィックスをつけておくといい

BaseButton.vueとか・・・VTable.vueとか・・・

各ページで一度しか使わないcomponentはプレフィックスにTheをつけたほうがいい

Sidebar.vue → TheSidebar.vue とか・・・

ある親要素でしか使われない子要素はプリフィックスとして名前の初めに親要素を入れておいたほうがいい

例えば、Sidebarに特別に使われるButtonがあったなら、SidebarButton.vueにする

single-file components、string templates、JSXのタグは自己終了形式<タグ/>で書いたほうがいい

DOMテンプレートの場合のみタグで囲む。

Propsに定義する名称は略さないほうがいい

SdSettings.vue → StudentDashboardSettings.vue

propsの中身はcamelCaseで、テンプレートのタグの中やJSXではkebab-case

good

props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

だいぶややこしいことになってますね。

テンプレート内に複雑な式は書かずにmethodsかcomputedに書いたほうがいい

computedに書く式は短くシンプルに切り分ける

省略形は使うか使わないか統一する

: → v-bind:、 @ → v-on: 、 # → v-slot

Twitter

Facebook

Tumblr