前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
• 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11
• 【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12
• 【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13
• 【Day 15】淺入淺出 Rails with Vue - Vue 的基本概念 - 14
• 【Day 16】淺入淺出 Rails with Vue - Vue 的基本概念 - 15
• 【Day 17】淺入淺出 Rails with Vue - Vue 的基本概念 - 16
• 【Day 18】淺入淺出 Rails with Vue - Vue 的基本概念 - 17
• 【Day 19】淺入淺出 Rails with Vue - Vue 的基本概念 - 18
• 【Day 20】淺入淺出 Rails with Vue - Vue 的基本概念 - 19

Components Basics

DOM Template Parsing Caveats

要特別注意的是，一些 HTML 元素，例如 <ul>、<ol>、<table> 和 <select> 等，這些元素會限制只能包含特定的子元素。例如，<li> 只能出現在 <ul> 或 <ol> 中，<tr> 只能出現在 <table> 中，<option> 只能出現在 <select> 中。
反之，這些被包含的元素，也只能出現在特定的父元素中。例如，<td> 只能出現在 <tr> 中，<th> 只能出現在 <tr> 中，<optgroup> 只能出現在 <select> 中。
因此當我們試圖在 <table> 中使用 custom component 時，就會遇到一些問題。
如以下範例中，我們在 <table> 中使用了 <blog-post-row> 這個 custom component，但是 <table> 並不允許 <blog-post-row> 這個元素出現在其中，因此會出現錯誤訊息。

<table>
  <blog-post-row></blog-post-row>
</table>

為了解決這個問題，我們可以使用 is attribute workaround 來告訴 Vue 這個元素是一個 custom component。

<table>
  <tr is="blog-post-row"></tr>
</table>

假如你使用的是以下 3 種狀況之一的 string templates 而不是 DOM templates，那麼這個問題就不會發生，
因為這些 string templates 會被編譯成 DOM templates，而 DOM templates 會自動解決這個問題。

• Single-file components
• <script type="text/x-template">
• template property in a Vue component

Component Registration

Component Names

在註冊一個 component 時，我們可以給它一個名稱，如以下範例中，我們註冊了一個 global component，
Vue.component 的第一個參數是 component 的名稱，第二個參數是 component 的內容。

Vue.component('my-component-name', { /* ... */ })

在程式語言中，命名一直是一門學問，但大部分都是透過使用的方式來決定命名的方式，
如果這個 component 將會直接使用在 DOM 中，那麼就強烈的建議你遵循 W3C rules 來命名你的 component。
基本上就是 all-lowercase 和 must contain a hyphen 兩大原則，例如 my-component-name。
遵循這個原則將會避免和現有的和未來的 HTML 元素衝突。

Reference

• https://v2.vuejs.org/v2/guide/components.html
• https://v2.vuejs.org/v2/guide/components-registration.html