前言

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

Conditional Rendering

Key Modifiers

當我們在 listening keyboard event 時，常常需要判斷一些特殊的 keys，例如：Enter、Esc、Tab、Space、Up、Down、Left、Right 等等。Vue 提供了一些 key modifiers 讓我們可以更方便的判斷這些 keys。
例如以下範例中，我們可以使用 v-on:keyup.enter 來監聽 Enter 的事件，只有當使用者按下 Enter 時，才會觸發 vm.submit()

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

你也可以使用任何有效的 key name 來作為 key modifiers，例如以下範例中，我們使用 v-on:keyup.page-down 來監聽 Page Down 的事件。

<input v-on:keyup.page-down="onPageDown">

System Modifier Keys

Vue 也提供了一些 system modifier keys，讓我們可以更方便的判斷使用者是否按下了 Ctrl、Alt、Shift、Meta 等等，對應到的 key modifiers 分別為：

• .ctrl
• .alt
• .shift
• .meta

特別注意的是不同 System 所對應的 key 會有些許差別，例如 .meta 在 Mac 上對應到的是 Command，在 Windows 上對應到的是 Windows。

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

.exact Modifier

.exact modifier 可以讓我們更精確的判斷使用者是否按下了特定的 key，並且可以更精確的定義使用者是否按下了其他的 key。

<!-- this will fire even if Alt or Shift is also pressed -->
<button v-on:click.ctrl="onClick">A</button>

<!-- this will only fire when Ctrl and no other keys are pressed -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- this will only fire when no system modifiers are pressed -->
<button v-on:click.exact="onClick">A</button>

Mouse Button Modifiers

Vue 也提供了一些 mouse button modifiers 讓我們可以更方便的判斷使用者是否按下了滑鼠的按鈕，對應到的 key modifiers 分別為：

• .left
• .right
• .middle

Form Input Bindings

Basic Usage

你可以使用 v-model 指令在表單輸入元件上建立雙向資料綁定，包含了以下幾種輸入元件：

• <input>
• <textarea>
• <select>

v-model 將忽略所有表單元素的 value、checked、selected attribute 的初始值，而是將 Vue instance 的資料作為資料來源。你可以在 data 中指定初始值。之後，當使用者輸入時，v-model 會在表單元素上更新資料。

v-model 會根據表單元素的不同而有不同的行為：

• text 和 textarea 元素使用 value property 和 input event
• checkbox 和 radio 使用 checked property 和 change event
• select 字串使用 value property 和 change event

對於需要輸入法的語言，你應該使用 input event 而不是 change event，因為 change event 在輸入法結束輸入時才會觸發。

Text

以下範例中 v-model 會在 <input> 上建立雙向資料綁定，當使用者輸入時，v-model 會在 Vue instance 的 message 資料上更新資料。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Multiline text

你可以使用 v-model 在 <textarea> 上建立雙向資料綁定，當使用者輸入時，v-model 會在 Vue instance 的 message 資料上更新資料。

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

Reference

• https://v2.vuejs.org/v2/guide/events.html
• https://v2.vuejs.org/v2/guide/forms.html