# 元件樣板製作

## template
加入 template 屬性，用反引號框住樣板內容，元件名稱直接作為標籤名稱。

app.component("alert", {
  template: `<div class="alert alert-primary" role="alert">範例一</div>`
});

## x-template

建立 script，加入 type="text/x-template" id="樣板名稱"，script 中放入樣板內容，component 中的 template 補上 '#樣板名稱'。

<script type="text/x-template" id="alert-template">
  <div class="alert alert-primary" role="alert">
    x-template 所建立的元件
  </div>
</script>

app.component("alert2", {
  template: "#alert-template"
});

<alert2></alert2>

## 單文件元件
...待學習

### 參考資料＋圖片來源
- [六角 2022 Vue 直播班](https://www.hexschool.com/courses/vue-training.html)

###### tags: `Vue` `Vue 直播班 - 2022 冬季班` `六角學院`