Day19 Vue元件的命名规则 & 单一元件(SFC)

在元件模板中通常是以「标签」的形式来做使用，所以在命名上就会有些限制，也是因为必扁与其他标签名称产生冲突，在打多数人的认知通常会以两个以上的单字来命名，如<tode-item>、<component-layout>等等。

通常我们有两种命名方式

• 自首大写驼峰式命名 (pascal-case)
  "TodeItem" 、 "ComponentLayout" 、 "BaseTable" ...
• 连字号(kebab-case)的方式来命名。
  "tode-item" 、 "component-layout" 、 "base-table" ...

由於在解析HTML标签时，并没有大小写的差别，所以在命名时就会使用连字号标签。可以从昨天的例子可以看到我们在HTML里为什麽使用<my-component>来命名，但是在.vue单一元件的<template>模板中就没有那麽多限制了。

那什麽是单一元件呢?

在刚刚我们有提到.vue的命名，那.vue是什麽，.vue跟元件很像，指示是以.vue档案的方式包装起来，酨透过import的方式引入档案做子元件使用，所以通常我们称这样为Vue的单一元件档(Single File Components,SFC)。

在一个SFC通常会包含三种东西，第一为HTML模板的<template>、用来定义元件结构与逻辑的<script>与CSS格式的<style>。

今天就先到这了，明天见~