【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 2

Modern Web

淺入淺出 Rails with Vue系列第 2 篇

【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1

14th鐵人賽

k5953837

團隊猴子戰隊

2022-09-06 22:28:49

819 瀏覽

分享至

前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

淺入淺出 Rails with Vue - 1 - Before We Begin

Getting Started

先從建立一個基本的 index.html 開始吧！或是你也直接在 codesandbox 上面開始寫程式碼。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

Link to Dom

如果剪剪貼貼都正常，應該可以看到一個 Hello Vue! 的字樣。雖然只有簡單的 Hello Vue! 但是已經可以看到 Vue 的基本概念了 - Link to Dom。
所有的 Magic 都從連結 Html 上的 Dom 開始，像是上面的程式碼中的 el: '#app'，這個 el 就是 Vue 的實例，而 '#app' 就是要連結的 Dom。
data (message) 和 DOM(id 為 app 的 div) 之間已經連結，變成可以 Reactive 的狀態。

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

你說要怎麼確認 Reactive？我們來試試看，打開瀏覽器的 Console，輸入 app.message = 'Hello Vue.js!'，看看網頁上的字樣有沒有改變。

Bang! 看到沒有，網頁上的字樣已經改變了，這就是 Reactive。

Directive

在 Vue 中，我們可以使用 v- 開頭的指令來操作 DOM，例如 v-if、v-for、v-on、v-bind 等等。

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

  var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

這邊的 v-bind:title 就是一個指令，指令的意思是，當 message 改變時，title 也會跟著改變。
在 Console 輸入 app2.message = 'Hello Vue.js!'，並將滑鼠移至網頁上的字樣上，可以看到 title 也跟著改變了。

Bang! 看到沒有，網頁上的字樣已經改變了，這就是 Reactive。

Conditionals

如同其他程式語言一樣，Vue 也可以使用 v-if 來做條件判斷，如下面的範例：

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

由於 seen 的值為 true，所以會顯示 Now you see me。
在 Console 輸入 app3.seen = false，看看網頁上的字樣有沒有改變。

Bang! 看到沒有，網頁上的字樣已經改變了，這就是 Reactive。

Loops

除此之外，Vue 也可以使用 v-for 來做迴圈。

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

在 Console 輸入 app4.todos.push({ text: 'New item' })，看看網頁上的字樣有沒有改變。