概要
Vue.jsの学習をしていると、キャメル、ケバブ、パスカル...と書き方のルールが記述場所によってまちまちで混乱してしまうことが多いですよね。自分用の備忘録 兼 同じ初学者の方の参考になればと思い執筆しました！
プロジェクト、人によりこの限りではないと思いますが、チートシートとして自分なりにまとめてみましたので、迷った時の参考にしていただければと思います。
チートシート
(項目それぞれ◎が推奨の書き方です)
| ファイル名 | コンポーネント名 | メソッド名 | props | $emitのカスタムイベント | |
|---|---|---|---|---|---|
| パスカルケース PascalCase |
◎ | ||||
| キャメルケース camelCase |
◎ ※DOMテンプレートでは ケバブが必須 |
◎ | prop内はキャメルが◎ | ||
| ケバブケース kebab-case |
HTML内はケバブが◎ | ◎ | |||
| 例 |  |
< template> < sampleWord> < /sampleWord> < /template> export default { components: { sampleWord }} |
<...v-on:click "sampleMethod"> | -親comp側- < sampleHuman first-name="suzuki" last-name="itiro"/> -子comp側- export default { props: { firstName: String lastName: String }} |
< template> < button v-on:click= "this.$emit ('create-button-click')" > < /button> |
結論
まとめてみてわかったことですが
・Vueファイル名、は「パスカルケース」
・Javascript内では「キャメルケース」
・HTML内では「ケバブケース」
という風に分けるのが一番シンプルでわかりやすいかなと思います！
間違っている点などありましたらご指摘頂けますと幸いです。