本系列將介紹 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
- 【Day 21】淺入淺出 Rails with Vue - Vue 的基本概念 - 20
在定義 Component Name 的時候有兩種方式，一種是使用 kebab-case，另一種是使用 PascalCase。
kebab-case：使用連字符來分隔單字，例如：
my-component-name。
Vue.component('my-component-name', { /* ... */ })
PascalCase：使用大寫字母來分隔單字，例如：
MyComponentName。
Vue.component('MyComponentName', { /* ... */ })
當我們使用 PascalCase 定義時，你可以在引用 custom element 時使用 kebab-case，也可以使用 PascalCase，
也就代表你可以使用 <my-component-name> 或 <MyComponentName> 來引用。
但是 kebab-case 的 custom element 只能使用 kebab-case 來引用。
到目前為止的範例中，我們都是使用 Vue.component 來註冊 component，這種方式稱為全域註冊，也就是說這個 component 會在整個 Vue 的範圍內都可以使用。
Vue.component('my-component-name', {
// ... options ...
})
以下這些範例都是使用全域註冊的方式，也就代表這些 components 可以在任何 root Vue instance (new Vue) 的 template 中使用。
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
例如以下範例中，我們可以在 #app 的 template 中使用 <component-a>、<component-b>、<component-c> 這三個 components。
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
除了在 root Vue instance 的 template 中使用，這三個 components 也可以在彼此的 template 中互相使用。
不管是哪種語言，如果非必要，都不建議使用全域 component，因為全域變數會造成命名衝突，而且也不好管理。
假如我們使用像是 Webpack 這種 build tool，就算我們沒有使用某些全域 component，也還是會被打包進去。
這樣就會增加使用者下載的檔案大小，也會增加瀏覽器解析的時間。
看影片追技術