前言

本系列將介紹 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

Binding HTML Classes

Array Syntax

我們可以傳遞一個陣列給 v-bind:class，以動態切換 class。

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

將會渲染成：

<div class="active text-danger"></div>

假如你想要根據條件來切換 class，你可以將陣列傳遞給 v-bind:class，並且將條件放在陣列中。

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

以上的程式碼將會根據 isActive 的值來決定是否要加上 activeClass。
但假如你有多個條件，這樣的寫法就會很冗長，所以可以在陣列中使用 object syntax 來簡化這個過程，例如：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

With Components

當你在一個元件中使用 class 屬性時，這些 classes 將會被添加到該元件的根元素上。這個元素上已經存在的 class 將不會被覆蓋。
例如以下的範例：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

當使用這個元件時也新增一個 class：

<my-component class="baz boo"></my-component>

將會渲染成：

<p class="foo bar baz boo">Hi</p>

使用 class binding 也是一樣的道理：

<my-component v-bind:class="{ active: isActive }"></my-component>

當 isActive 的值為 true 時，將會渲染成：

<p class="foo bar active">Hi</p>

Binding Inline Styles

Object Syntax

我們可以傳遞一個物件給 v-bind:style 來動態的切換樣式。使用時看起來就很像 CSS，但其實是一個 JavaScript 物件。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接綁定一個 style 物件可以讓 template 更簡潔

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Array Syntax

我們也可以傳遞一個陣列給 v-bind:style 來使用 multiple style objects。

<div v-bind:style="[baseStyles, overridingStyles]"></div>

Auto-prefixing

當你使用的 CSS property 需要加上 vendor prefix 時，例如 transform，Vue.js 會自動依照支援的瀏覽器來加上相對應的 prefix。

Multiple Values

你可以提供一個 multiple (prefixed) values 的陣列給一個 property，例如：

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

只會渲染出瀏覽器支援的最後一個值，在上面的例子中，如果瀏覽器支援 unprefixed flexbox，只會渲染 display: flex。

Reference

• https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
• https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles