前言

本系列將介紹 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
• 【Day 22】淺入淺出 Rails with Vue - Vue 的基本概念 - 21
• 【Day 23】淺入淺出 Rails with Vue - Vue 的基本概念 - 22
• 【Day 24】淺入淺出 Rails with Vue - Vue 的基本概念 - 23

Props

Prop Casing (camelCase vs kebab-case)

在 HTML 的 attributes 其實是 case-insensitive 的，所以瀏覽器會把所有的 attributes 都轉成小寫，也就是說當你使用 in-Dom templates 時，camelCased prop names 必須使用其對應的 kebab-case (短橫線分隔) 命名：
例如以下範例中，我們 global registered 一個名稱叫做 blog-post 的 component，並且宣告了一個 prop 叫做 postTitle：

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

當我們嘗試在 in-Dom 中使用這個 component 並且傳入一個 postTitle prop 時，必須使用 kebab-case 命名，

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

如果你使用 camelCase ，瀏覽器會把它轉成 posttitle，這樣就會造成 prop 傳遞失敗：

<blog-post postTitle="hello!"></blog-post>

假如你使用的是 string templates 方式，以上的規則就不適用了，因為在 component 中 template 的 attributes 不會被轉成小寫。

另外稍微解釋一下什麼叫做 in-Dom templates，什麼叫做 string templates，在 Vue 中，我們可以使用兩種方式來撰寫 template：

• in-Dom templates：在 HTML 中撰寫 template，並且使用 v-bind 或 v-on 來綁定資料或是事件。
• string templates：在 JavaScript 中撰寫 template，例如像是在 Vue component 的 template就是 string template，透過使用 render 函式來渲染。

Prop Types

到目前為止，我們在 component 中使用的 props 都是陣列，但是在 Vue 中，我們可以使用物件來定義 props，這樣可以讓我們更加清楚的知道這個 prop 的資料型態，例如：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

這麼做會有以下兩種好處：

1. 這樣可以讓我們更加清楚的知道這個 prop 的資料型態，這樣在撰寫程式碼時就可以避免一些錯誤。
2. Vue 會在開發模式下，給予一些警告，例如當你傳入一個 String 而不是 Number 時，Vue 會給予警告。

例如在以下範例中，我們定義了一個 blog-post component，並且宣告了一個 likes prop，並且指定它的資料型態為 Number：

<div id="dynamic-component-demo" class="demo">
  <blog-post post-like="string"></blog-post>
</div>

blogPost = {
  // camelCase in JavaScript
  props: {
    postLikes: Number,
  },
  template: "<h3>Got {{ postLikes }} Likes.</h3>",
};

new Vue({
  el: "#dynamic-component-demo",
  components: {
    "blog-post": blogPost,
  },
  data: {
    likes: 123,
  },
});

當我們試圖傳入一個 string 到 postLikes prop 時，Vue 會給予警告：

[Vue warn]: Invalid prop: type check failed for prop "postLikes". Expected Number with value NaN, got String with value "string".

Reference

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