前言

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

Using JavaScript Expressions

在先前的例子中，我們透過 Mustaches 或 v-directive 綁定的方式來顯示資料，但是我們也可以透過 JavaScript 表達式來顯示資料。

// Mustaches JavaScript Expressions
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

// v-bind JavaScript Expressions
<div v-bind:id="'list-' + id"></div>

需特別注意一個限制，就是每個綁定都只能包含單一的表達式 (one single expression)，所以以下的寫法是錯誤的：

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

Directives

指令 (Directives) 是帶有 v- 前綴的特殊屬性，指令的職責是當表達式的值改變時，對其所在的 DOM 元素進行相應的操作。
Directives attribute 的值預期是單一 JavaScript 表達式 (one single JavaScript expression)，除了 v-for 以外，指令的值都是可選的。

<p v-if="seen">Now you see me</p>

在以上的例子中，如果 seen 的值為 true，則 <p> 會被渲染，否則不會被渲染。

Arguments

有些指令可以接收一個 "argument"，在指令名稱之後以冒號表示。例如，v-bind 指令可以用來响應式地更新 HTML 屬性：

<a v-bind:href="url"> ... </a>

在這裡 href 是 argument，告訴 v-bind 指令將該元素的 href 屬性和表達式 url 的值綁定。

<a v-on:click="doSomething"> ... </a>

在這裡 click 是 argument，告訴 v-on 指令將該元素的 click 事件和表達式 doSomething 的值綁定。

Dynamic Arguments

有些指令，例如 v-bind 和 v-on，是允許動態的 argument，例如：

<!--
Note that there are some constraints to the argument expression, as explained
in the "Dynamic Argument Expression Constraints" section below.
-->
<a v-bind:[attribute]="url"> ... </a>

在這裡 attribute 的值將作為 v-bind 的 argument 動態地更新，例如 Vue instance 的 data 中有一個 attribute 的屬性，其值為 href，則上述的例子等同於：

var app = new Vue({
  el: "#app",
  data: {
    attribute: "href",
    url: "https://vuejs.org"
  },
});

<div id="app">
  <a href="https://vuejs.org">VueJS</a>
</div>

除了動態的 attribute name，也可以動態的指定 event name：

<a v-on:[event]="doSomething"> ... </a>

在這裡 event 的值將作為 v-on 的 argument 動態地更新，例如 Vue instance 的 data 中有一個 event 的屬性，其值為 click，則上述的例子等同於：

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!",
    event: "click",
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("");
    },
  },
});

<div id="app">
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

Dynamic Argument Constraints

動態的 argument 值必須符合下列的限制：

• JavaScript 表達式不能包含空格，例如 v-bind:[foo + bar] 是無效的。
• JavaScript 表達式不能包含引號，例如 v-bind:['foo' + bar] 是無效的。
• JavaScript 表達式不能包含非法的 JavaScript 標識符字符，例如 v-bind:[foo-bar] 是無效的。JavaScript 表達式

除此之外，應避免使用 uppercase 字母，因為 HTML attribute name 是大小寫不敏感的，例如以下的例子中，browser 會將 v-bind:[someAttr] 轉換為 v-bind:[someattr]：

<!--
This will be converted to v-bind:[someattr] in in-DOM templates.
Unless you have a "someattr" property in your instance, your code won't work.
-->
<a v-bind:[someAttr]="value"> ... </a>

Reference

• https://v2.vuejs.org/v2/guide/syntax.html