Vue.js命名規則、命名のコツ

Vue.js コンポーネント スタイル ガイド
こちらがベースになっているのでまずはこれを熟読すべし!
以下、引用になっているのはこのサイトからの出典です。

2017/12/14 追記

公式ガイドがもうすぐBetaが外れるのでこちらを見たほうが良いです。

コンポーネント名

意味のある名前で: 具体的過ぎず、抽象的過ぎず。
短く: ２または３語。
発音可能: それらについて話せるようにしたい。

例)

• Card: 短すぎます。抽象的すぎます。
• UserProfilePostErrorModal: 長すぎます。具体的すぎます。
• UserList: Good

ファイル名

PascalCaseにします。

• user_list.vue: PascalCaseになっていません。
• UserList.vue: Good

name属性

name属性は必ず与えましょう。
name属性は.vueファイルでない場合は必ず与えましょう。
.vueファイルの場合は自動でファイル名がname属性になるため不要です。

PascalCaseにします。

// name属性がありません。
export default {
  data: function() {
    return {
      foo: "bar"
    }
  }
}

// Good
export default {
  name: 'UserList'
}

html

kebab-caseにします。

<template lang="html">
  <user-list></user-list>
</template>

<script type="text/javascript">
export default {
  name: "Hoge",
  components: {
    'user-list': UserList
  }
}
</script>

コンポーネントの登録の部分はES2015では以下のように省略して書くこともできます(Thank you @kimama1997)。

export default {
  name: "Hoge",
  components: {
    UserList
  }
}

{ ComponentA }は{ ComponentA: ComponentA }の簡略形です。
そしてVueは自動でキーをcomponent-aに変換してくれます。

参考: https://vue-loader.vuejs.org/ja/features/es2015.html

メソッド名

当然camelCaseにします。
処理の内容を明確に表す名前にすること。

よくある間違いは@clickで発火するメソッドにclickButton等とつけてしまうことです。
ちゃんと処理の内容(クリックすると何が起きるのか)を表すようにしましょう。

<!-- 何が起きるのかを表していません -->
<button @click="clickSubmit">Submit</button>

<!-- Good -->
<button @click="postData">Submit</button>

イベント名

イベント名前はケバブケースにするべきです。
イベント名は末尾が不定形の動詞(例 client-api-load)、または名詞(例 drive-upload-success)で終わるべきです。

よくある間違いは@clickで発火したタイミングで通知するイベントに対してupdate-user-list等と実行する内容をつけてしまうことです。
何が起きたのかを表す名前をつけましょう。
メソッド名をつけるときとは逆の考え方なので要注意です。

this.$emit('updateButtonClick') // kebab-caseになっていません。
this.$emit('click-on-update-button') // 末尾が不定形の動詞で終わっていません。
this.$emit('update-button-click') // Good

ちなみに vue.js 2.3 から使える .sync 修飾子を使う場合は少々ややこしいですが、以下のようにkebab-caseとcamelCaseを使い分けるので要注意です。

<comp :my-foo.sync="bar"></comp>

this.$emit('update:myFoo', newValue)

See the Pen vue.js sync test by isuke (@isuke) on CodePen.