iT邦幫忙

2022 iThome 鐵人賽
DAY 26
0
Modern Web

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

【Day 26】淺入淺出 Rails with Vue - Vue 的基本概念 - 25

14th鐵人賽
360 瀏覽

  • 分享至 

  • xImage
    •  

前言

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

Props

Passing Static or Dynamic Props

到目前為止我們傳到 props 的值都是屬於 static 的，也就是說我們在宣告 props 的時候就已經給定了值，如下所示：

<blog-post title="My journey with Vue"></blog-post>

但是有時候我們需要傳入一個動態的值，這時候我們就需要用到 v-bind 這個指令。

<!-- Dynamically assign the value of a variable -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- Dynamically assign the value of a complex expression -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

以上我們都是傳入 String 的 type，但是其實傳入 any type 的值都是可以的，以下我們將分別介紹不同 type 的傳入方式。

Passing a Number

如以下範例中傳入的是一個 Number，在先前的章節有提到，可以針對 props 設定 type，養成好習慣，你真的不簡單，這樣在開發時就可以避免一些不必要的錯誤。
這時候我們就需要在宣告 props 的時候指定 type 為 Number。

<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.       -->
<blog-post v-bind:likes="42"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:likes="post.likes"></blog-post>

blogPost = {
  // camelCase in JavaScript
  props: {
    title: String,
    likes: Number,
  },
  template: "<h3>Title is {{ title }}, Likes count is {{likes}}</h3>",
};

Passing a Boolean

如以下範例中傳入的是一個 Boolean，再一次養成好習慣，你真的不簡單起來，設定 type 為 Boolean。

<!-- Including the prop with no value will imply `true`. -->
<blog-post is-published></blog-post>

<!-- Even though `false` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.          -->
<blog-post v-bind:is-published="false"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

blogPost = {
  // camelCase in JavaScript
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
  },
  template:
    "<h3>Title is {{ title }}, Likes count is {{likes}}, isPublished is {{isPublished}}</h3>",
};

Passing an Array

如以下範例中傳入的是一個 Array，再一次養成好習慣，你真的不簡單起來，設定 type 為 Array。

<!-- Even though the array is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.            -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

blogPost = {
  // camelCase in JavaScript
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
  },
  template:
    "<h3>Title is {{ title }}, Likes count is {{likes}}, isPublished is {{isPublished}}, commentIds: {{commentIds}}</h3>",
};

Passing an Object

如以下範例中傳入的是一個 Object，再一次養成好習慣，你真的不簡單起來，設定 type 為 Object。
但這次跟之前不一樣的是，當我們傳入的是 Object 時，v-bind 後面不需要加上 : (v-bind instead of v-bind:prop-name)。
假設我們想要傳入一個 post object 如下：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

在 DOM 中我們可以這樣寫：

<blog-post v-bind="post"></blog-post>

上面的寫法其實就等於，直接成為程式碼節省王

<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
  v-bind:likes="post.likes"
  v-bind:is-published="post.isPublished"
  v-bind:comment-ids="post.commentIds"
></blog-post>

Reference


上一篇
【Day 25】淺入淺出 Rails with Vue - Vue 的基本概念 - 24
下一篇
【Day 27】淺入淺出 Rails with Vue - Vue 的基本概念 - 26
系列文
淺入淺出 Rails with Vue 共 30 篇
  1. 26
    【Day 26】淺入淺出 Rails with Vue - Vue 的基本概念 - 25
  2. 27
    【Day 27】淺入淺出 Rails with Vue - Vue 的基本概念 - 26
  3. 28
    【Day 28】淺入淺出 Rails with Vue - Vue 的基本概念 - 27
  4. 29
    【Day 29】淺入淺出 Rails with Vue - Vue 的基本概念 - 28
  5. 30
    【Day 30】淺入淺出 Rails with Vue - Vue 的基本概念 - 29
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙